Extjs state manager - save state from a dynamic form

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