分页现在显示extjs 4.1网格分页中的总数

Question

我在某些或我的网格上注意到'displayMsg'没有显示。即右下角的文字。

如果你看下面的屏幕截图，我已经设置了pageSize：4。实际上有“33”的总记录，所以分页应该开始。一般来说，分页的原因是什么，不显示总数记录。

Ext.define('Mis.view.PurchaseOrder', {
extend: 'Ext.grid.Panel',
alias:'widget.purchaseorder',
title:'Purchase Order',
store:'MaterialPurchaseOrders',
height: 235,
dockedItems:[
    {
        xtype: 'pagingtoolbar',
        store:'MaterialPurchaseOrders',
        dock: 'bottom',
        displayInfo: true,
        displayMsg:'Displaying records {0} - {1} of {2}  ',
        emptyMsg:"No records to display ",
        flex:1
    }
],
columns:[
    {
        xtype:'gridcolumn',
        dataIndex:'PartName',
        name:'PartName',
        text:'Part',
        flex:1
    },
    {
        xtype:'gridcolumn',
        text:'PO ID',
        dataIndex:'PoNumber',
        name:'PoNumber',
        width: 80,
        align: 'center'
    },
    {
        xtype:'gridcolumn',
        text:'Material',
        dataIndex:'Name',
        name:'Name',
        flex:1
    },
    {
        xtype:'gridcolumn',
        text:'Total',
        dataIndex:'Total',
        name:'Total',
        width: 80,
        align: 'center'
    },
    {
        xtype:'gridcolumn',
        text:'Size / Ref',
        dataIndex:'SizeReference',
        name:'SizeReference',
        width: 80,
        align: 'center'
    },
    {
        xtype:'gridcolumn',
        text:'Size L',
        dataIndex:'SizeLength',
        name:'SizeLength',
        width: 80,
        align: 'center'
    },
    {
        xtype:'gridcolumn',
        text:'Size W',
        dataIndex:'SizeWidth',
        name:'SizeWidth',
        width: 80,
        align: 'center'
    },
    {
        xtype:'gridcolumn',
        text:'Quantity',
        dataIndex:'Quantity',
        name:'Quantity',
        width: 80,
        align: 'center'
    },
    {
        xtype:'gridcolumn',
        text:'Meterage',
        dataIndex:'Meterage',
        name:'Meterage',
        width: 80,
        align: 'center'
    }
],


initComponent:function () {
    this.callParent();
}

}）;

我的模特。

    Ext.define('Mis.model.MaterialPurchaseOrder', {
    extend: 'Ext.data.Model',
    idProperty: 'Id',
    fields: [
                {
                    mapping: 'Id',
                    name: 'Id'
                },
                {
                    mapping: 'Name',
                    name: 'Name'
                },
                {
                    mapping: 'SizeReference',
                    name: 'SizeReference'
                },
                {
                    mapping: 'SizeLength',
                    name: 'SizeLength'
                },
                {
                    mapping: 'SizeWidth',
                    name: 'SizeWidth'
                },
                {
                    mapping: 'Quantity',
                    name: 'Quantity'
                },
                {
                    mapping: 'Meterage',
                    name: 'Meterage'
                },
                {
                    mapping: 'PoNumber',
                    name: 'PoNumber'
                },
                {
                    mapping: 'PartId',
                    name: 'PartId'
                },
                {
                    mapping: 'PartName',
                    name: 'PartName'
                },
                {
                    mapping: 'Total',
                    name: 'Total'
                },
                {
                    mapping: 'MaterialType',
                    name: 'MaterialType'
                },
                {
                    mapping: 'MaterialTypeId',
                    name: 'MaterialTypeId'
                }
    ],
    proxy: {
        type: 'ajax',
        url: '',
        api:
               {
                   read: '/Material/ReadAssignedPurchaseOrder/',
                   update: '/Material/Update',
                   create: '/Material/Update',
                   destroy: '/Material/Remove'
               },
        reader: {
            type: 'json',
            root: 'Materials',
            successProperty: 'Success',
            totalProperty: 'Total'
        },
            writer:{
            type:'json',
            allowSingle:true
        }
    }
});

存储

Ext.define('Mis.store.MaterialPurchaseOrders', {
extend: 'Ext.data.Store',
requires: 'Mis.model.MaterialPurchaseOrder',
model: 'Mis.model.MaterialPurchaseOrder',
pageSize: 4

}）;

Answer 1

尝试制作商店的实例，这样做绝对不错。使用您的示例（按字符串存储）如果您打开了2个网格并对它们进行排序，它们将对它们进行排序等等...

Ext.define('Mis.view.PurchaseOrder', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.purchaseorder',
    title: 'Purchase Order',
    height: 235,
    columns: [
        {
        xtype: 'gridcolumn',
        dataIndex: 'PartName',
        name: 'PartName',
        text: 'Part',
        flex: 1},
    {
        xtype: 'gridcolumn',
        text: 'PO ID',
        dataIndex: 'PoNumber',
        name: 'PoNumber',
        width: 80,
        align: 'center'},
    {
        xtype: 'gridcolumn',
        text: 'Material',
        dataIndex: 'Name',
        name: 'Name',
        flex: 1},
    {
        xtype: 'gridcolumn',
        text: 'Total',
        dataIndex: 'Total',
        name: 'Total',
        width: 80,
        align: 'center'},
    {
        xtype: 'gridcolumn',
        text: 'Size / Ref',
        dataIndex: 'SizeReference',
        name: 'SizeReference',
        width: 80,
        align: 'center'},
    {
        xtype: 'gridcolumn',
        text: 'Size L',
        dataIndex: 'SizeLength',
        name: 'SizeLength',
        width: 80,
        align: 'center'},
    {
        xtype: 'gridcolumn',
        text: 'Size W',
        dataIndex: 'SizeWidth',
        name: 'SizeWidth',
        width: 80,
        align: 'center'},
    {
        xtype: 'gridcolumn',
        text: 'Quantity',
        dataIndex: 'Quantity',
        name: 'Quantity',
        width: 80,
        align: 'center'},
    {
        xtype: 'gridcolumn',
        text: 'Meterage',
        dataIndex: 'Meterage',
        name: 'Meterage',
        width: 80,
        align: 'center'}
    ],
    initComponent: function() {
        var me = this;
        var store = Ext.create('Mis.store.MaterialPurchaseOrders');

        Ext.applyIf(me, {
            store: store,
            dockedItems: [{
                xtype: 'pagingtoolbar',
                store: store,
                dock: 'bottom',
                displayInfo: true,
                displayMsg: 'Displaying records {0} - {1} of {2}  ',
                emptyMsg: "No records to display ",
                flex: 1}]
        });
        me.callParent();
    }
});​