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

首先创建store：

[javascript]  view plain copy

1. var store = Ext.create('Ext.data.Store', {  
2.     fields: [  
3.         { name: 'IntData', type: 'int' },  
4.         { name: 'StringData', type: 'string' },  
5.         { name: 'TimeData', type: 'date' }  
6.     ],  
7.     autoLoad: true,  
8.     proxy: {  
9.         type: 'ajax',  
10.         url: 'gridData.json',  
11.         reader: {  
12.             type: 'json',  
13.             root: 'rows'  
14.         }  
15.     }  
16. });  

然后创建form：

[javascript]  view plain copy

1. Ext.create('Ext.form.Panel', {  
2.     renderTo: Ext.getBody(),  
3.     border: 0,  
4.     width: 700,  
5.     layout: 'column',  
6.     items: [  
7.         {  
8.             columnWidth: 0.6,  
9.             xtype: 'gridpanel',  
10.             store: store,  
11.             title: 'Grid列表',  
12.             collapsible: true,  
13.             columns: [  
14.                 { text: 'IntData', dataIndex: 'IntData' },  
15.                 { text: 'StringData', dataIndex: 'StringData' },  
16.                 { text: 'TimeData', dataIndex: 'TimeData', xtype: 'datecolumn', format: 'Y-m-d h:i a', flex: 1 }  
17.             ],  
18.             listeners: {  
19.                 selectionchange: function (model, records){  
20.                     if(records[0]){  
21.                         this.up('form').getForm().loadRecord(records[0]);  
22.                     }  
23.                 }  
24.             }  
25.         },  
26.         {  
27.             columnWidth: 0.4,  
28.             margin: '0 0 0 10',  
29.             xtype: 'fieldset',  
30.             title: 'Form表单',  
31.             defaults: {  
32.                 width: 240,  
33.                 labelWidth: 90  
34.             },  
35.             defaultType: 'textfield',  
36.             items: [  
37.                 { fieldLabel: 'IntData', name: 'IntData' },  
38.                 { fieldLabel: 'StringData', name: 'StringData' },  
39.                 { fieldLabel: 'TimeData', name: 'TimeData', xtype: 'datefield', format: 'Y-m-d h:i a' }  
40.             ]  
41.         }  
42.     ]  
43. });  

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

[javascript]  view plain copy

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

其中

[javascript]  view plain copy

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

也可更改为

[javascript]  view plain copy

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

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

效果图：