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',
            60,
            flex:1,
            dataIndex:'text'
        },{
            header:'权限',
            align:'left',
            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',
                 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'
            });

窗体的确定事件,