Ext-js 4.2.1... Grid 分页调用action

Grid要实现分页,首先要向后台action传值,Ext 分页时主要向后台传值有3个:limit,page和start,

limit:每页显示记录条数;page:第几页(从1开始);start:每页第一条记录的序号(从0开始,例如:第一页的第一条记录序号为0)。

首先定义一个Model类

1
2
3
4
5
6
7
8
9
Ext.onReady(function(){
           Ext.define(‘Student‘, {
               extend: ‘Ext.data.Model‘,
               fields: [
                   {name: ‘id‘,type: ‘int‘},
                   {name: ‘username‘, type: ‘string‘},
                   {name: ‘age‘, type: ‘string‘}
                ]
           });

 定义并实例化一个Store类,调用后台action取数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var getLocalStore = Ext.create(‘Ext.data.ArrayStore‘, {
                    model: ‘Student‘,
                    pageSize: 10,
                    autoLoad: {start: 0, limit: 10},
                    proxy : { 
                        type : ‘ajax‘
                        url : ‘list.action‘,//获取数据的url 
                        method : ‘POST‘
                        reader : { 
                            type : ‘json‘
                            root : ‘datas‘,
                            totalProperty : ‘total‘
                        
                    }
                });

 注意:reader : { 
                    type : ‘json‘, 
                    root : ‘datas‘,
                    totalProperty : ‘total‘
                } 

其中 type:‘json‘表示从后台取到的数据类型为json类型的;root:‘datas‘表示表单中具体要现实的记录(字符串表示的值要与action中List相对应);totalProperty:‘total‘表示总的记录数。

然后就是创建Grid

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var grid = Ext.create(‘Ext.grid.Panel‘, {
                store: getLocalStore,
                columns: [
                    Ext.create(‘Ext.grid.RowNumberer‘),
                    {text: "ID", flex: 1, sortable: true, dataIndex: ‘id‘},
                    {text: "Name", width: 200, sortable: true, dataIndex: ‘username‘},
                    {text: "Age", width: 200, sortable: true, dataIndex: ‘age‘}
                ],
                columnLines: true,
                width:600,
                height:300,
                selType: ‘checkboxmodel‘,
                frame: true,
                title:‘Grid with Numbered Rows‘,
                iconCls:‘icon-grid‘,
                margin: ‘0 0 20 0‘,
                dockedItems: [{
                         xtype: ‘pagingtoolbar‘,
                         store: getLocalStore,  
                         dock: ‘bottom‘,
                         displayInfo: true
                 }],
                renderTo: Ext.getBody()
           });

 Ext.create(‘Ext.grid.RowNumberer‘)显示行号。

注意:这里需要两次使用到getLocalStore,也就是上面的Store类。

分页部分dockedItems: [{
             xtype: ‘pagingtoolbar‘,
             store: getLocalStore,  
             dock: ‘bottom‘,
             displayInfo: true
     }],也要使用。

Ext-js 4.2.1... Grid 分页调用action

上一篇:有没有手机端和PC端可以随时同步的便签写作软件?


下一篇:超市订单管理系统SMBMS - ajax验证旧密码功能实现