Question

我在单击新字段时添加了一个表单。的 http://jsfiddle.net/Zb8DV/
用户可以添加他的输入并点击保存我希望onsave事件将状态存储在cookie中下次当他进入表单时，我想加载状态，生成上次输入表单时输入值的字段。
所以如果你看下面的表格：你点击“添加字段”并生成一个新字段，添加字段并输入值后，我想保存状态并在下次加载它...

enter image description here

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()方法将值存储到Cookie中。

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

    var values = form.getValues();

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

从表单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

Extjs状态管理器 - 从动态表单中保存状态

1 个答案: