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

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

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

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

一、前台HTML代码：

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

二、前台JS代码：

1、在head里面加入

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

2、JS：

Ext.onReady(function(){
var ds = new Ext.data.Store({
proxy : new Ext.data.HttpProxy( {url:'ExtjsGridPage.aspx'} ),
reader : new Ext.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
});

var colModel = new Ext.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'}
]);

var grid = new Ext.grid.GridPanel({
el:'MyPageGrid',
store: ds,
cm: colModel,
autoExpandColumn: 'OrderID',
renderTo: document.body,
height:350,
width:600,
title:'Array Grid',
loadMask: {msg:'正在加载数据，请稍侯……'},
bbar: new Ext.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 )
{
int start = int.Parse( Request.Form["start"] ); //获取页面显示的起始数
int limit = int.Parse( Request.Form["limit"] ); //获取每页记录数

SqlConnection conn = new SqlConnection("server=.;Initial Catalog=northwind;User id = sa;Password=");//以本机的northwind..orders为例
conn.Open();

SqlCommand cmd = new SqlCommand ("select OrderID,CustomerID,OrderDate,Freight,ShipRegion from orders",conn);
DataSet ds = new DataSet ();

SqlDataAdapter da = new SqlDataAdapter ( cmd );
da.Fill( ds );

StringBuilder sb = new StringBuilder ();
sb.Append("[");

int pageCount = ds.Tables[0].Rows.Count; //共有页数
for( int i=start ; i < start+limit ;i++ )
{
string sShipRegion = 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("]"); //字符串的拼接

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

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

}

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