写一篇完整的Extjs Grid的简易翻页

转载并修改上一篇学习EXT第五日--Grid组件的简易分页，可能有的人还是会在实现的时候遇到一些问题。现在我自己写了一篇关于Extjs Gird简易翻页的完整实现代码。希望对那些在实现中任很困惑的人能起到帮助作用。

这次代码在.net 2003 + sql server 2000 环境下实现的，没有使用json类、存储过程，只是纯粹的数据字符串拼接后在前台显示。

下面，是所有的代码和讲解。

一、前台HTML代码：

<divid="MyPageGrid"></div><!--首先在页面的BODY里面载入自己的div，用于显示ExtjsGrid-->

二、前台JS代码：

1、在head里面加入

<LINKhref="Js/resources/css/ext-all.css"type="text/css"rel="stylesheet">
<scriptlanguage="javascript"src="Js/adapter/ext/ext-base.js"></script>
<scriptlanguage="javascript"src="Js/ext-all.js"></script>

2、JS：

Ext.onReady(function(){
vards=newExt.data.Store({
proxy:newExt.data.HttpProxy({url:'ExtjsGridPage.aspx'}),
reader:newExt.data.JsonReader({
root:'root',
totalProperty:'totalCount',
id:'OrderID'
},[
{name:'OrderID',mapping:'OrderID'},
{name:'CustomerID',mapping:'CustomerID'},
{name:'OrderDate',mapping:'OrderDate',type:'date',dateFormat:'Y-m-d'},
{name:'Freight',mapping:'Freight'},
{name:'ShipRegion',mapping:'ShipRegion'}
]),
remoteSort:true
});



varcolModel=newExt.grid.ColumnModel([
{id:'OrderID',header:'OrderID',sortable:true,dataIndex:'OrderID'},
{header:'CustomerID',sortable:true,dataIndex:'CustomerID'},
{header:'OrderDate',sortable:true,renderer:Ext.util.Format.dateRenderer('Y-m-d'),dataIndex:'OrderDate'},
{header:'Freight',sortable:true,dataIndex:'Freight'},
{header:'ShipRegion',sortable:true,dataIndex:'ShipRegion'}
]);

vargrid=newExt.grid.GridPanel({
el:'MyPageGrid',
store:ds,
cm:colModel,
autoExpandColumn:'OrderID',
renderTo:document.body,
height:350,
width:600,
title:'ArrayGrid',
loadMask:{msg:'正在加载数据，请稍侯……'},
bbar:newExt.PagingToolbar({
pageSize:20,
store:ds,
displayInfo:true,
displayMsg:'当前显示{0}-{1}条记录/共{2}条记录',
emptyMsg:"无显示数据"
})
});
grid.render();
ds.load({params:{start:0,limit:20}});
});

三、后台CS代码：在page_load中

if(Request.Form["start"]!=null&&Request.Form["limit"]!=null)
{
intstart=int.Parse(Request.Form["start"]);//获取页面显示的起始数
intlimit=int.Parse(Request.Form["limit"]);//获取每页记录数

SqlConnectionconn=newSqlConnection("server=.;InitialCatalog=northwind;Userid=sa;Password=");//以本机的northwind..orders为例
conn.Open();

SqlCommandcmd=newSqlCommand("selectOrderID,CustomerID,OrderDate,Freight,ShipRegionfromorders",conn);
DataSetds=newDataSet();

SqlDataAdapterda=newSqlDataAdapter(cmd);
da.Fill(ds);

StringBuildersb=newStringBuilder();
sb.Append("[");

intpageCount=ds.Tables[0].Rows.Count;//共有页数
for(inti=start;i<start+limit;i++)
{
stringsShipRegion=ds.Tables[0].Rows[i].IsNull("ShipRegion")?"null":ds.Tables[0].Rows[i]["ShipRegion"].ToString();
sb.Append("{OrderID:'"+ds.Tables[0].Rows[i]["OrderID"].ToString()+"',CustomerID:'"+ds.Tables[0].Rows[i]["CustomerID"].ToString()+"',OrderDate:'"+Convert.ToDateTime(ds.Tables[0].Rows[i]["OrderDate"]).ToString("yyyy-MM-dd")+"',Freight:'"+ds.Tables[0].Rows[i]["Freight"].ToString()+"',ShipRegion:'"+sShipRegion+"'}");

if(i!=(start+limit-1))
{
sb.Append(",");
}
}
sb.Append("]");//字符串的拼接

stringTemp="{totalCount:"+pageCount+",root:"+sb.ToString()+"}";

Response.Write(Temp);
Response.End();

}

在这里需要注意到是：在显示日期的时候，前台和后台的日期的日期格式必须一致，否则不能正常显示。