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

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..困擾一下午的問題終於處理了...