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

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

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

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

一、前台HTML代码：

< div  id ="MyPageGrid" > div >   

二、前台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();                

            }

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