Question

我有一个基本的网格面板，它来自一个有600条记录的商店，但我的分页工具栏只显示第一页，无论商店中的pageSize配置如何。例如......

当pageSize = 50时，分页工具栏显示为：

Page 1 of 1 | Displaying 1 - 50 of 50

当pageSize = 100时，分页工具栏显示为：

Page 1 of 1 | Displaying 1 - 100 of 100

思考？来源如下。

employee_store.js

var empUrlRoot = 'http://extjsinaction.com/crud.php'
                    + '?model=Employee&method=';

//Instantiate employee store
var employeeStore = Ext.create('Ext.data.Store', {
    model: 'Employee',
    pageSize: 50,
    proxy: {
        type: 'jsonp',
        api: {
            create: empUrlRoot + 'CREATE',
            read: empUrlRoot + 'READ',
            udpate: empUrlRoot + 'UPDATE',
            destroy: empUrlRoot + 'DESTROY'
        },
        reader: {
            type: 'json',
            metaProperty: 'meta',
            root: 'data',
            idProperty: 'id',
            successProperty: 'meta.success'
        },
        writer: {
            type: 'json',
            encode: true,
            writeAllFields: true,
            root: 'data',
            allowSingle: true,
            batch: false,
            writeRecords: function(request, data){
                request.jsonData = data;
                return request;
            }
        }
    }
});

gridpanel.js

Ext.onReady(function(){

    // gridpanel column configurations
    var columns = [
        {
            xtype: 'templatecolumn',
            header: 'ID',
            dataIndex: 'id',
            sortable: true,
            width: 50,
            resizable: false,
            hidden: true,
            // template renders id column blue:
            tpl: '<span style="color: #0000FF;">{id}</span>'
        },
        {
            header: 'Last Name',
            dataIndex: 'lastName',
            sortable: true,
            hideable: false,
            width: 100
        },
        {
            header: 'First Name',
            dataIndex: 'firstName',
            sortable: true,
            hideable: false,
            width: 100
        },
        {
            header: 'Address',
            dataIndex: 'street',
            sortable: false,
            flex: 1,
            // template renders column with additional content:
            tpl: '{street}<br />{city} {state}, {zip}'
        }
    ];

    // Configure the gridpanel paging toolbar
    var pagingtoolbar = {
        xtype: 'pagingtoolbar',
        store: employeeStore,
        dock: 'bottom',
        displayInfo: true
    };

    // Create gridpanel
    var grid = Ext.create('Ext.grid.Panel', {
        xtype: 'grid',
        columns: columns,
        store: employeeStore,
        loadMask: true,
        selType: 'rowmodel',
        singleSelect: true,
        stripeRows: true,
        dockedItems: [
            pagingtoolbar
        ]
    });

    // Configure and create container for gridpanel
    Ext.create('Ext.Window', {
        height: 350,
        width: 550,
        border: false,
        layout: 'fit',
        items: grid //the gridpanel
    }).show();

    // Load the employeeStore
    employeeStore.load();

});

employee_model.js

// Define employee model
Ext.define('Employee', {
    extend: 'Ext.data.Model',
    idProperty: 'id',
    fields: [
    {name: 'id',type: 'int'},
    {name: 'departmentId', type: 'int' },
    {name:'dateHired', type:'date', format:'Y-m-d'},
    {name:'dateFired', type:'date', format:'Y-m-d'},
    {name:'dob', type:'date', format: 'Y-m-d'},
    'firstName',
    'lastName',
    'title',
    'street',
    'city',
    'state',
    'zip'
    ]
});

Answer 1

您必须返回总记录数。

reader: {
  root : 'data',
  totalProperty: 'total' // this is default, you can change it
}

接下来在服务器响应中需要：

{
    data : ['your data here'],
    total : 2000
}

Ext JS 4 - 分页工具栏仅显示第一页

1 个答案: