Question

我有以下示例（http://jsfiddle.net/a473n/1/）。代码是这样的：

Ext.state.Manager.setProvider(new Ext.state.LocalStorageProvider());

Ext.create('Ext.form.field.Checkbox', {
    stateful: true,
    boxLabel: 'Click me',
    stateEvents: ['change'],
    stateId: 'my-checkbox',
    renderTo: document.body 
});

当我使用Chrome的调试器查看资源并查看本地存储时，我可以看到“my-checkbox”的条目，但是当我单击代表页面UI中的复选框的按钮时，我看不到值已检查或未选中被写入本地存储的情况。本地存储中的值永远不会更改。是什么给了什么？

Answer 1

状态数据来自getState方法。对于复选框，它继承自AbstractComponent，它只保存组件的大小（请参阅the code）。因此，如果您希望保存并恢复该值，则必须提供自己的此方法实现。

当然，还有第二步，您还必须覆盖applyState方法以应用您将要保存的额外内容。

我updated your fiddle来证明这一点：

Ext.state.Manager.setProvider(new Ext.state.LocalStorageProvider());

Ext.create('Ext.form.field.Checkbox', {
    stateful: true,
    boxLabel: 'dasfasdf',
    stateEvents: ['change'],
    stateId: 'my-checkbox',
    renderTo: Ext.getBody()

    ,getState: function() {
        return {
            checked: this.getValue()
        };
    }

    ,applyState: function(state) {
        this.setValue(state && state.checked);
    }
});

瞧！有价值的有状态复选框！

如果你想用比复选框更复杂的东西来做这件事，那么也可以调用被覆盖方法的父级。检查实际组件的实现，看看是否需要它。

ExtJS 4状态提供者

1 个答案: