How to create dynamic tabs from a grid column on page load in extjs

Question

I am generating data in a grid panel using json store. I have to generate tabs from the content of column 1 on page load . How can I generate those dynamic tabs from column 1?

Answer 1

So you have the JSON store, something like this

var store = new Ext.data.JsonStore({
    // store configs
    autoDestroy: true,
    url: 'get-images.php',
    storeId: 'myStore',
    // reader configs
    root: 'images',
    idProperty: 'name',
    fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date'}]
});

Then you can add a callback function to the store that gets fired once it loads. This is the documentation on that function

load : ( Store this, Ext.data.Record[] records, Object options )

so,

store.addListener(load, function(store, records, options){
    // loop over records and dynamically create tabs here
});

So if you had a tabpanel like this

var tabs = new Ext.TabPanel({
        renderTo:'tabs',
        resizeTabs:true, // turn on tab resizing
        minTabWidth: 115,
        tabWidth:135,
        enableTabScroll:true,
        width:600,
        height:250,
        defaults: {autoScroll:true},
        plugins: new Ext.ux.TabCloseMenu()
    });

You can dynamically add tabs to it like this

tabs.add({
        title: 'New Tab ' + (++index),
        iconCls: 'tabs',
        html: 'Tab Body ' + (index) + '<br/><br/>'
              + Ext.example.bogusMarkup,
        closable:true
    }).show();

That should be everything you need, more documentation can be found here.

http://www.sencha.com/deploy/dev/examples/tabs/tabs-adv.html

Answer 2

Hi David, Thanks! I am following the same approach but when I am looping through the tabs its not able to add tabs dynamically . I am sure my loop is working properly because I put an alert and its looping through all the records. My code is below...Please let me know where I am wrong..

var store = new Ext.data.JsonStore({
autoLoad: true,
url: '../json/test.json',
root: 'results',
fields: 
[
            'TIEBACK',
            'GATE_TIME',
            'TOTAL',
            'STOP_DESC',
            'DOOR'
],

sortInfo: {
    field: 'TIEBACK', direction: 'ASC'
}

});

my tabpanel:

 tabPanel = new Ext.TabPanel({
                region: 'center', 
                deferredRender: false,
                activeTab: 0,     
                items: [{
                                xtype: 'grid',
                                store: store,
                                //selModel: selModel,
                                columns: assignment,
                                stripeRows: true,
                                loadMask: true,
                                height: 200,
                                width: 200,
                                x: 490, y: 620,
                                title:'Assignment Status',
                                bbar: pagingBar




                    }]
});

loop:

   store.on('load', function(){
             store.each(function(re)
             {
                var tieback = re.get('TIEBACK');
                //alert(tieback);
                tabPanel.add(tieback);
             });
         });