要实现的效果用图表示出来,选择左边的grid的任意行,该行的剩余字段绑定到右边的Form中...修改了Form中的字段.点击更新按钮自动更新store中选择汗的字段.
反正现在就是有这么样一个需求.
用到的model
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
Ext.define('Column', { extend: 'Ext.data.Model', fields: ['code', 'name', 'name2', 'name3', 'type', 'remark', {name: 'len', type: 'int'}, {name: 'digits', type: 'int'}, {name:'unique',type:'bool',defaultValue:false}, {name:'visible',type:'bool',defaultValue:false}, {name:'readonly',type:'bool',defaultValue:false}, {name:'default',type:'string'}, 'check','filter',{name:'isNull',type:'bool',defaultValue:false} ] });
用到的store
var colStore = Ext.create('Ext.data.Store', { model: 'Column', data: [] });
用的到grid
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
var gridColumnInfo=Ext.widget('grid',{ title: '栏目信息', region: 'west', margins: '0 2 0 0', width: 500, split: true, store: colStore, dockedItems: [{ xtype: 'toolbar', dock: 'top', items: [{ iconCls: 'add-16', text: '创建', handler: function () { colWin.show(); } },'->',{ iconCls: 'remove-16', disabled: true, id:'btnDel', text: '删除', handler: function () { var temp = this.up().up().getSelectionModel().getSelection(); colStore.remove(temp); } }] }], columns: [{ text: '标记', width: 40, draggable: false, menuDisabled: true, sortable: false, dataIndex: 'code', renderer: function (value, metaData, record, rowIdx, colIdx, store) { var index = store.indexOfTotal(record); var cs = []; while (index >= 0) { if (cs.length > 0) { index--; if (index < 0) break; } cs.push(ens[index % 26]); index = Math.floor(index / 26); } metaData.tdCls = Ext.baseCSSPrefix + 'grid-cell-special'; value=cs.reverse().join(''); return value; } },{ text: '名称(一层)', flex: 1, draggable: false, menuDisabled: true, sortable: false, dataIndex: 'name' },{ text: '名称(二层)', width: 100, draggable: false, menuDisabled: true, sortable: false, dataIndex: 'name2' },{ text: '名称(三层)', width: 100, draggable: false, menuDisabled: true, sortable: false, dataIndex: 'name3' },{ text: '类型', width: 100, draggable: false, menuDisabled: true, sortable: false, dataIndex: 'type' // renderer: function (value) { // // return colTypes.getById(value).get('name'); // } } ], listeners: { selectionchange: function (model, records) { Ext.getCmp('btnDel').setDisabled(model.length==0); if (records[0]) { frmColumnOption.getForm().loadRecord(records[0]); } } } })
注意selectionchange事件作用是把选择的grid行也就是store的的record.放在form里面
用到的form
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
var frmColumnOption=Ext.widget('form',{ title: '栏目信息', layout:{ type:'vbox', align:'center' }, defaults:{ labelWidth:60, width:'80%', margins:'3' }, defaultType:'textfield', items:[{ xtype:'checkboxfield', boxLabel:'空值', name:'isNull' },{ xtype:'checkboxfield', boxLabel:'唯一', name:'unique' },{ xtype:'checkboxfield', boxLabel:'隐藏', name:'visible' },{ xtype:'checkboxfield', boxLabel:'只读', name:'readonly' },{ fieldLabel:'默认值', name:'default' },{ fieldLabel:'内容检查', name:'check' },{ fieldLabel:'过滤条件', name:'filter' },{ fieldLabel:'name', name:'name' },{ fieldLabel:'name2', name:'name2' },{ fieldLabel:'name3', name:'name3' },{ fieldLabel:'type', name:'type' }], buttons: [{ text: '更新', handler: function() { var record=this.up('form').getRecord(), form=this.up('form').getForm(); if (form.isValid()) { form.updateRecord(record); colStore.commitChanges(); //colStore.load(); } } },{ text: 'Cancel', handler: function() { this.up('form').getForm().reset(); } }] })
注意更新事件,换取传递过来的record.然后获取form.然后更新record.这样省略了store.getAt(行).set('name','value')的麻烦..另外也不用load,因为commitChanges(),已经更新了store..困扰一下午的问题终于处理了...