MyGridPanel

//============下面是MyGridPanel.jsp===============

Ext.onReady(function (){
  		var _checkboxs = new Ext.grid.CheckboxSelectionModel({});
  		var _rowNumber = new Ext.grid.RowNumberer();
  		var _columns = [_rowNumber , _checkboxs ,
  			{header:'id' , dataIndex:'id' , sortable:true , align:'center'},//sortable这个是设置允许排序
  			{header:'userName' , dataIndex:'userName' , sortable:true , align:'center'},
  			{header:'password' , dataIndex:'password' , sortable:true , align:'center'},
  			{header:'age' , dataIndex:'age' , sortable:true , align:'center'},
  			{header:'sex' , dataIndex:'sex' , sortable:true , align:'center'},
  			{header:'remark' , dataIndex:'remark' , sortable:true , align:'center'}
  		];
  		var config = {
  			sm:_checkboxs,
  			columns:_columns,
  			url:'<%=basePath%>/com.lxitedu.ibattis.action/queryUser'
  		}
  		
  		var myGridPanel = new MyGridPanel({},config);
         

//===========其实把gridpanel放在window窗口中会更好看===============
 var window = new Ext.Window({
  			title:'Window',
  			width:660,
  			height:300,
  			frame:true,
  			renderTo:Ext.getBody(),
  			items:[myGridPanel]
  		});
  		window.show();

 });
 //============下面是MyGridPanel.js,通用版的===============

	function MyGridPanel(view , config){
		Ext.apply(this , view);//继承Ext
		this.init(config);
		MyGridPanel.superclass.constructor.call(this,{//使用继承的关系把GridPanel的构造体给MyGridPanel
			height:200,
			//autoWidth:true,
			width:'450',
			id:'grid',
			renderTo:Ext.getBody()//把面板渲染到那个位置
		});
	}
	
	Ext.extend(MyGridPanel , Ext.grid.GridPanel,{//第一个参数是子类,第二个是要继承的父类,第三个是重写的一些属性
		init : function(config){//
			var tempArray = [];//一个用来存储数据的数组
			var element = config.columns;//拿到字段信息的头信息
			for(var i = 0 ; i < element.length ; i++ ){
				if(element[i].dataIndex != '' && element[i].dataIndex != null){
					tempArray.push({name:element[i].dataIndex});//把要显示的字段信息解析并封装成一个数组
				}
			}
			var store = new Ext.data.Store({
				url:config.url,//请求后台的路径
				method:'POST',//提交的方式
				baseParams:{limit:5 , start:0},//设置分页的个数
				reader:new Ext.data.JsonReader(
					{
						root:'result',//数据的结果集
						totalProperty:'totleCount'//数据的总数量
					},
					Ext.data.Record.create(tempArray)//通过传入的数组把数据遍历显示在页面
				),
				autoLoad:true //这个是设置框中内容是否显示默认为true
			});
			this.columns = config.columns;//字段信息
			this.sm =config.sm;//这个是checkbox的多选框
			this.store = store;//
			this.loadMask = true,//当页面没有加载完之前锁定页面
			//显示在窗口下面的分页按钮及信息
			this.bbar = new Ext.PagingToolbar({store:store,pageSize:5,displayInfo:true,displayMsg:'显示第{0}条到{1}条记录，一共{2}条'});
		}
	});