extjs6实现跨页勾选

最近公司的Extjs6项目遇到了一个分页勾选的bug，分享一下自己这两天的经验。

话不多说，直接上代码：

下面写得是一个window，

/** * 人员选择公共组件，调用时配置以下参数，有什么参数组件就传值给什么组件 * memberNameCmp 名称显示框object * memberIdCmp id存储框object * memberGridCmp grid存储object  目标表格的store fields前四个必须是 id,name,orgid,orgName；本组件不关心目标表格的字段名，只按顺序插入 * memberSelModel:single/multi *  * 调用案例： * Ext.create('app.view.commonComponent.JudgeSelectWin',{    memberSelModel:"single",    memberGridCmp:button.up("window").down("grid");  }); */Ext.define('App.view.commonComponent.JudgeSelectWin', {  extend : 'Ext.window.Window',  alias : 'widget.JudgeSelectWin',  requires : ['App.view.judge.judge.JudgeViewModel',              'App.view.judge.judge.JudgeViewController'      ],  controller : 'judge',  autoShow : true,  //layout:"fit",  modal : true,  width : 1100,  height : 550,  title:"请选择评委",  alwaysOnTop :Ext.isIE8?1000:false,  padding:15,  closable:false,  tools:[{//alwaysOnTop设置了，原来的关闭按钮居然关不掉     type:'close',     handler: function(event, toolEl, panelHeader) {       panelHeader.up("window").close();     }  }],  items:[{    tbar:[{      xtype : 'combo',      name : 'conditionType',      queryMode : 'local',      displayField : 'value',      valueField : 'key',      editable:false,      value:"judgeName",      store :{        fields : [ 'key', 'value' ],        data : [ {          "key" : "judgeName",          "value" : "姓名"        }, {          "key" : "judgeCode",          "value" : "工号"        }, {          "key" : "orgName",          "value" : "所属部门"        } ]      }    }, {      xtype : 'textfield',      name : 'conditionValue',      enableKeyEvents :true,      listeners:{        keyup:function( cmp, e, eOpts ){          var btn=cmp.up("JudgeSelectWin").down("button[name='btnQueryRequest']");          if (e.getKey()==Ext.EventObject.ENTER)btn.fireEvent("click",btn);        }      }    }, {      xtype : 'button',      name : 'btnQueryRequest',      text : '查询',      iconCls : 'fa fa-search fa-lg',      listeners:{        click : function(button) {          var conditionType = button.up("window").down("combo[name='conditionType']").value;          var conditionValue =button.up("window").down("textfield[name='conditionValue']").value.replace(/(^\s*)|(\s*$)/g, "");;          var grid = button.up("window").down("grid");          var store = grid.getStore();          var proxy = store.getProxy();                    if (conditionType == 'judgeName') {            proxy.extraParams.judgeName = conditionValue;            proxy.extraParams.judgeCode = '';            proxy.extraParams.orgName = '';          } else if (conditionType == 'judgeCode') {            proxy.extraParams.judgeCode = conditionValue;            proxy.extraParams.orgName = '';            proxy.extraParams.judgeName = '';          } else {            proxy.extraParams.orgName = conditionValue;            proxy.extraParams.judgeCode = '';            proxy.extraParams.judgeName = '';          }          store.reload({page:1,start:0,limit:10});        }      }    }, '-', {      xtype : 'button',      name : 'btnCreateRequest',      text : '确定',      iconCls : 'fa fa-file-o fa-lg',      handler : function(button){        var win=button.up("window");//        var records=win.down("grid").getSelection();        var recordsName = window.selectNames;        var recordIds = window.selectIds;                if(recordsName&&recordsName.length>0){          var employeeCode=recordIds[0];          var employeeName=recordsName[0];        }        for(var i=1;i<recordsName.length;i++){        employeeName+=","+recordsName[i];        }                for(var j=1;j<recordIds.length;j++){        employeeCode+=","+recordIds[j];        }         if(win.memberNameCmp){            win.memberNameCmp.setValue(employeeName);            win.memberNameCmp.validate();          }          if(win.memberIdCmp){            win.memberIdCmp.setValue(employeeCode);          }              win.close();      }    },'-', {                                         xtype: 'textfield',                id : 'tag1',                name: 'name',                width : 400,                fieldLabel: '所选评委',                allowBlank: true                    }]  },{    style : 'border : solid 1px #ccc;margin:8px',    height : 370,    xtype:"grid",    columnLines : true,    listeners:{      itemdblclick:function( view, record, item, index, e, eOpts ){        var win=view.up("window");        if(record){          if(win.memberNameCmp){            win.memberNameCmp.setValue(record.data.judgeName);            win.memberNameCmp.validate();          }          if(win.memberIdCmp){            win.memberIdCmp.setValue(record.data.judgeCode);          }        }        win.close();      }    },    selModel : {      selType : 'checkboxmodel'    },    viewModel : {      type : 'judgeViewModel'    },    initEvents:function(){        var store = this.getViewModel().getStore('judgeList');        window.selectNames =[];        window.selectIds =[];                var proxy = store.getProxy();               var typeValue = this.up('window').typeValue;        var channelId = this.up('window').channelId;        var levelName = this.up('window').levelName;        var applicationId = this.up('window').applicationId;           var defenseDate = this.up('window').defenseDate;           var defenseStartTime = this.up('window').defenseStartTime;           var defenseEndTime = this.up('window').defenseEndTime;           if(typeValue){          proxy.extraParams.types = typeValue;        }        if(channelId){          proxy.extraParams.channelIds = channelId;        }        if(levelName){          proxy.extraParams.levelNames = levelName;        }        if(applicationId){          proxy.extraParams.applicationId = applicationId;        }        if(defenseDate){          proxy.extraParams.defenseDate = defenseDate;        }        if(defenseStartTime){          proxy.extraParams.defenseStartTime = defenseStartTime;        }        if(defenseEndTime){          proxy.extraParams.defenseEndTime = defenseEndTime;        }        store.load();    },    bind : {      store : '{judgeList}'    },    columns : [ {      xtype : 'rownumberer'    }, {            text : '评委工号',            dataIndex : 'judgeCode',            flex : 0.8          }, {            text : '评委姓名',            dataIndex : 'judgeName',            renderer: 'renderValue',            flex : 0.8          }, {            text : '评委类别',            dataIndex : 'type',            renderer: 'renderType'          }, {            text : '中心',            dataIndex : 'center',            renderer: 'renderValue'          }, {            text : '厂',            dataIndex : 'factory',            renderer: 'renderValue'          },{            text : '部门',            dataIndex : 'department',            renderer: 'renderValue',            flex : 1          },{            text : '职级',            dataIndex : 'classLevelName',            renderer: 'renderValue',            flex : 1          },{            text : '可评价通道',            dataIndex : 'channelNames',            renderer: 'renderValue',            flex : 2          },{            text : '可评价等级',            dataIndex : 'levelNames',            renderer: 'renderValue',            flex : 1          },{                     text : '最后更新时间',            dataIndex : 'lastUpdateDate',            xtype: 'datecolumn',            format:'Y-m-d',            renderer: function(value, meta, record) {                meta.tdAttr = 'data-qtip="' + Ext.Date.format(value,"Y-m-d") + '"';                return Ext.Date.format(value,"Y-m-d");            },            flex : 1          }],    dockedItems : [ {      xtype : 'pagingtoolbar',      dock : 'bottom',      prependButtons : true,      displayInfo : true,      bind : {        store : '{judgeList}'      }    } ]  }],  initComponent: function() {    this.items[1].selModel={      selType : 'checkboxmodel',      mode:this.memberSelModel?this.memberSelModel:"SIMPLE",      allowDeselect : true,       listeners : {      select : function(me,record,index,opts){        if(window.selectNames == undefined){        window.selectNames =[];              }      if(window.selectIds == undefined){      window.selectIds =[];      }      window.selectNames.push(record.data.judgeName);      window.selectIds.push(record.data.judgeCode);                Ext.getCmp('tag1').setValue(window.selectNames);            },      deselect : function(me,record,index,opts){       var deselectNames = window.selectNames;       var judgeName = record.data.judgeName;       var judgeCode = record.data.judgeCode;       var deselectIds = window.selectIds;              var deselectData = function(arr,val){       for(var i=0;i<arr.length;i++){       if(val == arr[i]){         arr.splice(i,1);         //清空数组         break;       }       }       }               deselectData(deselectNames,judgeName);       window.selectNames =[];       window.selectNames = deselectNames;       Ext.getCmp('tag1').setValue(window.selectNames);               deselectData(deselectIds,judgeCode);       window.selectIds = [];       window.selectIds = deselectIds;             }      }    };        this.callParent();    }});

给selmodel增加选中和取消事件，select : function(me,record,index,opts)，

deselect : function(me,record,index,opts)

定义一个textfield：

                xtype: 'textfield',
                id : 'tag1',
                name: 'name',
                width : 400,
                fieldLabel: '所选评委',
                allowBlank: true

这里需要定义一个全局变量用来存储选中的数据。

在EXT4.X以下的版本只需要用var selectNames = []就可以了，但是在Ext分模块后想要直接申明一个全局变量就不太容易了。

window.selectNames =[]；

将选中的数据放到全局变量中；

window.selectNames.push(record.data.judgeName);//这里只需要获取judgeName

Ext.getCmp('tag1').setValue(window.selectNames); //获取textfield组件并将值set进去

deselect事件，取消勾选时获取当前数据的judgeName然后从selectNames中删掉

var deselectData = function(arr,val){
      for(var i=0;i<arr.length;i++){
      if(val == arr[i]){
       arr.splice(i,1);
       //清空数组
       break;
      }
      }
      }

   deselectData(deselectNames,judgeName);
      window.selectNames =[]; //不清空会产生数据重复的问题
      window.selectNames = deselectNames;
      Ext.getCmp('tag1').setValue(window.selectNames);

效果图：