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

一.WCF部分 1.通过查看官方的示例得知，分页数据源需要一个记录总数值，为保持通用性，这里借鉴jillZhang的文章，把他写的通用类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>

转载请注明来自"菩提树下的杨过"