Extjs Saving Dynamic Tabs and Rendering them back on Page Load, is it possible?

Question

I am adding new tabs dynamically with Extjs.. But is there a way I can save the newly added tabs somewhere(Probably in database), because I have to render all the tabs a user creates dynamically, whenever the user re-visits the page.

I can make tabs, save the state of the tabs in a cookie.. But I know that in order to save the state of a newly created tab, I have to first save the Html(?) snippet of the tab somewhere?

Here is my code:

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

Am I trying to do something unrealistic here? or is it possible somehow to store the newly created tabs and render the whole tabpanel with the newly created tabs as it is on the page load?

I apologize for asking such a broad question :)

Thanks.

Answer 1

I have done a similar thing in the past. This is the design approach we had. Its vague, but we still did it

When you dynamically create a tab and add items(panels/input fields) into it and change the value of these items (say like entering a text in textbox, checking a checkbox) and when you finally hit save, we will extract all the data as JSON.

You need to custom build based on what values you need to save - say the type of the item, value, its child structure and so on.

Then when you want re-render the page, then you use the JSON to build it. It's not easy to build this solution. But, once you are done, its reusable for all the tabs - however dynamic is going to be.

And finally, its definitely possible