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

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

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

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--> 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 TData
15 { get ; set ;}
16 }
17 }

2.服务端的WCF方法:GetDataByPage

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--> [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 (DBDataContextdb = new DBDataContext())
{
try
{
IQueryable < T_Class > query = db.T_Classes;
_Result.TotolRecord = query.Count();
varquery2 = 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的属性栏里设置"序列化模式"为"单向"，如下图:


二.静态页部分

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--> <% @PageLanguage = " C# " AutoEventWireup = " true " CodeBehind = " 04_Grid_Page.aspx.cs " Inherits = " Ajax_WCF._4_Grid_Page " %>
<! DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//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}
);

// createtheGrid
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

欢迎加入：http://www.itpob.cn/bbs