一个扩展的 GridPanel

分页后可保存checkbox的选择状态。

/**

 * 封装的grid

 * 功能:分页后仍保持选中状态

 * 约定:root为list, totalProperty为total, grid的第一列必须为id

 */

Ext.namespace('Ext.ux.grid');



Ext.ux.grid.MyGrid = 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: 15,

	   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.MyGrid.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: 'total',

				root: 'list'

			},

			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;

	}

	

}

)<SPAN style="FONT-FAMILY: Arial,Verdana,Sans-Serif">

//**************************这是个demo</SPAN>*****************
<SPAN style="FONT-FAMILY: Arial,Verdana,Sans-Serif"><PRE class=jscript name="code">var CM_JR_Record = [ 

               { 

                  dataIndex:"id", 

                  visiable: false//不显示，反之为显示

               },{ 

                  dataIndex:"accid",

                  header:"发布人ID",

                  visiable: true

               },{

			        header: '标题',

			        width: 80,

			        dataIndex: 'bt',

                    visiable: true

			    }, {

			        header: '发布时间',

			        width: 80,

			        dataIndex: 'fbsj',

                    visiable: true

			    }, {

			        header: '发布人员',

			        width: 80,

			        dataIndex: 'fbry',

                    visiable: true

			    }, {

			        header: '审核',

			        width: 80,

			        dataIndex: 'sh',

                    visiable: true

			    }, {

			        header: '审核人员',

			        width: 80,

			        dataIndex: 'shry',

                  visiable: true

			    }, {

			        header: '审核时间',

			        width: 80,

			        dataIndex: 'shsj',

                    visiable: true

			    }, {

			        header: '点击数',

			        width: 80,

			        dataIndex: 'snum',

                    visiable: true

			    }];

	

	 var myGrid = new Ext.ux.grid.MyGrid({

		      url : '/ecommerce/findAllBulletin.action',          // 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 :'id',       //the id column name

		      width : 700, 

		      height: 600, 

		      renderTo: 'editor-grid',

			  tbar: [{

		          id : 'Add',

		          text : ' 新建  ',

		          tooltip : '新建一个表单',

		          iconCls : 'add',

				  pageSize: 15,

		          handler : function(){

		                 ptb_bt1();

		          }

		        },{

		            text: '删除所选',

					iconCls:'remove',

					tooltip : '删除所选数据',

		            handler : function(){

                                               //myGrid.recordIds是一个数组，里面存放选中的checkboxid

						if(myGrid.recordIds.length == 0){

		               		Ext.MessageBox.alert('提示','请选择一条记录！');

		            	}else{

							// 弹出对话框警告

							Ext.MessageBox.confirm('确认删除', 

				    	    	'你真的要删除所选用户吗?', 

				    	    	function(btn){

					    	     if(btn == 'yes') {// 选中了是按钮

					    	     	 // 调用 DWR, 执行结果成功时方删除所有数据

						    	     bulletinService.delBulletin(myGrid.recordIds.toString(), function() {

						    	     		// 更新界面, 来真正删除数据

									 		Ext.Msg.alert("成功","用户数据删除成功!");

											myGrid.recordIds = new Array();

											myGrid.store.load({params:{start:0,limit:15}});

									 });

								 }

								}

							);

						}  

	            }

        }]

		});

	

	myGrid.render();</PRE>
下载地址如下<A>http://download.csdn.net/source/521174</A></SPAN>