ExtJSと状態保存

もっと読む
著者のブログから抜粋:
この例では、tabパネル表示のtabを覚えます.これはよくある状況なので、TabPanelを拡張して新しいクラスを定義します.

Ext.ux.StatefulTabPanel = Ext.extend(Ext.TabPanel, {
 stateEvents: ['tabchange'],
 getState: function() {return{tab:this.getActiveTab().id}},
 applyState: function(state) {this.setActiveTab(state.tab);}
});

動作に合わせて、システムは状態のデータを保存するための状態マネージャが必要です.実際には、システム内にクッキーに状態マネージャがあります.サーバーに保存するには別の状態マネージャが必要です.私の経験によれば、ブラウザのクッキーを使ってユーザーのマシンの情報を保存する傾向があります.ここで生きてほしいのはデフォルトより長いです.

Ext.state.Manager.setProvider(
 new Ext.state.CookieProvider({
  expires: new Date(new Date().getTime()+(1000*60*60*24*365)), //   
 }));

開始位置のExt.onReady関数に上記のコードを追加します.
処理の過程はあまり複雑ではなくて、appyState()の方法を使うだけです.既存のフィールドを保存するだけであれば、隠してappyStateを呼び出すことができます.この例では、キーの値activeTabに基づいてアクティブなtabを設定します.

Ext.ux.StatefulTabPanel = Ext.extend(Ext.TabPanel, {
 stateEvents: ['tabchange'],
 getState: function() {return{activeTab:this.getActiveTab().id}},
});

********
面白いことに、作者は28年のソフト開発経験を持つ50歳の先輩です.