View Full Version : [3.x] Ext.ux.tabs.StripTools [v0.1]

1 Mar 2010, 10:51 AM
If you want to have some default Panel-Tools on your TabPanel-Strip, heres the Plugin to do it.
Tabpanels can have toolscopes for triggering the visibility of the tools.
Tested with ext 3.0 + ext 3.1.1, with ie6, FF, chrome + safari

var myStriptools = new Ext.ux.tabs.StripTools({

var tabs = new Ext.TabPanel( {
plugins : [ myStriptools ],
items : [... ],

For testing put all Files into:


1 Mar 2010, 8:30 PM

2 Mar 2010, 1:40 AM
I needed something like this, thanks!

2 Mar 2010, 4:31 AM
tabpanel toolscopes: triggering the visibility of the tools

1) DEFAULT toolscope: null
tabchange switches all tools with toolscope '*' ON, all others OFF

2) SPECIFIC toolscope: ['x','y','z']
tabchange switches all tools with indicated ids and all tools with toolscope '*' ON

3) EMPTY toolscope: ' '
tabchange is NOT changing the Tools

4) OFF toolscope: '-'
tabchange switches all tools OFF

5) ON toolscope: '*'
tabchange switches all tools ON

So if a Tool has toolscope '*' it will always be visible, except for tabs with toolscope '-'

2 Mar 2010, 10:53 PM
If I don't put the tabpanel into a window, the "strip region" will show on page top right.

3 Mar 2010, 12:33 PM
If you dont want to have your Tabs in a Window put them in a panel.
That will work.

RenderTo document.body has this top-right-bug.
Strangely, when you resize your browser to something like the half width and then close one Tab, the scroller thing is activated and the striptools are on their place.

14 Feb 2011, 5:45 AM
great work adding Tools in Tabtoolbar. but i need to add A Search field (Text input field) where user can type somethinga and hit button. how i can add any form component in strip.
i hope some1 will reply quickly.

18 Feb 2011, 2:39 AM
Ext.ux.tabs.StripTools are not supposed to replace a Toolbar, so adding Components is not supported at the Moment.
In fact the myTabPanel.striptoolsPanel is a normal Panel and could use a normal Toolbar. This concept was taken from the InlineToolbar UserExtension. You can play with that idea if you want

All I can give you now is a quickNdirty Combo-in-Strip Standalone, based on a TabPanel using stripTools with a gear tool

var yourTabPanel;

var comboPlaceHolderTool = yourTabPanel.striptoolsPanel.tools.gear;
var comboPlaceHolderParent = Ext.get(comboPlaceHolderTool.id).dom.parentNode;
var comboPlaceHolderDIV = Ext.get(comboPlaceHolderParent.id).insertFirst({
// create the combo instance
var comboInStrip = new Ext.form.ComboBox({
typeAhead: true,
style:'margin:0px 0 0 14px;',
triggerAction: 'all',
mode: 'local',
store: new Ext.data.ArrayStore({
id: 0,
fields: [
data: [[1, 'Schnitzel'], [2, 'Pommes'],[3, 'Salat']]
valueField: 'myId',
displayField: 'displayText'
you can style the combo a bit:

.xty_tab-striptools-wrap .x-form-field-wrap {margin-top:4px;}
.xty_tab-striptools-wrap .x-form-trigger {height:16px;}
.xty_tab-striptools-wrap .x-form-field {height:13px;}
should Look like this
Note, in this solution the tools do not work together with the Combo.

18 Feb 2011, 5:57 AM
thanks Simonici.
i will check ur provided code later today