ExtJS与状态保存

在我这个例子中，我将会记住tab面板显示的tab。由于这是常见的情形，我就扩展TabPanel定义一个新类：

Javascript代码
Ext.ux.StatefulTabPanel = Ext.extend(Ext.TabPanel, {  
 stateEvents: ['tabchange'],  
 getState: function() {return{tab:this.getActiveTab().id}},  
 applyState: function(state) {this.setActiveTab(state.tab);}  
}); 
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来保存用户的机器的信息。这里我希望它存活的比默认的一天长：

Javascript代码
Ext.state.Manager.setProvider(  
 new Ext.state.CookieProvider({  
  expires: new Date(new Date().getTime()+(1000*60*60*24*365)), //一年后  
 })); 
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：

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