extjs grid 分页

在使用extjs创建带分页功能的 grid 如下：

１.创建一个模型

        // 　创建算定义模型　模型名称 User
        Ext.define('User', {
            extend: 'Ext.data.Model',
            fields: ['name', 'email', 'phone', 'birthDate']　// 加载指定的数据字段
        });

 ２.　创建store 来存储模型，其中　myPageSize 是默认的页面初始大小，设定为　10

// 创建　store
        var userStore = Ext.create('Ext.data.Store', {
            model: 'User',  // 使用自定义模型
            //fields: ['name', 'email', 'phone','birthDate'], // 添加此字段时，可删除 model 字段
            autoLoad: false,
            //id:'UserStoreID',
            pageSize: myPageSize,
            proxy: {　　 // proxy 字段从后台获取数据
                type: 'ajax',
                url: '/home/GetData',
                reader: {
                    type: 'json',
                    root: 'data',
                    totalProperty: 'totalCount',
                }
            }
        });

 

3. 创建分页控件方法一：

 

            /* 在grid 底部添加分页控件，将组件添加到该面板中的组件或一系列组件。所停靠的项目可以停靠在面板的顶部、右边、左边或底部。这通常是用于像工具栏和标签栏： */
            dockedItems: [ 　　         
　　　　　　{
                xtype: 'pagingtoolbar',
                store: userStore,   //和　GridPanel 使用的　store 是相同的
                dock: 'bottom',
                displayInfo: true,
                displayMsg: '显示第{0}条数据到{1}条数据,一共有{2}条',
                emptyMsg: "没有记录"
            }
           ]

 　分页控件方法二：

　

   bbar: new Ext.PagingToolbar({       //定义翻页控件
                pageSize:myPageSize,           // 参数1：每页显示数
                store: userStore,      // 数据源---非常重要
                displayInfo:true,
                displayMsg:'显示第{0}条数据到{1}条数据,一共有{2}条',
                emptyMsg:'没有记录'
            }),

 在后台接收的方法具体代码如下（以下是　Ｃ#　mvc 控制器代码）

 public JSONHelper GetData()
        {

            List<Users> myList = new List<Users>();
            JSONHelper json = new JSONHelper();
            json.success = true;
            json.totlalCount = 50;
            int num = 10;　　// 模拟生产记录数

            // post 请求
            //var pageSize = Request.Form["start"];
            //var pageIndex = Request.Form["limit"];

            // get 请求获取　前端发送到服务器的　页面号，页面大小
            var pageIndex = Request.Params["start"]; // 当前请求页面号
            var pageSize = Request.Params["limit"];　// 页面大小

            // 读取数据
            var model = userService.GetData(pageIndex, pageSize, null);
            if (model != null)
            {
                foreach(var m in model)
                {
                    json.AddItem("name", m.Name);
                    json.AddItem("phone", m.Phone);
                    json.AddItem("email", m.Email);
                    json.AddItem("birthDate", m.BirthDate);
                    json.ItemOk();
                }
            }
            return json;
        }

 注意：　后台返回的格式一定是 json 格式，返回的　json 格式如下：

var userData = {
    "success": true,
    "totalCount": 12,
    "users": [
        { "name": "Lisa", "email": "aa@aa.com", "phone": "111111111",birthdate:'1991-02-01' },
        { "name": "Bart", "email": "bb@bb.com", "phone": "222222",birthdate:'1991-02-02' },
    ]
};