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

效果图:



  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值