Hybrid View

  1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    64
    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

  2. 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);
                        }
                    });
                }           
            }
        });
    });

  3. #2
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    346
    Vote Rating
    113
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all

      0  

    Default


    You should use <tabs>.insert() instead of <tabs>.add() which always append new tab at the end of tab list.
    Code:
        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;
                var tab = tabs.insert(valu,{
                    title: 'Tab ' + (tabs.items.length +1), //we use the tabs.items property to get the length of current items/tabs
                    html : 'Another one'
                });
                tabs.setActiveTab(valu);
            }
        }
        ...

  4. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    64
    Vote Rating
    0
    wasima is on a distinguished road

      0  

    Default


    thanks ,
    but i always want tab2 to be end tab

  5. #4
    Sencha User
    Join Date
    Dec 2011
    Posts
    64
    Vote Rating
    0
    wasima is on a distinguished road

      0  

    Default


    thanks for ur soloution .
    i am able to add new tabs to end but that is not issue the issue is after adding the new tab to end , i want to move tab2 to end always .
    For example:
    I have 2 tabs the order is tab1 tab2 , now i click on tab2 as per ur solution the order will be tab1 tab2 tab3 , but i need in order tab1 tab3 tab2 .the tab that has listener ie tab2 should always be at end.

  6. #5
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    346
    Vote Rating
    113
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all

      0  

    Default


    Do you modify your code to apply my solution? With this solution, Tab2 is always at the end of tab list.

  7. #6
    Sencha User
    Join Date
    Dec 2011
    Posts
    64
    Vote Rating
    0
    wasima is on a distinguished road

      0  

    Default


    thanks, i applied ur solution i get tab2 at end , but there is a different problem with this solution now,
    i had 2 tabs , tab1 tab2 i clicked on tab2 i am getting order as required tab1 tab3 tab2 but sometimes on just a single click on tab2 , 2 tabs ie tab3 and tab4 instead of just one tab ie tab3 are getting rendered .Is it issue with activate listener? it doent happen everytime but happens occassionally but still wat might be the issue?

Thread Participants: 1