extjs - Saving state of hbox widths after splitter move -

i'm trying save visual state of panel. panel consists of 2 child containers, hbox/flex layout , splitter between them.

{   xtype:'panel',   layout: {     align: 'stretch',     type: 'hbox'   },   items:[     {       xtype:'container',       title: 'left panel',       flex:1     },     {       xtype:'splitter'     },     {       xtype:'container',       title: 'left panel',       flex:2     }   ] } 

i have working state manager. "left panel" contains grid, , grid storing it's column states fine. state manager fires controllers init function by:

var stateprovider=ext.create('ext.state.localstorageprovider'); ext.state.manager.setprovider(stateprovider); 

the grid uses framework standard approach storing it's state setting stateid: 'gridstate' , stateful:true.

however i'm unable figure out how extjs want's me same flex values of main layout. i've tried setting stateful , stateid on splitter. i've tried without events, , stateevents: ['move']. i've tried setting stateful on leftpanel , stateevents resize. i've tried setting stateful on parent panel, , without stateevents: afterlayout.

i know it's possible fetch event after splitter moved. store flex values custom states , manually them somewhere in layout/render process, guess there must more standard approach problem seems trivial.

what standard framework approach storing "splitter position" / "flex values" of hbox/vbox layout?

yes there standard way add states. , there no default state splitter you'll have add these functions:

example state:

getstate: function () {     var me = this;     var state = {};     state.yourcustomstate = 'state'; //you can save want     return state; },  applystate: function (state) {     var me = this;      if (state && state.yourcustomstate) {         //do stuff     } } 

and need state triggered, can use stateevents: http://docs.sencha.com/extjs/4.1.3/#!/api/ext.resizer.splitter-method-addstateevents

you can add resize event stateevents.