Ext 4 Grid 和 Form 相互绑定并更新 Store 更新行

要实现的效果用图表示出来,选择左边的grid的任意行,该行的剩余字段绑定到右边的Form中...修改了Form中的字段.点击更新按钮自动更新store中选择汗的字段.

反正现在就是有这么样一个需求.

用到的model

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

+ View Code?

var colStore = Ext.create('Ext.data.Store', {

    model: 'Column',

    data: []

});

用的到grid

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

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..困扰一下午的问题终于处理了...