ExtJS之Grid表格带分页

Ext.onReady(function(){
	var sm=new Ext.grid.CheckboxSelectionModel( );
	//列模式，好比数据库表一般，
	var cm = new Ext.grid.ColumnModel([
		new Ext.grid.RowNumberer(),
		//sm,
		{header:'学号',dataIndex:'id',id:'id',sortable:true,renderer:function(value){
			if(value%2==0){
				return "<span style='color:red'>"+value+"</span>";
			}else{
				return "<span style='color:green'>"+value+"</span>";
			}
		}},
		{header:'姓名',dataIndex:'name'}
	]);
	//本地测试数据集；
	var data = [
		['1','彬彬1'],
		['2','彬彬2'],
		['3','彬彬3'],
		['4','彬彬4']
	]; 
	
	//store 可以将数据集转化成任何grid可用形式
	//proxy 属性告诉我们从哪里获得数据
	var ds = new Ext.data.Store({
		
		// proxy:new Ext.data.MemoryProxy{data},
		proxy:new Ext.data.HttpProxy({url:'gridpage.jsp'}),//专门用来解析js变量
		reader:new Ext.data.JsonReader({totalProperty:'totalProperty',root:'root'},[ //用于数组的解析
			//在下面数据中加多一个mapping属性可以改变列显示位置
			{name:'id'},
			{name:'name'}
		]),
		sortInfo:{field:'name',direction:'ASC'}
	});
	
	var grid = new Ext.grid.GridPanel({
		el:'mm',
		ds:ds,
		cm:cm,
		width:600,
		
		bbar: new Ext.PagingToolbar({
			pageSize:10,
			store:ds,
			displayInfo:true,
			displayMsg:'显示第{0}条到{1}条记录共{2}条',
			emptyMsg:'没有记录'
		}),
		frame:true,
		viewConfig:{
			forceFit:true
		},
		sm:sm
	});
	grid.render();
	ds.load({params:{start:0,limit:10}});
	
});

  上：grid.js文件；

 下：gridpage.jsp：

 <%
  		String start = request.getParameter("start");
  		String limit = request.getParameter("limit");
  		try{
  			int index = Integer.parseInt(start);
  			int pageSize = Integer.parseInt(limit);
  			String json = "{totalProperty:100,root:[";
  			for(int i = index;i<pageSize+index;i++){
  				json+="{id:"+i+",name:'name"+i+"'}";
  				if(i!=pageSize+index-1){
  					json+=",";
  				}
  			}
  			json+="]}";
 			response.getWriter().write(json); 
  		}catch(Exception ex){
  		}
   %>

 因为ds.load()无法在grid.render()前准备好所有数组，所以它不知道自己应该实现高，没法子，只好为它指定一个固定的高度了，像这样<div id="mm" style="height:500px;"></div>

 

renderer属性的值是一个function，会传递个参数进去,而我们在grid看到的是这个函数的返回值，返回html就可以，返回什么就可以显示什么--颜色，链接，图片，按钮。