ExtJs学习笔记(6)_可分页的GridPanel

一.WCF部分
1.通过查看官方的示例得知，分页数据源需要一个记录总数值，为保持通用性，这里借鉴jillZhang的文章http://www.cnblogs.com/jillzhang/archive/2008/06/29/1232086.html，把他写的通用类PageData拿过来直接用

 1  using  System;
 2  using  System.Runtime.Serialization;
 3 
 4  namespace  Ajax_WCF
 5  {
 6      [DataContract]
 7       public   class  PageData < T >
 8      {
 9          [DataMember]
10           public   int  TotolRecord
11          {  get ;  set ;}
12 
13          [DataMember]
14           public  T Data
15          {  get ;  set ; }
16      }    
17  }

2.服务端的WCF方法:GetDataByPage

[OperationContract]
        [WebInvoke(Method  =   " * " , ResponseFormat  =  WebMessageFormat.Json,UriTemplate  =   " GetDataByPage?start={start}&limit={limit} " )]
         public  PageData < T_Class[] >  GetDataByPage( int  start,  int  limit)
        {            
            PageData < T_Class[] >  _Result  =   new  PageData < T_Class[] > ();
             using  (DBDataContext db  =   new  DBDataContext())
            {
                 try
                {
                    IQueryable < T_Class >  query  =  db.T_Classes;
                    _Result.TotolRecord  =  query.Count();
                    var query2  =  query.OrderBy(c  =>  c.F_RootID).ThenBy(c  =>  c.F_Orders).Select(c  =>   new  { F_ID  =  c.F_ID, F_ClassName  =  c.F_ClassName, F_ParentID  =  

c.F_ParentID, F_Orders  =  c.F_Orders, F_ReadMe  =  c.F_ReadMe }).Skip(start).Take(limit);
                    _Result.Data  =  db.ExecuteQuery < T_Class > (query2,  true ).ToArray < T_Class > ();
                }
                 catch  { }
                db.Connection.Close();
            }
             return  _Result;
        } 

这里讲一个小技巧，也是从jillZhang那里学过来的，以前默认在linq to sql(dbml)设计器里拖出来的类，默认生成的代码是不支持序列化的，我们只能手动添加[DataContract]和[DataMember]，

其实系统可以自动生成的，方法是在dbml的属性栏里设置"序列化模式"为"单向"，如下图:


二.静态页部分

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeBehind = " 04_Grid_Page.aspx.cs "  Inherits = " Ajax_WCF._4_Grid_Page "   %>
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head  runat ="server" >
     < meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8" />     
     < link  rel ="stylesheet"  type ="text/css"  href ="js/ext2.2/resources/css/ext-all.css"   />  
      < script  type ="text/javascript"  src ="js/ext2.2/adapter/ext/ext-base.js" ></ script >     
     < script  type ="text/javascript"  src ="js/ext2.2/ext-all.js" ></ script >
     < title ></ title >
</ head >
< body >
< script  type ="text/javascript" >
    Ext.onReady( function () {
         var  proxy  =   new  Ext.data.HttpProxy({
            url:  ' MyService.svc/GetDataByPage ' ,
            method:  ' GET '
        });

         var  reader  =   new  Ext.data.JsonReader(
        { root:  ' Data ' , totalProperty:  ' TotolRecord '  },
            [
                { name:  ' F_ID '  },
                { name:  ' F_ClassName '  },
                { name:  ' F_ParentID '  },
                { name:  ' F_Orders '  },
                { name:  ' F_ReadMe '  }
            ]
        );

         var  store  =   new  Ext.data.Store(
            { proxy: proxy, reader: reader }
        );

         //  create the Grid 
         var  grid  =   new  Ext.grid.GridPanel({
            store: store,
            columns: [
                 new  Ext.grid.RowNumberer(),
                { id:  ' F_ID ' , header:  " 分类ID " , width:  30 , sortable:  true , dataIndex:  ' F_ID '  },
                { header:  " 分类名称 " , width:  75 , sortable:  true , dataIndex:  ' F_ClassName '  },
                { header:  " 父类ID " , width:  75 , sortable:  true , dataIndex:  ' F_ParentID '  },
                { header:  " 排序号 " , width:  75 , sortable:  true , dataIndex:  ' F_Orders '  },
                { header:  " 备注 " , width:  50 , sortable:  true , dataIndex:  ' F_ReadMe '  }
            ],
            stripeRows:  true ,
            autoExpandColumn:  ' F_ID ' ,
            height:  393 ,
            width:  600 ,
            title:  ' 产品信息 ' ,
            viewConfig:
            {
                columnsText:  ' 列 ' ,
                sortAscText:  ' 升序 ' ,
                sortDescText:  ' 降序 '
            },
            bbar:  new  Ext.PagingToolbar({
                pageSize:  15 , // 每页显示的记录值
                store: store,
                displayInfo:  true ,
                displayMsg:  ' 总记录数 {0} - {1} of {2} ' ,
                emptyMsg:  " 没有记录 "
            })
        });

        grid.render( ' page-grid ' );        
        store.load({ params: { start:  0 , limit:  15 } });
        grid.getSelectionModel().selectFirstRow();
    });
</ script >
< div  id ="page-grid" ></ div >
</ body >
</ html >

转载请注明来自"菩提树下的杨过" http://www.cnblogs.com/yjmyzz/archive/2008/08/30/1280282.html