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.

score 1 · Accepted Answer · answered Mar 27 '13 at 18:48

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

answered Mar 27 '13 at 18:48

hop

2,518
11
40
56

Still don't you wanna have some sort of an HTML snippet which knows where to put the items? You can't really just render a Json as it is right? What my goal is to create tabs, and each tabs have a portal panel and user add's portlets inside the portalpanel essentially populating each tab. My app has to remember how many tabs he has and how many and types of portlets he has which are updated dynamically :| Seems little unrealistic to me, but it's somewhat possible I believe `I'd be grateful if you could provide a small snippet as an extension to my code above for storing the Json thing` Thanks – First Blood Mar 27 '13 at 19:20
What I was trying to say is we need to rebuild the ExtJs components based on the JSON. We can't render the JSON as such. – hop Mar 27 '13 at 19:50
1

And extracting JSON is not something you do on the fly. You need to manually construct the JSON. I don't have the code handy. What you need to do is iterate over the children of the tab and manually create the JSON – hop Mar 27 '13 at 19:51
Alright.. I'll try to construct the Json by iterating over the child components, and will save them in the database per user :) Hope that works.. Thanks! – First Blood Mar 27 '13 at 20:07

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

1 Answers1