PDA

View Full Version : Add new tabs in tabpanel withone tab (istener tab)always as the last tab in tabpanel



wasima
7 Oct 2012, 9:23 PM
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

vietits
7 Oct 2012, 11:55 PM
You should use <tabs>.insert() instead of <tabs>.add() which always append new tab at the end of tab list.


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

wasima
8 Oct 2012, 12:27 AM
thanks ,
but i always want tab2 to be end tab

wasima
8 Oct 2012, 12:58 AM
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.

vietits
8 Oct 2012, 5:09 AM
Do you modify your code to apply my solution? With this solution, Tab2 is always at the end of tab list.

wasima
8 Oct 2012, 7:41 AM
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?

vietits
8 Oct 2012, 4:36 PM
Do you encounter the problem with the following simple example? I myself could not reproduce the issue with Ext 4.1.1 and Chrome.


Ext.onReady(function(){
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',
id: 'tab2',
listeners: {
activate: function(){
var tabs = Ext.getCmp('tabpanel');
var valu = tabs.items.length - 1;
var tab = tabs.insert(valu, {
title: 'Tab ' + (tabs.items.length + 1),
html : 'Another one'
});
tabs.setActiveTab(valu);
}
}
}],
renderTo : Ext.getBody()
});
});

wasima
8 Oct 2012, 8:43 PM
thanks vietits ,


the above simple code works fine, but if we remove the title of tab2 then the issue occurs ocassionally.
i need to remove title name to replicate the chrome browser type behaviour where there is a small button at end (tab2 in this case), on click of which a new tab appears

wasima
8 Oct 2012, 9:07 PM
Ext.onReady(function(){ 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', id: 'tab2', listeners: { activate: function(){ var tabs = Ext.getCmp('tabpanel'); var valu = tabs.items.length - 1; var tab = tabs.insert(valu, { title: 'Tab ' + (tabs.items.length + 1), closable: true, html : 'Another one', }); tabs.setActiveTab(valu); } } }], renderTo : Ext.getBody() }); });Another issue i noticed in the code is if u set the config as shown in red is that on single click of tab2 there will be closable tab3 inserted between tab1 and tab2 when i close tab3 i find there a tab4 appers(eventhough i had not clicked tab2 twice) , which has closable option but it doesnt close!!

wasima
8 Oct 2012, 9:26 PM
the above post#9 looks messy , writing same once agin:
Another issue i noticed in the code is if u set the config as shown in code in red colour is that on single click of tab2 there will be closable tab3 inserted between tab1 and tab2 when i close tab3 i find there a tab4 appers(eventhough i had not clicked tab2 twice) , which has closable option but it doesnt close!!

Ext.onReady(function(){
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: 'Tab 2',
id: 'tab2',
listeners: {
activate: function(){
var tabs = Ext.getCmp('tabpanel');
var valu = tabs.items.length - 1;
var tab = tabs.insert(valu, {
title: 'Tab ' + (tabs.items.length + 1),
closable:true,
html : 'Another one'
});
tabs.setActiveTab(valu);
}
}
}],
renderTo : Ext.getBody()
});
});

vietits
8 Oct 2012, 11:00 PM
It seems to be strange but in fact it is not. It is because you do the creating new tab basing on the 'activate' event of a tab (Tab2 in your case) and this event happens not only by clicking on tab. It can happen when you close a tab because tabpanel will find and activate one of the remaining tabs and this will cause the 'activate' event happen.

Hope you understand what I mean.

P/S: Try to put your code inside the CODE tag then you will get more opportunity of getting support from the community.

wasima
9 Oct 2012, 1:24 AM
thanks vietits. i understood ur point .which listener should be used in place of 'activate' listener then?

vietits
9 Oct 2012, 1:26 AM
You should change Tab2 by using a button instead because your Tab2 just plays a role of button

wasima
9 Oct 2012, 2:49 AM
thanks vietits,

but by using a button i may not be able to place it as in order tab1 button ,click on button i get tab1 tab2 button as order, using a button means either placing it outside tab panel or inside a tab not as a tab header right ? i need to replicate a browser type behaviour(where i click on right most tab/button and a new tab opens .)

vietits
9 Oct 2012, 5:11 AM
Try this


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

wasima
9 Oct 2012, 8:54 AM
Thanks vietits .that works fine , a minor enhancement i required was , default there is tab1 and + button, on click of + button twice the order of buttons is normal ie tab1 tab2 tab3 + button , but when i close tab3 , tab2 should be activated but in above solution tab1 is getting activated so i tried modifying code a bit shown in red but found no success .


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'+ (tabs.items.length + 1),
closable: true,
html: 'New tab',
listeners : {
close: function () {
var len = tabs.items.length-1;
tabs.setActiveTab(len);
}
}


});
tabs.setActiveTab(tab);
}
});
}
}
});
});

vietits
9 Oct 2012, 4:47 PM
Let walk thru what happens when you close a tab:
1. Determine the tab will be set active. The priority of finding will be:
- The previous active tab.
- The tab next to the closing tab.
- The tab previous the closing tab.
2. Fire 'close' event on the closing tab.
3. Set active tab to the tab determined in step 1.
So setting active tab that you've done in the close event handler will be overrided by setting active tab that's done by the framework in step 3.
However, if you still want tabpanel behaves as you mentioned, you should delay the action of setting active tab in the close event handler to make sure it will happen after the framework has done step 3.


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'+ (tabs.items.length + 1),
closable: true,
html: 'New tab',
listeners : {
close: function () {
Ext.defer(function(){
var len = tabs.items.length-1;
tabs.setActiveTab(len);
}, 1);
}
}
});
tabs.setActiveTab(tab);
}
});
}
}
});
});

wasima
9 Oct 2012, 8:48 PM
thanks vietits, a minor concern ,
At start , i have tab1 and + button , i click on + button twice i get tabs in order tab1 tab2 tab3 + button , now i am in tab1 , and i close tab3 , in normal browser behaviour the active tab now should be tab1 itself , but by this solution it sets active tab to tab2.

vietits
9 Oct 2012, 10:36 PM
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'+ (tabs.items.length + 1),
closable: true,
html: 'New tab',
listeners : {
close: function (tab) {
if(tab.active){ // only do setting active tab if closed tab is active
Ext.defer(function(){
var len = tabs.items.length-1;
tabs.setActiveTab(len);
}, 1);
}
}
}
});
tabs.setActiveTab(tab);
}
});
}
}
});
});

wasima
9 Oct 2012, 10:45 PM
thanks vietits ,
but by this solution issue in post #16 repeats ie
default there is tab1 and + button, on click of + button twice the order of buttons is normal ie tab1 tab2 tab3 + button , but when i close tab3 , tab2 should be activated but in above solution tab1 is getting activated .:(

vietits
9 Oct 2012, 10:53 PM
Try this


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'+ (tabs.items.length + 1),
closable: true,
html: 'New tab',
listeners : {
close: function (tab) {
if(tab == tabs.getActiveTab()){
Ext.defer(function(){
var len = tabs.items.length-1;
tabs.setActiveTab(len);
}, 1);
}
}
}
});
tabs.setActiveTab(tab);
}
});
}
}
});
});

wasima
10 Oct 2012, 9:14 AM
thanks vietits ,
but by this code , if i have tab1 + button , i click on + twice i have tab1 tab2 tab3 + button , my active tab now is tab3 and i close it , so tab2 should be active tab , ,but in above solution tab1 is active tab.
Here are final summary of tests it must pass through:
-- Click Button twice: Tab1, Tab2, Tab3 with Tab3 is active.
- Close Tab3: Tab2 becomes active, not Tab1.
- if + button clicked twice order is tab1 tab2 tab3 + , and if i manually click on tab1 and set it as active tab and without clicking on tab3 (not setting it as active tab ) close it then tab1 must be activated and not tab2.