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
posted @ 2008-08-30 20:17  菩提树下的杨过  阅读(10413)  评论(2)  编辑  收藏  举报