CODEWITHSUNDEEP
extjsextjs6extjs6-classic
Sam
Sam

Reputation: 122

How to create tab panel dynamically in ExtJS?

I have a model and store in my code. As per functionality, I want to create tabs dynamically from store. Can you share code snippet? Assuming that there is corresponding model and store.

Upvotes: 1

Views: 2080

Answers (1)

UDID
UDID

Reputation: 2423

For this you first need to create Tab panel 

datatabpanel = Ext.create('Ext.tab.Panel', {
                layout: 'card',
            }),

and then Inside tab panel you to add your element. In this case I am giving example of adding grid into tab panel.

we are first taking the response by using Ajax and from that response we are build the grid. Once grid is ready we are add to the tab panel dynamically.

load: function() {
    var url = '',
    proxyMethod = 'GET';
    url = SomeURL;
    Ext.Ajax.request({
          url: url,
          headers: {
              "Accept": "application/json; charset=utf-8",
              'X-HTTP-Method-Override': "PUT"
          },
          success: function(res, args) {
              var data = Ext.decode(res.responseText);
              me.view.mainData = data;
              if (data.ROOT.DATA) {
                  me.buildGrids(data.ROOT.DATA.D, data.ROOT.HEADER);
                }
          }
        })
  }




 buildGrids: function(data, metaData) {
        var p = this,
            me = p.view,
            cnt = me.down("container[name=gridtabs]"), // This is your container where you placing your grid. You named that as gridtabs. 
            datatabpanel = Ext.create('Ext.tab.Panel', {
                layout: 'card',
            }),
            newdatagrids = [];
        data = Ext.isObject(data) ? [data] : data;
        for (var i = 0; i < data.length; i++) {
            var value = data[i].NAME; // You can extract from your attributes.
            var datasetgrids = Ext.create({  
                xtype: 'SomeGrid',
                storeXml:{"ROOT":{ "DATA":data[i],"HEADER":metaData}}, // This is also depended on how to data is coming.
                gridId: data[i]["ID"],
            });
            newdatagrids.push(datasetgrids);
        }
        cnt.removeAll();
        datatabpanel.add(newdatagrids);
        datatabpanel.setActiveTab(0);
        cnt.add(datatabpanel);
    },

In code you can see we are creating one array newdatagrids and then puting my grid into this array by using newdatagrids.push(datasetgrids);

Once my newdatagrids is ready i am adding this to my tabpanel by using datatabpanel.add(newdatagrids);.

Note : This is just sample code. You have to make/change/modify this kind of code as per your requirment.

There are aslo lots of good example are given in docs. Please have a look. Doc

Upvotes: 4

Related Questions