PDA

View Full Version : Add new tab button in tab strip



Animal
18 Oct 2009, 6:27 AM
Usage:



plugins: [ Ext.ux.AddTabButton ],
createTab: function() { // Optional function which the plugin uses to create new tabs
return {
title: 'New Tab',
closable: true
};
},


Obviously it just creates a new defaultType (whatever you configure that to for your TabPanel - defaults to Ext.Panel). It's up to you to access the newly added item and manipulate it.



Ext.ux.AddTabButton = (function() {
function onTabPanelRender() {
this.addTab = this.itemTpl.insertBefore(this.edge, {
id: this.id + 'addTabButton',
cls: 'add-tab',
text: this.addTabText || '&#160',
iconCls: ''
}, true);
this.addTab.child('em.x-tab-left').setStyle('padding-right', '6px');
this.addTab.child('a.x-tab-right').setStyle('padding-left', '6px');
new Ext.ToolTip({
target: this.addTab,
bodyCfg: {
html: 'Add new tab'
}
});
this.addTab.on({
mousedown: stopEvent,
click: onAddTabClick,
scope: this
});
}

function createScrollers() {
this.scrollerWidth = (this.scrollRightWidth = this.scrollRight.getWidth()) + this.scrollLeft.getWidth();
}

function autoScrollTabs() {
var scrollersVisible = (this.scrollLeft && this.scrollLeft.isVisible()),
pos = this.tabPosition == 'top' ? 'header' : 'footer';
if (scrollersVisible) {
if (this.addTab.dom.parentNode === this.strip.dom) {
if (this.addTabWrap) {
this.addTabWrap.show();
} else {
this.addTabWrap = this[pos].createChild({
cls: 'x-tab-strip-wrap',
style: {
position: 'absolute',
right: (this.scrollRightWidth + 1) + 'px',
top: 0,
width: '30px',
margin: 0
}, cn: {
tag: 'ul',
cls: 'x-tab-strip x-tab-strip-' + this.tabPosition,
style: {
width: 'auto'
}
}
});
this.addTabWrap.setVisibilityMode(Ext.Element.DISPLAY);
this.addTabUl = this.addTabWrap.child('ul');
}
this.addTabUl.dom.appendChild(this.addTab.dom);
this.addTab.setStyle('float', 'none');
}
this.stripWrap.setWidth(this[pos].getWidth(true) - (this.scrollerWidth + 31));
this.stripWrap.setStyle('margin-right', (this.scrollRightWidth + 31) + 'px');
} else {
//
if ((this.addTab.dom.parentNode !== this.strip.dom)) {
var notEnoughSpace = (((this[pos].getWidth(true) - this.edge.getOffsetsTo(this.stripWrap)[0])) < 33)
this.addTabWrap.hide();
this.addTab.setStyle('float', '');
this.strip.dom.insertBefore(this.addTab.dom, this.edge.dom);
this.stripWrap.setWidth(this.stripWrap.getWidth() + 31);
if (notEnoughSpace) {
this.autoScrollTabs();
}
}
}
}

function autoSizeTabs() {
this.addTab.child('.x-tab-strip-inner').setStyle('width', '14px');
}

function stopEvent(e) {
e.stopEvent();
}

function onAddTabClick() {
this.setActiveTab(this.add(this.createTab? this.createTab() : {
title: 'New Tab'
}));
}

return {
init: function(tp) {
if (tp instanceof Ext.TabPanel) {
tp.onRender = tp.onRender.createSequence(onTabPanelRender);
tp.createScrollers = tp.createScrollers.createSequence(createScrollers);
tp.autoScrollTabs = tp.autoScrollTabs.createSequence(autoScrollTabs);
tp.autoSizeTabs = tp.autoSizeTabs.createSequence(autoSizeTabs);
}
}
};
})();

jay@moduscreate.com
18 Oct 2009, 9:12 AM
excellent dude. :)

Richie1985
5 Nov 2009, 1:12 AM
thank you, thats sooo cool, but how can i use iconCls: 'add' ?

Animal
6 Nov 2009, 1:26 AM
OK, now you can configure your TabPabel with



addTabText: '+'


To use text in the add tab button.

Or, use the class to give it an icon eg



div.x-tab-strip-wrap .add-tab a span.x-tab-strip-inner {
background: url(../../resources/images/default/dd/drop-add.gif) no-repeat center center;
}


To give

http://i131.photobucket.com/albums/p286/TimeTrialAnimal/addtabbutton.jpg

jocampo
20 Nov 2009, 12:46 PM
Hi Animal,

There is a way to add buttons with right aligment, independent of the aligment of the tabs. I mean, all the tabs would be with left aligment and the new tab buttons with right aligment??

moegal
4 Mar 2010, 6:30 AM
Animal, very nice

The tab was very narrow so I changed the css to:



div.x-tab-strip-wrap .add-tab a span.x-tab-strip-inner {
width:26px;
background: url(../../resources/images/default/dd/drop-add.gif) no-repeat center center;
}


Thanks, Marty

jeroenooms
12 Sep 2010, 6:47 PM
Hi Animal,

this is great. I would like to replicate the example from the screenshot you posted, however, there is a small rendering problem now. I'm using ext 3.2.1. I can display the whole icon by setting a higher width in css, but there is still something weird going on between the tabs and the '+' button. Could you maybe take a quick look? Other than that, fantastic work!
http://i54.tinypic.com/20zpxd5.png

Animal
12 Sep 2010, 9:35 PM
Poke it with Firebug and see what styles it needs.

jeroenooms
12 Sep 2010, 11:24 PM
Ah I just found out that it is not because of the ext version but because of the tabPosition: 'bottom'.

ody
15 Sep 2010, 6:28 AM
Cheers Animal!

I've cut down what you done as I just needed the button to allow someone to click it which calls a callback function that adds a new tab to the tabpanel. I think it is correct ..


Ext.ux.AddTabButton = (function() {
function onTabPanelRender() {
this.addTab = this.itemTpl.insertBefore(this.edge, {
id: this.id + 'addTabButton',
cls: 'add-tab',
text: this.addTabText || ' ',
iconCls: ''
}, true);
this.addTab.child('em.x-tab-left').setStyle('padding-right', '6px');
this.addTab.child('a.x-tab-right').setStyle('padding-left', '6px');
new Ext.ToolTip({
target: this.addTab,
bodyCfg: {
html: 'New tab'
}
});
this.addTab.on({
click: this.onAddTabClick,
scope: this
});
}

return {
init: function(tp) {
if (tp instanceof Ext.TabPanel) {
tp.onRender = tp.onRender.createSequence(onTabPanelRender);
}
}
};
})();

Which uses the config options in the tabpanel:



plugins: [ Ext.ux.AddTabButton ],
onAddTabClick : function(){ someFunctionThatAddsNewTab(); }

luanaa
4 Feb 2011, 12:05 PM
someone can 'explain how to implement the code for this feature?

tnx
Luanaa

hitekshu
7 Feb 2011, 8:25 PM
Hi Animal,
First of all i would like to thank you for providing this plugin.

I am getting an error in Firebug when i click on the Add button
item is undefined
anonymous(Object browserEvent=Event mouseout button=0 type=mouseout)ext-all-debug.js (line 30044)
anonymous(Object browserEvent=Event mouseout button=0 type=mouseout)ext-all-debug.js (line 30065)
h()ext-all-debug.js (line 4615)
[Break on this error] if(item.disabled){\n

This is the code in Ext-all-debug.js where the error points
30044 if(item.disabled){
30045 return {
30046 close : null,
30047 item : null,
30048 el : null
30049 };
30050 }
30051 }
What is this, and how can i solve it?

hitekshu
7 Feb 2011, 8:51 PM
Got it fixed. I hadmissed the implementation of stopEvent function on mouseDown

Christiand
8 Feb 2011, 6:40 AM
very good indeed ! Thank you! =D>

adam.jimenez
6 May 2011, 2:24 AM
This plugin is great. Has anyone got it working in Ext4?

ody
1 Jun 2011, 5:55 AM
I've had a go at converting this to extjs 4:



Ext.ux.AddTabButton = (function() {

function onTabPanelRender()
{
this.addTab = new Ext.tab.Tab({
text: '&#160',
icon: 'add.gif',
closable: false
});

// this.addTab.child('em.x-tab-left').setStyle('padding-right', '6px');
// this.addTab.child('a.x-tab-right').setStyle('padding-left', '6px');

this.addTab.on({
click: this.onAddTabClick,
scope: this
});

// I'm not sure about adding the tab to the tab bar with a massive index. Seems to work though.
this.getTabBar().insert(999, this.addTab);
}

return {
init: function(tp) {
if (tp instanceof Ext.TabPanel) {
tp.onRender = Ext.Function.createSequence(tp.onRender, onTabPanelRender);
}
}
};
})();

adam.jimenez
23 Mar 2013, 4:04 AM
The problem with that approach is that the addTab is not always visible when there is a tab scroller.

adam.jimenez
25 Mar 2013, 12:32 AM
I created an ext4 version that switches to a toolbar when overflow is reached:
http://www.sencha.com/forum/showthread.php?259660-Ext.ux.AddTabButton-Add-new-tab-button-in-tab-strip&p=950877#post950877

vela1606
13 Sep 2013, 4:46 AM
Here (http://www.sencha.com/forum/showthread.php?271882-Ext.ux.AddTabButton-plugin&p=996340#post996340) is my take of this plugin for ExtJs 4.