创建保存状态

节选自作者的博客:

在我这个例子中,我将会记住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);}
});

要配合运作,系统需要一个状态管理器(state manager),用于负责保存状态的数据。实际上系统内已有一个状态管理器在cookie中。如果你想保存在服务器上就另须一个别的状态管理器。按照我的经验我是比较倾向于使用浏览器的cookies来保存用户的机器的信息。这里我希望它存活的比默认的一天长:

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

在开始位置的Ext.onReady函数中加上以上的代码。

处理过程不是太复杂,只需用到applyState()的方法。如果你只是需要保存某些现有的字段 可隐式调用applyState(学习疑问:重写便可?)。 本例中,根据键值activeTab来设置活动的tab:

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