How to make a Ext.js 4 grid plugin stateful?

Question

I found a ext.js grid plugin for changing page size via a combo box. from here (enter link description here)

This is the plugin

/**
* 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();
    }
});

I want add the combo box state to grid state so that the grid shows last changed page size on reload. (I need to add the value to the grids state item not to separate state item)

How can I do that in Ext.JS 4.* ?

Jan S Jan S · Accepted Answer · 2014-05-05T06:06:46

you need to include the Ext.state.Stateful mixin and override the getState() method:

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

and the applyState() method:

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

then if you use this plugin you need to set stateful to true and give your plugin instance a stateId

How to make a Ext.js 4 grid plugin stateful?

1 Answers