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

浏览数：22 / 时间：2015年06月09日

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

limit：每页显示记录条数；page:第几页（从1开始）；start：每页第一条记录的序号（从0开始，例如：第一页的第一条记录序号为0）。

首先定义一个Model类：

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取数据

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

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