扩展GridPanel,附带分页选中状态，实现快速构建一个功能齐全的Grid-优快云博客

本文介绍了一个基于 ExtJS 的自定义表格组件 CollectGrid，该组件简化了表格配置过程，并支持分页时保持前一页的选择状态。通过设置不同的选项如 store、columns、selModel 和 pagingToolbar，可以轻松实现复杂的数据展示需求。
使用简单的配置就可以实现　store, columns, selModel , pagingToolbar ,

最重要的一点是实现分页时可以保持前一页的选中状态，
　但是要遵守其中的一些规定，至于哪些规定呢，看下面的代码就知道啦！
　代码如下：
    Java代码  
     
   
/* 
 * @class Ext.ux.grid.CollectGrid 
 * @version: 1.0 
 * @author: chengbao_zhu 
 * 
 * Example : Ext.onReady(function(){     
              var CM_JR_Record = [ 
              { 
                 dataIndex:"", //the ColumnModel options alse the JsonReader mapping (required) 
                 header:"",    //the ColumnModel options (required)  
                 visiable: false, //my expands option to show the header or not (options) 
                 type: date,   //the type of this data (options) 
                 ...another options of ColumnModel 
              },{    
                 dataIndex : '',    
                 header : "",    
                 width : 130    
              }];  
              
              var myGrid = new Ext.ux.grid.CollectGrid({ 
                  url : 'MyJsp.jsp',          // the store load url (required) 
                  CM_JR_Record: CM_JR_Record, //.....(required) 
                  rowNumber:true,             //true to add a Ext.grid.RowNumberer,defalut(true) 
                  checkBox:true,              //true to add a Ext.grid.CheckBoxSelectionModel,default(true) 
                  pagingBar:true,             //true to add a Ext.PagingToolBar,default(true) 
                  pagingConfig:objcet,        //config pagingToolBar if pagingBar is true 
                  keepSelectedOnPaging: true, //true to FireEvent when you paging to keep the state of record selected 
                  recordIds : new Array() ,   // store seleced ids when keepSelectedOnPaging is true 
                  idColName :'stat_id',       //the id column name 
                   
                  ...another 
                  width : 700,  
                  height: 600,  
                   
                  title : 'This is My Grid'  , 
                  renderTo: 'my_grid' 
              }); 
               
              myGrid.store.load({params:{start:0,limit:myGrid.pagingConfig.pageSize}}); 
              //myUxGrid.render(); 
              myGrid.on('rowclick',function(grid,rowIndex,e){ 
                alert(grid.getStore().getAt(rowIndex).data['stat_id']); 
              } 
              ); 
         } 
         ); 
 */  
  
   
Ext.namespace('Ext.ux.grid');  
  
Ext.ux.grid.CollectGrid = Ext.extend(Ext.grid.GridPanel,{  
      
    /* 
     * true to keep the records selected when you paging 
     * @default(false) 
     * @type: boolean 
     */  
    keepSelectedOnPaging: false,  
      
    /* 
     * the array to store the record id 
     * @type: array 
     */  
    recordIds:new Array(),  
      
    /* 
     * set your id Column Name 
     * @default : this.CM_JR_Record[0].dataIndex 
     */  
    idColName:'',  
      
    /* 
     * set this.store.load url; 
     * @type: string 
     */  
    url: '',  
      
    /* 
     * show the rowNumber or not 
     * @type: boolean 
     * @default: true 
     */  
    rowNumber : true,  
      
    /* 
     * set the grid sm,if checkBoxSelection=true,sm=CheckBoxSelectionModel 
     * else sm=RowSelectionModel,default to true; 
     * @type: boolean 
     */  
    checkBox: true,  
      
    /* 
     * set the grid cm array; 
     * set the JsonReader record; 
     *  
     * format: [{name:'',header:'',visiable:'',...another cm options},{}], 
     * @name=dataIndex 
     * @visiable: set this record to the cm(grid header) default(true) 
     * @type: array (records) 
     */   
    CM_JR_Record: null,  
      
    /* 
     * true to add a bottom paging bar 
     * @defalut: true 
     * @type: boolean 
     */  
    pagingBar: true,  
      
    /* 
     * config paging bar if pagingBar set true 
     * @type: object 
     * @default: {pageSize: 20,store: this.store,displayInfo: true, 
     *            displayMsg: '当前记录数: {0} - {1} 总记录数: {2}', 
     *            emptyMsg: '<b>0</b> 条记录'} 
     */  
    pagingConfig:{  
        pageSize: 20,  
        //store: this.store,  
        displayInfo: true,  
        displayMsg: '当前记录数: {0} - {1} 总记录数: {2}',  
        emptyMsg: '<b>0</b> 条记录'  
    },  
      
    viewConfig:{  
        forceFit: true  
    },  
      
    //private  
    initComponent: function(){  
        if(this.CM_JR_Record){  
            this.init_SM_CM_DS();  
        }  
        if(this.pagingBar){  
            this.init_PagingBar();  
        }  
        if(this.keepSelectedOnPaging){  
            this.init_OnPaging();  
        }  
        Ext.ux.grid.CollectGrid.superclass.initComponent.call(this);  
    },  
      
    /* 
     * init the grid use the config options 
     * @return: void 
     * @params: none 
     */  
    init_SM_CM_DS: function(){  
        var gCm = new Array();  
        var gRecord = new Array();  
          
        if(this.rowNumber){  
            gCm[gCm.length]=new Ext.grid.RowNumberer();  
        }  
        if(this.checkBox){  
            var sm = new Ext.grid.CheckboxSelectionModel();  
            gCm[gCm.length] = sm;  
            this.selModel = sm;  
        }  
          
        for(var i=0;i<this.CM_JR_Record.length;i++)  
        {  
            var g = this.CM_JR_Record[i];  
            if(g.visiable || g.visiable=='undefined' || g.visiable==null){  
                gCm[gCm.length] = g;  
            }  
              
            gRecord[gRecord.length]={  
                name: g.dataIndex,  
                type: g.type || 'string'   
            }  
        }  
      
        //create grid columnModel  
        this.cm = new Ext.grid.ColumnModel(gCm);  
        this.cm.defaultSortable = true;  
          
        //create a jsonStore  
        this.store = new Ext.data.Store({  
          
            proxy: new Ext.data.HttpProxy({  
                url: this.url,  
                method: 'post'  
            }),  
            reader:new Ext.data.JsonReader({  
                totalProperty: 'totalProperty',  
                root: 'root'  
            },  
            Ext.data.Record.create(gRecord)  
            )  
          
        });  
          
          
        this.pagingConfig.store = this.store;  
          
        if(this.pagingBar){  
            this.store.load({params:{start:0,limit:this.pagingConfig.pageSize}});  
        }else{  
            this.store.load();  
        }  
          
    },  
      
    /* 
     * 创建并初始化paging bar 
     */  
    init_PagingBar: function(){  
        var bbar = new Ext.PagingToolbar(this.pagingConfig);  
        this.bbar = bbar;  
    },  
      
    init_OnPaging: function(){  
          
        this.idColName = this.CM_JR_Record[0].dataIndex ;//默认第一列为ID列  
          
        this.selModel.on('rowdeselect',function(selMdl,rowIndex,rec ){  
          
              
                for(var i=0;i<this.recordIds.length;i++)  
                {  
                    if(rec.data[this.idColName] == this.recordIds[i]){  
                        this.recordIds.splice(i,1);                       
                        return;  
                    }  
                }  
              
               
       },this);  
         
       this.selModel.on('rowselect',function(selMdl,rowIndex,rec){  
            if(this.hasElement(this.recordIds)){  
                for(var i=0;i<this.recordIds.length;i++){  
                    if(rec.data[this.idColName] == this.recordIds[i]){  
                        return;  
                    }  
                }  
            }     
              
            this.recordIds.unshift(rec.data[this.idColName]);  
              
       },this);  
         
       this.store.on('load',function(st,recs){  
            if(this.hasElement(this.recordIds)){  
                st.each(function(rec){  
                    Ext.each(this.recordIds,function(item,index,allItems){  
                        if(rec.data[this.idColName] == item){  
                            this.selModel.selectRecords([rec],true);                          
                            return false;  
                        }  
                    },this);  
                },this);      
            }     
       },this);  
               
    },  
      
    hasElement : function(recIds){  
        if(recIds.length > 0)  
            return true;  
        else  
            return false;  
    }  
      
}  
)  