Extjs保存动态选项卡并在页面加载时将它们渲染回来,是否可能?

时间:2013-03-27 18:38:20

标签: javascript extjs tabs state state-saving

我正在使用Extjs动态添加新标签..但有没有办法可以在某处保存新添加的标签(可能在数据库中),因为我必须渲染用户动态创建的所有标签,每当用户重新访问该页面。

我可以制作标签,将标签的状态保存在cookie中。但我知道为了保存新创建的标签的状态,我必须首先保存标签的Html(?)片段?

这是我的代码:

var tab;
var tabIndex = 0;
var tabArray = [];

Ext.application({
  launch: function() {
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
      expires: new Date(new Date().getTime() + (1000 * 60 * 60 * 24 * 7))
    }));
    Ext.create('Ext.container.Viewport', {
      layout: 'absolute',
      items: [{
        x: 50,
        y: 50,
        width: 300,
        height: 300,
        xtype: 'tabpanel',
        stateful: true,
        stateId: 'tp1',
        stateEvents: ['tabchange'],
        getState: function() {
          return {
            activeTab: this.items.findIndex('id',this.getActiveTab().id)
          };
        },
        applyState: function(s) {
          this.setActiveTab(s.activeTab);
        },
        items: [{
          id: 'c0',
          title: 'Tab One'
        }, {
          id: 'c1',
          title: 'Tab Two'
        }, {
          id: 'c2',
          title: 'Tab Three'
        }],
        bbar: [
                  {
                      text: 'Add Tab',
                      //region: 'south',
                      xtype: 'button',
                      handler: function () {
                          var tabs = this.up('tabpanel');
                          tab = tabs.add({
                              title: 'Tab ',
                              closable:true,
                              xtype:'panel',
                              width: '100%',
                              height: '100%',
                              items: []                                                 
                          }).show();
                      }
                  }
              ]
        }]
    });
  }
});

我是否想在这里做一些不切实际的事情?或者是否可能以某种方式存储新创建的选项卡并使用新创建的选项卡呈现整个tabpanel,就像在页面加载时一样?

我为提出如此广泛的问题而道歉:)

感谢。

1 个答案:

答案 0 :(得分:1)

我过去做过类似的事情。这是我们的设计方法。 它含糊不清,但我们仍然这样做

当您动态创建选项卡并向其添加项目(面板/输入字段)并更改这些项目的值(例如在文本框中输入文本,选中复选框)以及最后点击保存时,我们将提取所有数据都是JSON。

您需要根据需要保存的值自定义构建 - 例如项目的类型,值,子结构等。

然后,当您想重新呈现页面时,则使用JSON构建它。构建此解决方案并不容易。但是,一旦完成,它可以重复使用所有标签 - 无论多么动态。

最后,绝对可能