javascript - 如何使 Ext.js 4 网格插件有状态？

Question

我找到了一个 ext.js 网格插件，用于通过组合框更改页面大小。从这里 ( enter link description here )

这是插件

/**
* Ext.ux.grid.PageSize
*/
Ext.define('Ext.ux.grid.PageSize', {
    extend      : 'Ext.form.field.ComboBox',
    alias       : 'plugin.pagesize',
    beforeText  : 'Show',
    afterText   : 'rows/page',
    mode        : 'local',
    displayField: 'text',
    valueField  : 'value',
    allowBlank  : false,
    triggerAction: 'all',
    width       : 50,
    maskRe      : /[0-9]/,    
    /**
    * initialize the paging combo after the pagebar is randered
    */
    init: function(paging) {
        paging.on('afterrender', this.onInitView, this);
    },
    /**
    * create a local store for availabe range of pages
    */
    store: new Ext.data.SimpleStore({
        fields: ['text', 'value'],
        data: [['5', 5], ['10', 10], ['15', 15], ['20', 20], ['25', 25], ['50', 50], ['100', 100], ['200', 200], ['500', 500]]
    }),    
    /**
    * assing the select and specialkey events for the combobox 
    * after the pagebar is rendered.
    */
    onInitView: function(paging) {
        this.setValue(paging.store.pageSize); 
        paging.add('-', this.beforeText, this, this.afterText);
        this.on('select', this.onPageSizeChanged, paging);
        this.on('specialkey', function(combo, e) {
            if(13 === e.getKey()) {
                this.onPageSizeChanged.call(paging, this);        
            }
        });
    },
    /**
    * refresh the page when the value is changed
    */
    onPageSizeChanged: function(combo) {
        this.store.pageSize = parseInt(combo.getRawValue(), 10);
        this.doRefresh();
    }
}); 

我想将组合框状态添加到网格状态，以便网格在重新加载时显示最后更改的页面大小。 (我需要将值添加到网格状态项而不是分离状态项)

我如何在 Ext.JS 4.* 中做到这一点？

Answer 1

您需要包含 Ext.state.Stateful 混合宏并覆盖 getState()方法:

getState: function(){
    return this.store.pageSize;
}

和 applyState()方法:

applyState: function(state) {
    if (state) {
        this.store.pageSize = state;
    }
}

然后，如果您使用此插件，则需要将 stateful 设置为 true 并为您的插件实例提供一个 stateId