extjs3

ExtJS – Creating and using a State Provider

Steps to create and user a state provider. In my case, the state provider was not the provided cookie provider, but instead sessvars, which is from Thomas Frank Session variables without cookies.

Note: Ext JS 4 version below

Step 1: Create the session provider

Ext.ux("Ext.ux.state");
/**
 * @class Ext.ux.state.SessVarsProvider
 * @extends Ext.state.Provider
 * Session state provider that stores state information on the client side
 * for the length of the session.  Important - sessvars.js must be included
 * in the page.
 * @depends sessvars.js
 */
Ext.ux.state.SessVarsProvider = Ext.extend(Ext.state.Provider, {
    
    constructor : function(config){
         Ext.ux.state.SessVarsProvider.superclass.constructor.call(this);
         Ext.apply(this, config);
	 this.state = sessvars;
    },
	
    // override
    get : function(name, defaultValue) {
        return typeof this.state[name] == "undefined" ?
            defaultValue : this.state[name];
    },
	
    // override
    set : function(name, value){
        Ext.ux.state.SessVarsProvider.superclass.set.call(this, name, value);
    },
	
    /**
     * Clear out all the remembered state values 
     */
    clearAll : function(){
	sessvars.$.clearMem();
    }
	
});

Step 2: Use the session provider, put this in Ext.onReady

Ext.state.Manager.setProvider(new Ext.ux.state.SessVarsProvider());

Step 3: Set up the fields to save state. Each field that is going to save state needs the following added to their config:

	stateful: true,
	stateId: 'myStateId',
	stateEvents: ['mystateevent'],
	getState: function() { return this.getValue(); },
	applyState: function(state) { this.setValue(state); }			

Step 4: Can use standard events, or custom events. To make the fields aware of a custom event in my app, I had to forward the event like this:

    MyPanel = Ext.Extend(Ext.FormPanel, {
        initComponent : function() {

                 MyPanel.superclass.initComponent();

                 // relay mystateevent to children
                 this.basicFS.getComponent('searchText').relayEvents(this, 'mystateevent');
        }
    });

Ext JS 4 – Creating and Using a State Provider
Version Info: Ext JS 4.1.1
1. The session provider, found at gist Ext.ux.state.SessVarsProvider.js

2. Use the session provider, put this in Ext.onReady

Ext.state.Manager.setProvider(Ext.create('Ext.ux.state.SessVarsProvider'));

3. Set up the fields to save state. Each field that is going to save state needs the following added to their config. Only difference w/my Ext JS 3 version is that the State manager expects the state info to be a property.

	stateful: true,
	stateId: 'myStateId',
	stateEvents: ['mystateevent'],
	getState: function() { return {val:this.getValue()}; },
	applyState: function(state) { 
		if (typeof state.val === 'undefined') {
			state.val = '';
		}
		this.setValue(state.val);
	}			

4. Can call directly, use standard events, or custom events. To make the fields aware of a custom event in my app, I had to forward the event like this:

    MyPanel = Ext.Extend(Ext.FormPanel, {
        initComponent : function() {
              // whatever init is needed
              this.callParent(arguments);

              // relay mystateevent to children
              this.down('#myItemId').relayEvents(this, ['mystatevent']);
        }
    });

Helpful links:
Session variables without cookies
Alternative Client-Side Storage using Sessvars.js
Ext.state.Manager server backup session provider
Events and ExtJS This finally helped me understand “relayEvent”.
And of course the Ext JS API docs, have a lot for state providers.

Advertisements