Threaded View

  1. 7 Oct 2012 9:23 PM #1
    wasima
    wasima is offline
    Sencha User
    Join Date
    Dec 2011
    Posts
    41
    Vote Rating
    0
    wasima is on a distinguished road
      0  

    Default Answered: Add new tabs in tabpanel withone tab (istener tab)always as the last tab in tabpanel

    Answered: Add new tabs in tabpanel withone tab (istener tab)always as the last tab in tabpanel


    Hello,
    i have a tabpanel with 2 tabs , tab1 and tab2 . tab2 has a listener 'activate', when i click on tab2 new tabs are getting added so if i click on tab2 a new tab tab3 will be created and order in tabpanel will be tab1 tab2 tab3 . but i always want this tab2 which has a listener to be at end like tab1 tab3 and tab2 if i click tab2 again it should be tab1 tab3 tab4 tab2 . In my code new tabs are getting addded but in order tab1 tab2 tab3 tab4 but i want in order tab1 tab3 tab4 tab2 in simple tab2 should always be last tab in tabpanel .


    This is code:
    Ext.create('Ext.tab.Panel', {
    width: 300,
    height: 200,
    id: 'tabpanel',
    activeTab: 0,
    items: [
    {
    title: 'Tab 1',
    bodyPadding: 10,
    closable: true,
    html : 'A simple tab',
    id: 'tab1'


    },
    {
    title: 'Tab2',
    // html : 'Another one',
    id: 'tab2',
    listeners: {
    activate: function(tab){
    var tabtoremove = Ext.getCmp('tab2');
    var tabs = Ext.getCmp('tabpanel');
    var tab = tabs.add({
    title: 'Tab ' + (tabs.items.length +1), //we use the tabs.items property to get the length of current items/tabs
    html : 'Another one'


    });


    var valu = tabs.items.length-1;
    tabs.setActiveTab(valu);
    }


    }


    }


    ],
    renderTo : Ext.getBody()
    });

    can anyone help me?
    thanks in advance
    Reply With Quote Reply With Quote
  2. Best Answer Posted by vietits

    Try this
    Code:
    Ext.onReady(function(){
    var tab = Ext.create('Ext.tab.Panel', {
        renderTo : Ext.getBody(),
        width: 300,
        height: 200,
        id: 'tabpanel',
        activeTab: 0,
        items: [{
            title: 'Tab 1',
            bodyPadding: 10,
            closable: true,
            html : 'A simple tab',
            id: 'tab1'
        }],
        listeners: {
            render: function(tabs){
                tabs.getTabBar().add({
                    xtype: 'button',
                    text: '+',
                    handler: function(){
                        var tab = tabs.add({
                            title: 'Tab',
                            closable: true,
                            html: 'New tab'
                        });
                        tabs.setActiveTab(tab);
                    }
                });
            }           
        }
    });
});