title: Extjs state manager - save state from a dynamic form
body: <p>I have a form that I add on click new fields. <strong><a href="http://jsfiddle.net/Zb8DV/" rel="nofollow noreferrer">http://jsfiddle.net/Zb8DV/</a></strong><br>
  the user can add his input and click on save.<br>
  I want onsave event to store the state in the cookie.<br>
  Next time when he enter to the form, I want to load the state, generate the fields in put the values last time he entered to the form.<br>
  So if you look at the form bellow:
  you click on "add field" and a new field will be generated, after you add fields and put values, I want to save the state and load it next time...  </p>
  
  <p><img src="https://i.stack.imgur.com/dZHgP.png" alt="enter image description here"></p>
  
  <pre><code>Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
  
  Ext.create('Ext.form.Panel', {
      renderTo: Ext.getBody(),
      width: 500,
      bodyPadding: 10,
      title: 'Stateful',
      stateful : true,
      stateId : "MyFormState",
      items: [{
          xtype: 'button',
          text: 'add field',
          count: 0,
          handler: function () {
              this.count += 1;
              var me = this;
              this.up("form").add([{
                  "xtype": 'textfield',
                  name: 'field' + me.count,
                  fieldLabel: 'field ' + me.count
              }]);
          }
      }, {
          xtype: 'button',
          margin : '10 10 10 100',
          text: 'Save form state on click here',
          handler : function(){alert("how do I load the panel with the state saved in cookie??")}
      }],
  
  });
  </code></pre>