如何在分页工具栏计数中获取totalcount-EXTJS

我试图找出totalcount以禁用按钮，基于此

当我第一次尝试使用ext.js时，请告诉我是否出错

我只需要得到数据的总数

这是我的密码

Ext.define('MyTeckno.view.Users', {
extend : 'Ext.grid.Panel',

initComponent : function() {
    var me = this;

    me.store = Ext.create('Ext.data.Store',{
        callback : me,
        proxy : {
            type: 'ajax',
            url : 'users.json',
            pageSize: 25,
            reader: {
                type: 'json',
                root: 'results.records',
                totalProperty:  'totalCount',
                successProperty: 'success'
            }
        },
        fields : [
            'userid', 'name', 'email', 'phone'
        ],
        tools: [
            {
                xtype: 'checkbox',
                itemId: 'showAllCheckbox',
                boxLabel: 'Show All',
                listeners: {
                    change: {
                        fn: me.onShowAllChange,
                        scope: me
                    }
                }
            }
        ],
        listeners : {
            beforeload : {
                fn : me.onUserStoreBeforeLoad,
                scope : me
            }
        }
    });

    columns: [
        { text: 'Name',  dataIndex: 'name' },
        { text: 'Email', dataIndex: 'email', flex: 1 },
        { text: 'Phone', dataIndex: 'phone' }
    ];

    dockedItems: [{
        xtype: 'pagingtoolbar',
        store: me.store,   // same store GridPanel is using
        dock: 'bottom',
        displayInfo: true
    }];

    me.callParent(arguments);

    me.store.load();
},

onUserStoreBeforeLoad: function(store, operation, options) {
    var me = this;

//If showall is checked set the totalcount if not set the default 25
// Assumption is that you are getting the totalCount as for the firstload
    var isShowAll = me.down('#showAllCheckbox').getValue();

    if(isShowAll) {
        store.pageSize = store.totalCount;
    }
    else {
        store.pageSize = 25;
    }
},

//Change event on showall checkbox, just call the store.load() to reload the store
onShowAllChange: function() {
    var me = this;

    me.store.load();
}

});

假设再次调用服务器以获取totalCount并将其设置为pageSize

---

有谁能帮我一下吗？

是的，store.totalCount属性包含上次请求返回的记录总数。但我认为这不是正确的方法。以下是doc所说的：

随着记录数的增加，浏览器所需的时间 使它们增加。分页用于减少数据量 与客户交换。注意：如果记录/行数超过 可在可用屏幕区域查看，垂直滚动条将 添加

分页通常在服务器端处理（请参阅下面的异常）。 客户端向服务器端发送服务器所需的参数 解释并用适当的数据作出回应

分页是一个专门的工具栏，它绑定到 Ext.data.Store并提供自动分页控制。此组件 通过传递用于存储的参数，将数据块加载到存储中 分页标准

在这种情况下，您请求服务器仅返回要显示的数量（未选中复选框）或所有信息（选中复选框）。 知道了这一点，您是否同意随着最后一个请求中的数据量更改页面大小没有多大意义？如果自上次请求后发生更改，则此金额可能已过期

更有趣的是调整服务器端，在选中复选框时返回所有数据，或者在分页之后（参数start和limit）

我创作这把小提琴是为了举例说明：

还可以查看文件Data/users.json

以下是doc所说的：

构成“页面”的记录数。这是用来 使用nextPage和previousPage为内置分页供电 当使用Ext.toolbar.Paging默认值分页网格时，函数 到25岁

要禁用分页，请将pageSize设置为0

不要忘记服务器应该始终返回总记录（`totalCount`），以便`pagingtootbar`能够正确装载分页。

proxy.setExtraParam

将参数添加到代理中。这将导致在存储加载的任何位置发送参数

Extjs代码：

var store = Ext.create('Ext.data.Store',{
    pageSize: 10,
    //pageSizeDefault avoid a hardcode below (line 49)
    pageSizeDefault: 10,
    proxy : {
        type: 'ajax',
        url : 'users.json',
        reader: {
            type: 'json',
            rootProperty: 'root',
            totalProperty:  'totalCount', //<= This should be returned from the backend
            successProperty: 'success'
        }
    },
    fields : [
        'userid', 'name', 'email', 'phone'
    ],
    listeners: {
        load: function(store){
            console.log('totalCount => ', store.getTotalCount());
        }
    }
});

var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    title: 'Teste',
    autoLoad: true,
    tools: [
        {
            xtype: 'checkbox',
            itemId: 'showAllCheckbox',
            boxLabel: 'Show All',
            listeners: {
                change: {
                    fn: function(field, newValue, oldValue, eOpts) {
                        var store = field.up('grid').getStore();

                        //If showall is checked set the totalcount if not set the default 25
                        // Assumption is that you are getting the totalCount as for the firstload
                        if(newValue) {
                            store.setPageSize(0);
                            store.getProxy().setExtraParam('limit', 0);
                        }else {
                            store.setPageSize(store.pageSizeDefault);
                            store.getProxy().setExtraParam('limit', store.pageSizeDefault);
                        }

                        store.reload();
                    }
                }
            }
        }
    ],
    columns: [
        { text: 'Name',  dataIndex: 'name', flex: 3},
        { text: 'Email', dataIndex: 'email', flex: 1 },
        { text: 'Phone', dataIndex: 'phone' }
    ],
    dockedItems: [{
        xtype: 'pagingtoolbar',
        store: store,   // same store GridPanel is using
        dock: 'bottom',
        displayInfo: true,
        items:[
            {
                xtype: 'button',
                handler: function(){
                    alert('click');
                }
            }
        ]
    }]
});

var wnd = Ext.create('Ext.window.Window',{
    layout:'fit',
    maximized: true,
    title: 'Example of pagination'
}).show();

wnd.add(grid);

最后，我想提及一些我认为重要的意见。我知道您是从Extjs开始的，因此请理解为积极的评价：

• 避免破坏类封装。请注意，在中，我访问了相同的

  store.pageSize

  属性，但是，我使用了

  store.getPageSize（）

  方法，而不是直接访问该属性。这同样适用于

  store.getTotalCount（）

• 如果

  pagingtoolbar

  的目的正是为了减少所携带的信息量，从而减少时间和计算消耗，那么是否真的有必要让用户选择携带所有数据（复选框Show all）
• 我看到在

  onUserStoreBeforeLoad

  方法中，根据复选框的值更改存储区的属性。分析哪一个组件更依赖于另一个组件来知道代码放在哪里是很有趣的。在这种情况下，复选框会更改存储的行为。此代码段可能位于复选框

  change

  方法中。在当前表单中，仍然需要删除

  onUserStoreBeforeLoad

  方法，但是，正如建议的那样，删除此组件不会影响代码。清楚了吗

任何问题，请评论。

---

希望这有帮助。

您的ExtJS版本是什么？如何在app.js中获取totalcount？？你能帮我解决这个问题吗？如何控制计数？？只需获取存储并调用getTotalCount方法：

console.log（store.getTotalCount（））

。如果您想直接从浏览器中进行检查，我建议这样使用：只需打开开发人员工具，转到控制台并放置以下内容：

Ext.ComponentQuery.query（“”）[0].getStore（）.GetTotalCount（）

。有关更多详细信息，请参阅上面链接处的文档。为console.log（store.getTotalCount（））获取0；你能用小提琴更新一下吗

var data = [
    {userid: "1", name: "user1", email: "user1@email.com", phone: "+55999999991"},
    {userid: "2", name: "user2", email: "user2@email.com", phone: "+55999999992"},
    {userid: "3", name: "user3", email: "user3@email.com", phone: "+55999999993"},
    {userid: "4", name: "user4", email: "user4@email.com", phone: "+55999999994"},
    {userid: "5", name: "user5", email: "user5@email.com", phone: "+55999999995"},
    {userid: "6", name: "user6", email: "user6@email.com", phone: "+55999999996"},
    {userid: "7", name: "user7", email: "user7@email.com", phone: "+55999999997"},
    {userid: "8", name: "user8", email: "user8@email.com", phone: "+55999999998"},
    {userid: "9", name: "user9", email: "user9@email.com", phone: "+55999999999"},
    {userid: "10", name: "user10", email: "user10@email.com", phone: "+55999999910"},
    {userid: "11", name: "user11", email: "user11@email.com", phone: "+55999999911"},
    {userid: "12", name: "user12", email: "user12@email.com", phone: "+55999999912"},
    {userid: "13", name: "user13", email: "user13@email.com", phone: "+55999999913"},
    {userid: "14", name: "user14", email: "user14@email.com", phone: "+55999999914"},
    {userid: "15", name: "user15", email: "user15@email.com", phone: "+55999999915"},
    {userid: "16", name: "user16", email: "user16@email.com", phone: "+55999999916"},
    {userid: "17", name: "user17", email: "user17@email.com", phone: "+55999999917"},
    {userid: "18", name: "user18", email: "user18@email.com", phone: "+55999999918"},
    {userid: "19", name: "user19", email: "user19@email.com", phone: "+55999999919"},
    {userid: "20", name: "user20", email: "user20@email.com", phone: "+55999999920"}
];

var totalCount = data.length;

if(params.limit > 0){
    data = data.slice(params.start, params.start + params.limit);
}

return {success: true, root: data, totalCount: totalCount};