Extjs狀態管理器 - 從動態表單保存狀態

Question

我有一個表單，我點擊新的字段添加。 http://jsfiddle.net/Zb8DV/
用戶可以添加他的輸入並點擊保存。
我想要onsave事件來存儲cookie中的狀態。
下一次當他進入表單時，我想要加載狀態，生成字段將上次輸入表單時的值放入。
所以，如果你看看下面的表單： 你點擊「添加字段」，將會生成一個新的字段，添加字段並放入值之後，我想保存狀態並下次加載它...

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??")} 
    }], 

}); 

Answer 1

在你的按鈕處理程序可以從形式獲取值與getValues()方法，然後把值存儲到餅乾Ext.state.Manager.set()方法。

handler : function(btn){ 
    var form = btn.up('form'); 

    var values = form.getValues(); 

    Ext.state.Manager.set('formFieldValues', values);   
} 

從Cookie，可以在偵聽形式afterrender事件還原形式狀態。爲了從cookie獲取表單狀態，您可以使用Ext.state.Manager.get()方法。

listeners: { 
    afterrender: function(form) { 
     var values = Ext.state.Manager.get('formFieldValues'); 
     if (values) { 
      console.log(values);     
      Ext.Object.each(values, function(key, value) { 
       form.count += 1; 
       form.add({ 
        xtype: 'textfield', 
        name: 'field' + form.count, 
        fieldLabel: 'field ' + form.count, 
        value: value 
       }); 
      }); 
     } 
    } 
} 

撥弄完整的例子：https://fiddle.sencha.com/#fiddle/32e