ExtJs4 中 获取grid列表数据绑定到form表单

首先创建store：

var store = Ext.create('Ext.data.Store', {
    fields: [
        { name: 'IntData', type: 'int' },
        { name: 'StringData', type: 'string' },
        { name: 'TimeData', type: 'date' }
    ],
    autoLoad: true,
    proxy: {
        type: 'ajax',
        url: 'gridData.json',
        reader: {
            type: 'json',
            root: 'rows'
        }
    }
});

然后创建form：

Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    border: 0,
    width: 700,
    layout: 'column',
    items: [
        {
            columnWidth: 0.6,
            xtype: 'gridpanel',
            store: store,
            title: 'Grid列表',
            collapsible: true,
            columns: [
                { text: 'IntData', dataIndex: 'IntData' },
                { text: 'StringData', dataIndex: 'StringData' },
                { text: 'TimeData', dataIndex: 'TimeData', xtype: 'datecolumn', format: 'Y-m-d h:i a', flex: 1 }
            ],
            listeners: {
                selectionchange: function (model, records){
                    if(records[0]){
                        this.up('form').getForm().loadRecord(records[0]);
                    }
                }
            }
        },
        {
            columnWidth: 0.4,
            margin: '0 0 0 10',
            xtype: 'fieldset',
            title: 'Form表单',
            defaults: {
                width: 240,
                labelWidth: 90
            },
            defaultType: 'textfield',
            items: [
                { fieldLabel: 'IntData', name: 'IntData' },
                { fieldLabel: 'StringData', name: 'StringData' },
                { fieldLabel: 'TimeData', name: 'TimeData', xtype: 'datefield', format: 'Y-m-d h:i a' }
            ]
        }
    ]
});

主要用到了gridpanel的监听事件:

selectionchange: function (model, records){
    if(records[0]){
        this.up('form').getForm().loadRecord(records[0]);
    }
}

其中

this.up('form').getForm().loadRecord(records[0]);

也可更改为

Ext.getCmp('formId').getForm().loadRecord(records[0]);

当然，前提是要给form加一个ID

效果图：