Ext疑难解决思路和实现方案

业务图例

 

业务要求：

1.将分页选中的数据全部显示在选中列表中

2.点击结果列表选择框触发选中和取消事件来向选中列表中增加或移除某一列(支持全部选中和全部取消)

3.点击选中列表的移除图标,该列从选中列表中移除,且结果列表该相同数据的选择框取消

4.跳到第一页,结果列表在选中列表存在的数据默认被选中

解决思路：

1.点击结果列表选择框触发选中和取消事件来向选中列表中增加或移除某一列(支持全部选中和全部取消)

selModel:  Ext.create('Ext.selection.CheckboxModel', {
 injectCheckbox:0,//checkbox位于哪一列，默认值为0
 mode:'multi',//multi,simple,single；默认为多选multi
 checkOnly:true,//如果值为true，则只用点击checkbox列才能选中此条记录
 allowDeselect:true,//如果值true，并且mode值为单选（single）时，可以通过点击checkbox取消对其的选择
 enableKeyNav:false,
 listeners: {
  select: function(model,record,index) {//record被选中时产生的事件
   alert("选中事件。。。");
  },
  deselect: function(model,record,index) {//取消选中时产生的事件
   alert("取消选中事件。。。");
  },
  selectionchange: function(model,selected) {//选择有改变时产生的事件
   alert("选择有改变事件。。。");
  }
 }
}),
//selType:"checkboxmodel",  //设置选择模式，设置成多选框的模式
multiSelect:true,   //设置成多选

2.点击选中列表的移除图标,该列从选中列表中移除,且结果列表该相同数据的选择框取消

var grids = me.registerItems.resultListGrid;
      grids.store.on("load",function(store) {
      var store = Ext.getCmp("duplicateGridId").getStore();
      Ext.Array.each(store.getRange(),function(record){
        if(array.indexOf(record.data.customerCode)!=-1){
         grids.getSelectionModel().select(store.indexOf(record.data),true);
        }
      });
},grids);

3.跳到第一页,结果列表在选中列表存在的数据默认被选中

  { text : '移除', resizable : false, sortable : false, align:'center', width:60,
         renderer:function(value,metadata,model,rows){  
           return '<a onclick="javascript:removerow('+model.data.customerCode+','+rows+');" style="text-decoration:none;"><img  data-qtip="移除" src="img/btn/delete.png" alt="移除"></a>';  
         }
}

function removerow(value,rows){
 debugger;
 Ext.getCmp("duplicateGridIdT").getStore().removeAt(rows);
 array.remove(value); 
 var stores = Ext.getCmp("duplicateGridId").getStore();
 Ext.Array.each(stores.getRange(),function(record){
  if(record.data.customerCode==value){
   Ext.getCmp("duplicateGridId").getSelectionModel().deselect(stores.indexOf(record.data));
  }
 });
}

 实现方案