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);}
});

要配合运作，系统需要一个状态管理器（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}},
});

************
有意思的是，作者是一个拥有28年软件开发经验的50岁前辈！