Extjs state manager - save state from a dynamic form - extjs

Question

I have a form that I add on click new fields. http://jsfiddle.net/Zb8DV/
the user can add his input and click on save.
I want onsave event to store the state in the cookie.
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.
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...
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

In your button handler you can get values from form with getValues() method and then store values into cookies with Ext.state.Manager.set() method.
handler : function(btn){
var form = btn.up('form');
var values = form.getValues();
Ext.state.Manager.set('formFieldValues', values);
}
Restore form state from cookies you can in listener for form afterrender event. For getting form state from cookie you can use Ext.state.Manager.get() method.
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
});
});
}
}
}
Fiddle with complete example: https://fiddle.sencha.com/#fiddle/32e