Ext.ux.tab.Toolbar - Inline tab toolbar

[beavx420]

We used a modified version of a similar extension for ExtJS v3 (that never quite worked right)... took a few minutes to upgrade and figured it would be nice to share!

Basically it will create a toolbar inline with the tabs of a tab panel. Right now it only docks the toolbar to the right-side of the tabbar and you must define the width of the toolbar otherwise it won't work properly (couldn't figure out how to get the size of the toolbar)

26212

Sample:


Ext.define('TestTabs', {
extend: 'Ext.tab.Panel',
requires: [
'Ext.ux.tab.Toolbar'
],

initComponent: function() {
Ext.apply(this, {
activeTab: 0,
plugins: [
Ext.create('Ext.ux.tab.Toolbar', {
width: 180,
items: [{
text: 'New Page',
tooltip: 'Add a new page to hold widgets'
}, {
text: 'Reset Layout',
tooltip: 'Restores the default layout'
}]
})
],
items: [{
title: 'Test Tab'
}]
});

this.callParent();
}
});


Plugin Code:


/**
* @class Ext.ux.tab.Toolbar
* @extends Object
* Plugin (ptype = 'tabtoolbar') for adding a toolbar to a TabBar.
* @constructor
* @param {Object} config Configuration options
* @ptype tabtoolbar
*/
Ext.define('Ext.ux.tab.Toolbar', {
alias: 'plugin.tabtoolbar',

constructor: function(config) {
config = config || {};
Ext.apply(this, config);
},

/**
* @cfg {String} position The position where the toolbar will appear inside the tabbar. Supported values are
* 'left' and 'right' (defaults to right).
*/
position: 'right',

//private
init: function(tabPanel) {
var me = this;

Ext.apply(tabPanel, me.parentOverrides);
me.tabPanel = tabPanel;
me.tabBar = tabPanel.tabBar;

// ensure we have a valid position
if (this.position !== 'left') {
this.position = 'right';
}

me.tabBar.on({
afterlayout: function() {
me.layout = me.tabBar.layout;

// we need to subtract the toolbar width from this function result
me.layout.getLayoutTargetSize = Ext.Function.bind(me.getLayoutTargetSize, me);

var scrollerEl = me.tabBar.body.child('.' + Ext.baseCSSPrefix + 'box-scroller-' + this.position),
contentEl = me.tabBar.body.createChild({
style: 'width:' + this.width + 'px;',
cls: Ext.baseCSSPrefix + 'tab-toolbar-' + this.position
}, scrollerEl);

// if scroller is not created (only one tab)
// we need to add the floating style to the tab bar
if (scrollerEl == undefined) {
me.tabBar.body.child('.' + Ext.baseCSSPrefix + 'box-inner').setStyle({
float: this.position == 'left' ? 'right' : 'left'
})
}

me.toolbar = new Ext.toolbar.Toolbar({
cls: 'x-tab-toolbar',
renderTo: contentEl,
items: this.items || []
});
},
scope: this,
single: true
});
},

/**
* Override the default getLayoutTargetSize of the tabbar layout so we
* can subtract the width of the toolbar
*/
getLayoutTargetSize: function() {
var me = this,
result = Ext.getClass(me.layout).prototype.getLayoutTargetSize.apply(me.layout, arguments);

result.width -= this.width;
return result;
}

});


Plugin CSS:


/**
* Ext.ux.tab.Toolbar styles
*/
.x-tab-toolbar-right { z-index: 6; float: right; }
.x-tab-toolbar-right .x-tab-toolbar { padding: 0 2px; border-width: 0 0 0 1px; }
.x-tab-toolbar-left { z-index: 6; float: left; }
.x-tab-toolbar-left .x-tab-toolbar { padding: 0 2px; border-width: 0 1px 0 0; }


I included a screenshot that shows off the plugin in action. Any improvements are welcomed...

Thanks!

[afernandes.ng]

I detect a little error..

scrollerEl = me.tabBar.body.child('.' + Ext.baseCSSPrefix + 'box-scroller-right')

[kreeve_ctisn]

beavx420,

if you replace the Ext.toolbar.Toolbar creation code with the following, it will then auto compute the width.



me.toolbar = new Ext.toolbar.Toolbar({
cls: 'x-tab-toolbar',
renderTo: contentEl,
items: this.items || [],
listeners: {
'afterrender': function() {
var tb = this;
var w = tb.getWidth(),
nw = 0;

tb.items.each(function(item) { nw += item.getWidth(); });
if (w < nw) {
tb.setWidth(nw+w);
}
}
}
});
Many thanks for creating this plugin :)

[kreeve_ctisn]

Seems my previous fix, fixes the toolbar but not it's container.

Will investigate a fix.

[beavx420]

Thanks guys!!

I updated the original post... fixed the typo and added a 'position' config option that allows the toolbar to sit on either the left or right side of the tabbar

[Buzzwords]

I really like this plugin but tab scroller buttons still appear in their normal positions. When the toolbar is present the scrollers should be confined to the sides of the tabs. I'm using the default tab-toolbar position:'right', and the tab scroller on the right appears to the right of the tab-toolbar. I'd like to see it appear to the left of the tab-toolbar in this case. I'll edit this post if I come up with a solution.

That said, this functionality (the tab-toolbar) could be very useful. It saves vertical space by not having to include another toolbar. It also provides a way to specify a button that can return the user to a default tab. If not this solution then it'd be great to have some way to lock one or more tabs (going from the left) in place, so that the others scroll but locked tabs remain visible.

[atian25]

good job~
an question:
I want to show tab title as a splitbutton with menu
so give tabConfig:{menu:[{text: 'Item 1'},{text: 'Item 2'}]} to panel
click title can show menu, but arrow is missing,I think it's css problem.
anyone could help,thanks

[kreeve_ctisn]

small update, I noticed that since the toolbar is not linked to the tab panel it's actually left behind in memory..

Have added the following code to the listeners and this fixes it


beforedestroy: function() {
me.toolbar.destroy();
},


This makes the full plugin as follows:


/**
* @class Ext.ux.tab.Toolbar
* @extends Object
* Plugin (ptype = 'tabtoolbar') for adding a toolbar to a TabBar.
* @constructor
* @param {Object} config Configuration options
* @ptype tabtoolbar
*/
Ext.define('Ext.ux.tab.Toolbar', {
alias: 'plugin.tabtoolbar',

constructor: function(config) {
config = config || {};
Ext.apply(this, config);
},

/**
* @cfg {String} position The position where the toolbar will appear inside the tabbar. Supported values are
* 'left' and 'right' (defaults to right).
*/
position: 'right',

//private
init: function(tabPanel) {
var me = this;
var toolbarId = me.id;
delete me.id;

Ext.apply(tabPanel, me.parentOverrides);
me.tabPanel = tabPanel;
me.tabBar = tabPanel.tabBar;

// ensure we have a valid position
if (this.position !== 'left') {
this.position = 'right';
}

me.tabBar.on({
afterlayout: function() {
me.layout = me.tabBar.layout;

// we need to subtract the toolbar width from this function result
me.layout.getLayoutTargetSize = Ext.Function.bind(me.getLayoutTargetSize, me);

var scrollerEl = me.tabBar.body.child('.' + Ext.baseCSSPrefix + 'box-scroller-' + this.position),
contentEl = me.tabBar.body.createChild({
style: 'width:' + this.width + 'px;',
cls: Ext.baseCSSPrefix + 'tab-toolbar-' + this.position
}, scrollerEl);

// if scroller is not created (only one tab)
// we need to add the floating style to the tab bar
if (scrollerEl == undefined) {
me.tabBar.body.child('.' + Ext.baseCSSPrefix + 'box-inner').setStyle({
'float': this.position == 'left' ? 'right' : 'left'
})
}

me.toolbar = new Ext.toolbar.Toolbar({
cls: 'x-tab-toolbar',
renderTo: contentEl,
items: this.items || [],
id: toolbarId
});
},
beforedestroy: function() {
me.toolbar.destroy();
},
scope: this,
single: true
});
},

/**
* Override the default getLayoutTargetSize of the tabbar layout so we
* can subtract the width of the toolbar
*/
getLayoutTargetSize: function() {
var me = this,
result = Ext.getClass(me.layout).prototype.getLayoutTargetSize.apply(me.layout, arguments);

result.width -= this.width;
return result;
}

});

[zillabyte]

Thanks for your contribution. Got this working pretty easily. One thing, when you resize the browser the buttons don't resize with the tab panel. Not sure if this should be done by the tab panel or the plugin.

[PHaroZ]

Due to layout reengineering in Ext4.1 this plugin need to fixed.

My work :

Ext.define('Ext.ux.tab.Toolbar', {
alias : 'plugin.tabtoolbar',

constructor : function(config) {
Ext.apply(this, config || {});
},

/**
* @cfg {String} position The position where the toolbar will appear inside the tabbar. Supported values are
* 'left' and 'right' (defaults to right).
*/
position : 'right',

// private
init : function(tabPanel) {
var me = this;
var toolbarId = me.id;
delete me.id;

Ext.apply(tabPanel, me.parentOverrides);
me.tabPanel = tabPanel;
me.tabBar = tabPanel.tabBar;

// ensure we have a valid position
if (this.position !== 'left') {
this.position = 'right';
}

me.tabBar.on({
afterlayout : function() {
me.layout = me.tabBar.layout;

// we need to subtract the toolbar width from this function result
me.layout.availableSpaceOffset += this.width;

var scrollerEl = me.tabBar.body.child('.' + Ext.baseCSSPrefix + 'box-scroller-' + this.position), contentEl = me.tabBar.body
.createChild({
style : 'width:' + this.width + 'px;',
cls : Ext.baseCSSPrefix + 'tab-toolbar-' + this.position
}, scrollerEl);

// if scroller is not created (only one tab)
// we need to add the floating style to the tab bar
if (scrollerEl == undefined) {
me.tabBar.body.child('.' + Ext.baseCSSPrefix + 'box-inner').setStyle({
'float' : this.position == 'left' ? 'right' : 'left'
})
}

me.toolbar = new Ext.toolbar.Toolbar({
cls : 'x-tab-toolbar',
renderTo : contentEl,
items : Ext.Array.from(this.items),
id : toolbarId
});
},
beforedestroy : function() {
me.toolbar.destroy();
},
scope : this,
single : true
});
}

});

Thanks for this usefull plugin,

PHaroZ

[pavanextjs]

Hi,

Thanks for the nice plug-in, very useful for me in my app to show the 'Logout' link. The problem is i'm not seeing the link until i either re size the browser window or selecting at least one of the existing tabs in the tabpanel.

ExtJS - V4.1.0Beta
Browsers: FF9.0.1/IE9
plug-in Version: PHaroZ's version for Ext4.1

Usage:

xtype: 'tabpanel',
...
plugins: [Ext.create('Ext.ux.tab.Toolbar', {
width: 120,
items: [{
xtype: 'label',
text: 'Welcome, User ',
tooltip: 'Add a new page to hold widgets'
},
{
xtype: 'tbspacer'
},
{
xtype: 'tbspacer'
},
{
xtype: 'label',
html: '<a class="imagelink" href="dev-login.aspx?action=logout">Logout</a>'
},
{
xtype: 'tbspacer'
}]
})]...

Any ideas why this is happening?


Thanks in advance.
Pavan.

[pavanextjs]

Guys, anybody got any clue ??

[dawesi]

there 's a simliar extension here (http://www.sencha.com/forum/showthread.php?176963-Its.tab.plugin.Tool) also

[pavanextjs]

Thanks dawesi, i will try that one.