扩展GridPanel,附带分页选中状态，实现快速构建一个功能齐全的Grid
使用简单的配置就可以实现 store, columns, selModel , pagingToolbar ,
最重要的一点是实现分页时可以保持前一页的选中状态，
但是要遵守其中的一些规定，至于哪些规定呢，看下面的代码就知道啦！
代码如下：
最重要的一点是实现分页时可以保持前一页的选中状态，
但是要遵守其中的一些规定，至于哪些规定呢，看下面的代码就知道啦！
代码如下：
/*
* @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;
}
}
)