ExtJS 6，分页工具栏调整器，用于网格面板

引言

标准的 pagingtoolbar 实现了网格面板的分页功能，文档在此。每页的项目数量从存储的 pageSize 中获取。本示例展示了如何在运行时实现这一点。

实际上

预期效果

Using the Code

示例的完整代码可以在 这里 找到。

我扩展了标准的 pagingtoolbar

Ext.define('PagingToolbar', {
    extend: 'Ext.toolbar.Paging',
    alias: 'widget.resizer.pagingtoolbar',

    requires: [
        "PagingToolbarResizer"
    ],

    toolbarResizer: null,

    initComponent: function () {
        var me = this;
        me.callParent(arguments);

        var pluginClassName = "PagingToolbarResizer";

        me.toolbarResizer = Ext.create(pluginClassName);

        if (Ext.isEmpty(me.plugins)) {
            me.plugins = [me.toolbarResizer];
        }
        else {
            var pushTbResizer = true;
            Ext.each(me.plugins, function (plug in) {
                if (Ext.getClassName(plugin) == pluginClassName) {
                    pushTbResizer = false;
                }
            });
            if (pushTbResizer) {
                me.plugins.push(me.toolbarResizer);
            }
        }
    },

    bindStore: function (store, initial, propertyName) {
        var me = this;
        me.callParent(arguments);

        if (!Ext.isEmpty(me.toolbarResizer) && 
            !Ext.isEmpty(me.toolbarResizer.recordsPerPageCmb) && !Ext.isEmpty(store)) {
            me.toolbarResizer.recordsPerPageCmb.setValue(store.pageSize);
        }
    }
});

创建工具栏的插件

Ext.define('PagingToolbarResizer', {
    extend: 'Ext.AbstractPlugin',
    alias: 'plugin.pagingtoolbarresizer',

    options: [5, 10, 15, 20, 25, 30, 50, 75, 100, 200, 300, 500, 1000],

    mode: 'remote',

    displayText: 'Records per Page',

    recordsPerPageCmb: null,

    constructor: function (config) {

        Ext.apply(this, config);

        this.callParent(arguments);
    },

    init: function (pagingToolbar) {
        var me = this;
        var comboStore = me.options;

        me.recordsPerPageCmb = Ext.create('Ext.form.field.ComboBox', {
            typeAhead: false,
            triggerAction: 'all',
            forceSelection: true,
            lazyRender: true,
            editable: false,
            mode: me.mode,
            value: pagingToolbar.store.pageSize,
            width: 80,
            store: comboStore,
            listeners: {
                select: function (combo, value, i) {
                    pagingToolbar.store.pageSize = value.data.field1;
                    pagingToolbar.store.load();
                }
            }
        });

        var index = pagingToolbar.items.indexOf(pagingToolbar.refresh);
        pagingToolbar.insert(++index, me.displayText);
        pagingToolbar.insert(++index, me.recordsPerPageCmb);
        pagingToolbar.insert(++index, '-');

        //destroy combobox before destroying the paging toolbar
        pagingToolbar.on({
            beforedestroy: function () {
                me.recordsPerPageCmb.destroy();
            }
        });
    }
});

将此工具栏添加到网格中。这允许在运行时选择每页的记录数。

Ext.define('GridView', {
    extend: 'Ext.grid.Panel',

    requires: [
        'Ext.grid.column.Number',
        'Ext.grid.column.Date',
        'Ext.view.Table',
        'PagingToolbar',
        'Ext.selection.RowModel'
    ],

    viewModel: {
        stores: {
            itemsStore: {
                proxy: {
                     type: 'ajax',
                     url: 'users.json',
                     reader: {
                         type: 'json',
                         rootProperty: 'users'
                     }
                 },
                 autoLoad: true
            }
        }
    },

    bind: {
        store: '{itemsStore}'
    },

    columns: [
        {
            xtype: 'numbercolumn',
            dataIndex: 'id',
            text: 'ID',
            format: '0,000'
        },
        {
            xtype: 'gridcolumn',
            dataIndex: 'name',
            text: 'Name'
        },
        {
            xtype: 'gridcolumn',
            dataIndex: 'description',
            text: 'Description'
        }
    ],
    dockedItems: [
        {
            xtype: 'pagingtoolbar',
            dock: 'bottom',
            displayInfo: true
        }
    ],
    selModel: {
        selType: 'rowmodel',
        mode: 'MULTI'
    }
});