title: Saving state of hbox widths after splitter move
body: <p>I'm trying to save the visual state of a panel. The Panel consists of two child containers, with hbox/flex layout and a splitter between them.</p>
  
  <pre><code>{
    xtype:'panel',
    layout: {
      align: 'stretch',
      type: 'hbox'
    },
    items:[
      {
        xtype:'container',
        title: 'left panel',
        flex:1
      },
      {
        xtype:'splitter'
      },
      {
        xtype:'container',
        title: 'left panel',
        flex:2
      }
    ]
  }
  </code></pre>
  
  <p>I already have a working state manager. The "left panel" contains a grid, and the grid is storing it's column states just fine. The state manager fires from a controllers init function by:</p>
  
  <pre><code>var stateProvider=Ext.create('Ext.state.LocalStorageProvider');
  Ext.state.Manager.setProvider(stateProvider);
  </code></pre>
  
  <p>The grid uses the framework standard approach for storing it's state by setting stateId: 'GridState' and stateful:true.</p>
  
  <p>However I'm unable to figure out how ExtJS want's me to do the same with the flex values of the main layout. I've tried setting stateful and stateId on the splitter. I've tried without events, and with stateEvents: ['move']. I've also tried setting stateful on the leftpanel and with stateEvents to resize. Finally I've tried setting stateful on the parent panel, with and without stateEvents: afterlayout.</p>
  
  <p>I do know that it's possible to fetch the event after the splitter is moved. Then I could store the flex values as custom states and manually look for them somewhere in the layout/render process, however I guess there must be a more standard approach for a problem that seems so trivial.</p>
  
  <p>What is the standard framework approach for storing the "splitter position" / "flex values" of a hbox/vbox layout?</p>