ExtJS与状态保存

最新推荐文章于 2020-08-02 17:48:50 发布

sp42

最新推荐文章于 2020-08-02 17:48:50 发布

阅读量166

点赞数

文章标签： EXT JavaScript 浏览器活动 HTML ViewUI

本文介绍了一种在ExtJS中管理Tab面板状态的方法。通过扩展TabPanel类创建了一个新的类Ext.ux.StatefulTabPanel，该类能记住当前激活的Tab，并使用状态管理器将这些信息保存在浏览器的Cookie中，以便用户再次访问时能够恢复之前的Tab状态。

摘要由CSDN通过智能技术生成

节选自[url="tp://golfadept-journey.blogspot.com/2008/05/extjs-and-saving-state.html"]作者[/url]的博客：

在我这个例子中，我将会记住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岁前辈！