如何使Ext.js 4网格插件有状态?

时间:2014-05-05 05:12:08

标签: javascript extjs

我找到了一个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。*

中执行此操作

1 个答案:

答案 0 :(得分:1)

您需要添加Ext.state.Stateful mixin并覆盖getState()方法:

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

applyState()方法:

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

然后,如果您使用此插件,则需要将stateful设置为true并为您的插件实例添加stateId