1

我有一个在单击新字段时添加的表单。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??")}
    }],

});
4

1 回答 1

4

在您的按钮处理程序中，您可以使用方法从表单中获取值getValues()，然后使用方法将值存储到 cookie 中Ext.state.Manager.set()。

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

    var values = form.getValues();

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

您可以在表单afterrender事件的侦听器中从 cookie 中恢复表单状态。要从 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

于 2014-01-29T08:24:21.030 回答