ラジオボタンの状態保存

Ext.jsでは、Cookieを使用してUIコンポーネントの状態を保存しておくことができます。今回は、以下のサイトを参考に、ラジオボタンの状態を保存する機能を試してみました。ラジオボタン以外のコンポーネントについても基本は同じだと思います。

Ext.state.Managerの初期化

コンポーネントの状態をCookieniに保存には、Ext.state.ManagerとExt.state.CookieProviderクラスを使用します。CookieProviderのドキュメントにあるとおり、まず、Ext.state.CookieProviderを生成して、Ext.state.Managerに設定します。

var cp = new Ext.state.CookieProvider({
       path: "/cgi-bin/",
       expires: new Date(new Date().getTime()+(1000*60*60*24*30)), //30 days
       domain: "extjs.com"
});
Ext.state.Manager.setProvider(cp);

CookieProviderはExt.state.Providerを継承しており、Cookie以外にもサーバ側DBに保存するProviderなども実装できそうです。

Ext.form.Radioでの状態の保存と復元

各コンポーネントで状態を保存するようにするには、コンポーネントのconfigオプションに以下の記述を追加します。

    stateful: true,
    stateEvents : ['check'],
    getState: function() {
	return {checked: this.getValue()}
    },
    applyState: function(state) {
        this.setValue(state.checked);
    },

stateful: 状態保存を有効にします。
stateEvents: 状態を保存するトリガーとなるイベントを指定します。Radioの場合には"check"を指定します。
getState: 状態保存の際に実行されます。
applyState: 状態復元の際に実行されます。

当初、getStateとapplyStateが必要だと知らずに、statefulとstateEventsのみ設定してしばらく悩みました。保存した値は、configオプションの"checked"の値より優先されます。

また、ExtのCheckboxのコードにバグがあるようで、applyStateの実行時にエラーが発生していました。こちらを参考に、ext-all-debug.jsの該当箇所を修正したところ、正常に動作するようになりました。

設定の保存と復元時には、それぞれ"statesave"と"staterestore"イベントが発生します。