Ext 從一個grid窗體中選擇數據到另一個grid

需求:

做權限管理創建一個角色的時候往往需要初始化權限(即選擇該角色下的菜單節點,然后對菜單節點的操作權限:查|增|刪|改.)到初始化頁面的時候,有一個gridpanel來盛放被選擇的節點和權限(權限可改),grid上面有個增加按鈕.點擊增加按鈕彈出窗體,所有菜單節點.(可選)選擇對應的菜單把該信息傳遞至,grid.如下圖:

然后點擊下一步,把grid中數據提交到后台.

自己的解決方法:

1,先把頁面內容構造出來,即gridpanel,win.

  //自定義模型權限模型
    Ext.define('Permission', {
        extend: 'Ext.data.Model',
        fields: [
            {name:'key', type: 'string'},
            {name:'fullkey',type:'string'},
            {name:'text',type:'string'},
            {name:'remark',type:'string'},
            {name: 'permission', type: 'int', defaulValue: 3}
        ]
    });
 //combox編輯模式
    var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 1
    });

    //頁面grid
    var grid=Ext.create('Ext.grid.Panel', {
        title: '權限信息',
        height: 400,
        store: permissionstore,
        frame: true,
        tbar: Ext.create('Ext.Toolbar',{
            items: ['->',{
                text: '增加權限',
                icon: rootPath+'ext/images/add.png',
                handler: selectPermissions
            }]
        }),
        renderTo: panelEl,
        selModel: {
            selType: 'cellmodel'
        },
        columns:[{
            header: '權限節點',
            align    : 'left',
            width    : 70,
            flex: 1,
            sortable : false,
            dataIndex: 'fullkey'
        }, {
            header:'權限名稱',
            align:'left',
            width:60,
            flex:1,
            dataIndex:'text'
        },{
            header:'權限',
            align:'left',
            width:80,
            flex:1,
            dataIndex:'remark'
        },{
            header: '權限',
            width    : 60,
            align    : 'center',
            sortable : false,
            dataIndex:'permission',
            editor: Ext.create('Ext.form.ComboBox',{
                typeAhead: true,
                transform: 'permission',
                valueField: 'key',
                displayField: 'ke',
                store:Ext.create('Ext.data.Store', {
                    fields: ['key', 'ke'],
                    data: [
                        {key:1,ke:"允許"},

                        {key:2,ke:"隱藏"},
                        {key:3,ke:"未知"},
                        {key:4,ke:"拒絕"}
                    ]
                }),
                listClass: 'x-combo-list-small'
            })
        }],
        plugins: [cellEditing]
    });

注意上面的按鈕事件,代碼如下

 //選擇權限
    function selectPermissions(){
        if(!win){
            //在模型之中增加一個復選屬性,這里增加了這個字段就可以使用Tree.getChecked
            Ext.define('Permissions', {
                extend: 'Ext.data.Model',
                fields: [
                    {name:'id',type:'string'},
                    {name:'key',type:'string'},
                    {name:'text',type:'string'},
                    {name:'remark',type:'string'},
                    {name:'fullKey',type:'string'},
                    {name:'checked', type:'bool', defaulValue:false }
                ],
                idProperty: 'Id'
            });

            //權限樹形節點模型
            var store = Ext.create('Ext.data.TreeStore', {
                model: 'Permissions',
                proxy: {
                    type: 'ajax',
                    url: rootPath + 'permission/list/get',
                    simpleSortMode: true
                },
                autoLoad:true
            });

            //臨時儲存選中的權限的模型
            var temp=[];

            //這里只是需要定義顯示的三個字段或者模型中存在的字段就可以
            var treeGrid = Ext.create('Ext.tree.Panel', {
                border:false,
                useArrows: true,
                rootVisible: false,
                store: store,
                multiSelect: true,
                singleExpand: true,
                columns: [{
                    xtype: 'treecolumn',
                    text: '權限節點',
                    flex: 2,
                    sortable: true,
                    dataIndex: 'key'
                },{
                    text: '權限名稱',
                    flex: 1,
                    sortable: true,
                    dataIndex: 'text',
                    align: 'left'
                },{
                    text: '權限說明',
                    flex: 1,

                    dataIndex: 'remark',
                    sortable: false
                }
            ]
            });

            //創建窗體
            win = Ext.create('widget.window', {
                title: '選擇權限',
                closeAction: 'hide',
                width: 600,
                height: 400,
                minWidth: 600,
                minHeight: 400,
                layout: 'fit',
                modal:true,
                resizable: true,
                items: treeGrid,
                buttons:[{
                    text:'確定',
                    handler:function(){
                      this.up('window').hide();

                      //這里取得選中的行
                      var rcs = treeGrid.getChecked();

                      //如果重復選擇就把以前的刪除然后再插入
                      if(temp.length>0)
                        temp.splice(0,temp.length)

                      for(var i=0; i<rcs.length; i++) {
                            temp.push({
                                key:rcs[i].get('key'),
                                fullkey:rcs[i].get('fullKey'),
                                text:rcs[i].get('text'),
                                remark:rcs[i].get('remark'),
                                permission:'3'
                            });
                      }
                      permissionstore.loadData(temp);
                    }
                },{
                    text:'取消',
                    handler:function(){
                        this.up('window').hide();
                    }
                }]
            });
        }
        win.show();
    }

關鍵代碼,

//在模型之中增加一個復選屬性,這里增加了這個字段就可以使用Tree.getChecked
            Ext.define('Permissions', {
                extend: 'Ext.data.Model',
                fields: [
                    {name:'id',type:'string'},
                    {name:'key',type:'string'},
                    {name:'text',type:'string'},
                    {name:'remark',type:'string'},
                    {name:'fullKey',type:'string'},
                    {name:'checked', type:'bool', defaulValue:false }//這個屬性是杜撰出來的,從數據庫加載出來的字段沒有這個屬性,它是專門下面TreeStrore而存在的.樹形旁邊的復選框的值就是這里杜撰出來的.
                ],
                idProperty: 'Id'
            });

窗體的確定事件,