PDA

View Full Version : [2.x] Extension : Inline Toolbar TabPanel (Ext.ux.InlinetoobarTabPanel)



dawesi
6 Feb 2008, 5:30 PM
This is a tab panel that has a toolbar inline with the tabs rather than below them (see thumbnail). It accomodates for scrolling tabs (if activated)

Drop the following into your examples/tabs folder:

Versions:
Version 0.1 alpha (http://extjs.com/forum/attachment.php?attachmentid=4354&d=1202348755)

NEW : Ext 3.x plugin discussion here (http://extjs.com/forum/showthread.php?t=65354):

svdb's latest version: download (http://extjs.com/forum/attachment.php?attachmentid=10843&d=1228443984) (post (http://extjs.com/forum/showthread.php?p=259263#post259263))
Tested on:
Windows : Firefox 2.x/3.x | IE6.x | Safari 3.0.x

Any comments / hacks / suggestions very welcome :-)

Bugs/Issues:
(see screenshot 2) in IE there is a gap between the right scroll bar of around 1px when tab scroll is shown
Container resizing issue (@mchipman (http://extjs.com/forum/showthread.php?p=129164#post129164))To List:
Refactor way in which code traverses the ext dom/objects
Create a plugin version
Add property 'useTabBg' to use background tab styles
allow for left and/or right toolbars (or items)
add a 'tools' config item: close (x), config, add (+), help (?) (normal button sized tools)
add reference to currently selected tab (helper function?: this.getActiveTab() inherited...) (from Saki)
add config item so that toolbar changes with tabs..

tof
7 Feb 2008, 2:19 AM
Thanks for sharing !

jsakalos
18 Feb 2008, 8:38 PM
One easy question before I download and use it and before I vote "Definitely":

Is a reference to currently active tab available within your Extension?

I'm gonna to use it to replace tab contextmenus.

dawesi
25 Feb 2008, 11:16 PM
@saki : not in the first version... I've added it to my todo list for the second release... (early next week)

this should be easy to implement... any suggestions on how the config item for would operate would be appreciated. I'm assuming if a config param in each tab is available say named ittb : {{'<<-',left toolbar Items}],[{'->>'right toolbar Items}]} then add the toolbar to an object that manages the menus without having to destroy any dom objects so no orphans.

thanks to v2.0.2 ownerCt in buttons now, this should also allow you to place methods on the component and make them super easy to grab... maybe I should add a method this.getOwnerCmp() to the toolbars.

I'll also add a method getActiveTabToolbar() as a helper method and set handlers on the activate and deactivate event, lots to do here... Hmm... to the batcave...

mchipman
25 Feb 2008, 11:27 PM
I've been trying to make the Ext.ux.InlinetoolbarTabPanel work... but there is something wrong during rendering... I can't get it to work correctly... maybe because I'm dynamically adding new tabs via code, which this plugin isn't respecting the change in tab scroll area or something... likewise, on resizing the browser window, I can't get the scrollers to show on the tabs...

I'm wondering what the status of this plug-in is... I see that there will be another version sometime in March. Is there a more current update as of now (2-26-08)?

Thanks,

-Mark

dawesi
25 Feb 2008, 11:39 PM
@mchipman: I'll have a look at this tonight...(GMT+10AEST) the next version of this will be available next Monday (lots of new functionality)... as I'll packaging the release on the weekend.

Dynamic tabs... must be something to do with the sizing functions, I'm going to have to over-ride them.. yup... that's why I love the forums... other use cases come up... thanks... it will be in Moday's build. :-) I might have to post some fixes to the core team to fix the calls on the tab containers. some refer to the outer container, some to the inner... in the meantime, I'll code around it...

Can you also provide your test case senario for me.... man I sooo need to finish my ext-ux.com/extforge.org sites... (coming in March!) these forums are sooo limited so you can post your example against the current build...

juzy
9 Mar 2008, 9:13 AM
Greetings! What progress in development? When there will be a following version?

dawesi
10 Mar 2008, 5:13 AM
sorry for the delay, spent the w/e with family... stay tuned...

juzy
12 Mar 2008, 1:17 AM
Hi! How at a turn on the full screen ("F11") for "x-tab-panel-header" set width?

garraS
12 Mar 2008, 6:02 PM
How can I apply to the Border Layout Example (http://extjs.com/deploy/dev/examples/layout/complex.html)?

garraS

maxim.krestovsky
13 Mar 2008, 11:29 AM
I have made some changes in your code, may be it would be interesting




Ext.namespace('Ext.ux.InlineToolbarTabPanel');

Ext.ux.InlineToolbarTabPanel = function(config) {
Ext.apply(this, config);
this.id = this.getId();
this.config = config;
this.tbarsWidth = 0;
Ext.ux.InlineToolbarTabPanel.superclass.constructor.call(this, config);
};

// plugin code
Ext.extend(Ext.ux.InlineToolbarTabPanel, Ext.TabPanel, {

getScrollArea : function(){
this.tbarsWidth = 0
for (var i=0;i<this.config.toolbars.length;i++) {
this.tbarsWidth += this.config.toolbars[i].width;
}
var newScrollArea = this.el.dom.clientWidth-this.tbarsWidth;
return parseInt(newScrollArea, 10) || 0;
},

afterRender : function() {
Ext.ux.InlineToolbarTabPanel.superclass.afterRender.call(this);
this.renderToolbar();
},

onResize : function(w, h) {
Ext.ux.InlineToolbarTabPanel.superclass.onResize.call(this, w, h);
this.renderToolbar();
},

autoSizeTabs : function () {
Ext.ux.InlineToolbarTabPanel.superclass.autoSizeTabs.call(this);
this.renderToolbar();
},

autoScrollTabs : function () {
Ext.ux.InlineToolbarTabPanel.superclass.autoScrollTabs.call(this);
this.renderToolbar();
},

renderToolbar : function() {
for (var i=0;i<this.config.toolbars.length;i++) {
var tbar = this.config.toolbars[i];
var toolbarDiv = tbar.id || this.id + 'Toolbar' + i;
var toolbarAlign = tbar.align || 'right';
if (!document.getElementById(toolbarDiv)) {
if (toolbarAlign.toLowerCase() != 'left' && toolbarAlign.toLowerCase() != 'right') {
Ext.DomHelper.insertBefore(this[this.stripTarget], '<div id="'+toolbarDiv+'" class="x-tab-toolbar-wrap" style="height:26px;overflow:hidden;border-left:0px;border-top:1px solid #8DB2E3;margin-left:0px;"></div>');
} else {
Ext.DomHelper.insertBefore(this[this.stripTarget], '<div id="'+toolbarDiv+'" class="x-tab-toolbar-wrap" style="float:'+ toolbarAlign +';height:26px;overflow:hidden;border-left:0px;border-top:1px solid #8DB2E3;margin-left:0px;"></div>');
}
var toolbar = new Ext.Panel({
renderTo: toolbarDiv,
border: false,
tbar: tbar.tbar
});
}
toolbarExt = Ext.get(toolbarDiv);
toolbarExt.setWidth(tbar.width || 150);
}
if (Ext.isIE) {
if (!this.scrolling) {
this.strip.setWidth(this.getScrollArea()-2);
} else {
}
this[this.stripTarget].setWidth(this.getScrollArea());
} else {
this[this.stripTarget].setWidth('auto');
}
});
Ext.reg('inlinetoolbartabpanel',Ext.ux.InlineToolbarTabPanel)


example code:



Ext.onReady(function(){

var tabs = new Ext.ux.InlineToolbarTabPanel({
renderTo : 'ct',
id : 'myTabs',
text : 'yoyo',
width : "100%",
toolbars : [{
id:'id1',
width:65,
align:'left',
tbar: [{ text:'File' },'->',{ text:'Edit' }]
},{
width:120,
align:'right',
tbar: [new Ext.form.TextField({ width:85 }),'->',{ text:'Go' }]
}],
height : 400,
toolbarLocation : 'left',
enableTabScroll : true,
tabPosition : 'top',
activeTab : 0,
frame : false,
defaults : {autoHeight: true},
items :[
{title: 'Tab Number 1'},
{title: 'Tab Number 2'},
{title: 'Tab Number 3'},
{title: 'Tab Number 4'}
]
});
});



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="ext/ux/Ext.ux.InlineToolbarTabPanel.css">
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all-debug.js"></script>
<script type="text/javascript" src="ext/ux/Ext.ux.InlineToolbarTabPanel.js"></script>
<script language='javascript' src='test.js'></script>
</head>
<body>
<span id="ct"/>
</body>
</html>

siebertm
13 Mar 2008, 11:45 AM
I have made some changes in your code, may be it would be interesting


works even in my setup (which the original version did not)
thank you!

garraS
13 Mar 2008, 4:52 PM
@maxim.krestovsky (http://extjs.com/forum/member.php?u=30059)

Thanks! That code resolved my problem!

garraS

dawesi
13 Mar 2008, 5:15 PM
@maxim... nice one :-) I'll see what can be used for the second version I'm just finishing now...

jo2008
14 Mar 2008, 1:45 AM
Hi,
I was trying to add a toolbar to the right of the tabs and both in the old and in the new version the content of the tabpanel was cut off when it was underneath the toolbar.

w011117
18 Mar 2008, 1:17 PM
Hi,
I was trying the new version and it seems as if one of my tabs that has a layout border in it is being cutoff as well..

Thanks,
Timmer

garraS
18 Mar 2008, 3:54 PM
If you use the maxim.krestovsky (http://extjs.com/forum/member.php?u=30059) changes, you must have configurate the height of the DIV on this line:

Ext.DomHelper.insertBefore(this[this.stripTarget], '<div id="'+toolbarDiv+'" class="x-tab-toolbar-wrap" style="float:'+ toolbarAlign +';height:26px;overflow:hidden;border-left:0px;border-top:1px solid #8DB2E3;margin-left:0px;"></div>');


garraS

jo2008
19 Mar 2008, 2:01 AM
The line you posted is in maxim's script already. It has height set to 26px.
Just noticed now, that it seems to work in IE7 but not in Firefox.

I played around with it a little now thanks to your "height-hint".

The closest I came to the desired looks, i changed the following

1.) in the insertBefore statements I changed:
border-top:1px solid #8DB2E3;
to
border-bottom:1px solid #8DB2E3;

2.) A couple of lines below, I added the red line:

...
toolbarExt.setWidth(tbar.width || 150);
toolbarExt.setHeight(23);

3.)
After the for-loop I put:

this[this.stripTarget].setHeight(23);


Now the height of both toolbar and stiptarget are the same and seem to integrate into the tabpanel better than before. Still doesn't look native though..

Maybe s.o. with greater insight can put this to perfection.


Edit:
Firefox 2.0 and IE7 do it ok.
In IE6 the layout gets messed up. It renders it into 2 line, the firs line containing the toolbar and the second line the tabs ( with white space on the right where the toolbar should be)

ibrator
28 Mar 2008, 1:00 PM
Edit:
Firefox 2.0 and IE7 do it ok.
In IE6 the layout gets messed up. It renders it into 2 line, the firs line containing the toolbar and the second line the tabs ( with white space on the right where the toolbar should be)

I had the same problem using maxim.krestovsky changes. In solving the 2 line problem I made the following modifications:

Change the line:
this[this.stripTarget].setWidth(this.getScrollArea());

to this:
this[this.stripTarget].setWidth(this.getScrollArea()+(this.config.toolbar.width*.5));

That put the inline bar correctly. But it left a white gap at line 2. This I found out is due to the fact that the panels used as containers for the toolbars have no body which IE6 did not ignore. The solution was to set the height to zero in the Ext.Panel property:

So add height:0;

There is still a gap between the tab bar and the inline bar which I haven't been able to remove as seen in the attached.

cblin
9 Apr 2008, 6:25 AM
Hi,

the myTabs id is hardcoded in the code => can not be used if you named it otherwise

patch:

1st line of ctor: if (!config.id) config.id = 'tabpanel-' + Math.round(Math.random() * 10000);

ligne 34: headerEl = Ext.query('#'+this.config.id+' div[class^=x-tab-panel-header]');


hope this helps

note: could the extjs team think about using this to implement a collapsible TabPanel ?

temporary
14 Apr 2008, 7:58 AM
Any news on v0.2, dawesi?

jo2008
16 Apr 2008, 12:19 AM
My inlinetoolbar doesn't show up in Safari 3.1. Firefox & IE are fine.

Can anybody confirm that?

code loki
22 Apr 2008, 2:59 PM
The sample code from maxim.krestovsky (http://extjs.com/forum/member.php?u=30059) makes mention of a css file that I don't see anywhere (Ext.ux.InlineToolbarTabPanel.css). Does anybody know the content of that css file?

thanks in advance,
c. loki

MtAiryEd
30 Apr 2008, 7:11 AM
Thanks so much for this!! It's JUST what I needed.

One question: There is a div with the class "x-tab-panel-header". In Firebug, it shows that the border is 1px. The div does not have an ID, and I'd like to set that border to zero. Is there any way to access that from my script and over-ride that?

Thanks again.

MtAiryEd
30 Apr 2008, 9:20 AM
Nevermind. I fixed it. I'm not sure if there is a more graceful fix. Here is how I did it. Bear in mind that the InlineToolbarPanel has the ID of 'tabsWithExtension':


Ext.fly("tabsWithExtension").dom.getElementsByTagName('div')[0].setAttribute("class", "x-tab-panel-header-noborder");

MtAiryEd
1 May 2008, 9:13 AM
I am having issues with this. I believe it is because I am not including the "renderTo" config param, since I have no markup in my code. I am simply placing the InlineTbar obj in the items of the enclosing object.

Anyone else using this the same way and getting it to work?

Thanks.

tarini
2 May 2008, 1:03 AM
Good ux guys!! It works very well :)

my customers will be vary happy ;)

tarini
2 May 2008, 5:17 AM
Guys i've got some problems with firefox 3 beta 5

the toolbar renders OVER the tabpanel...

I'm using the maxim.krestovsky version of the plugin...

Lobos
7 May 2008, 9:35 AM
I had the same problem using maxim.krestovsky changes. In solving the 2 line problem I made the following modifications:

Change the line:
this[this.stripTarget].setWidth(this.getScrollArea());

to this:
this[this.stripTarget].setWidth(this.getScrollArea()+(this.config.toolbar.width*.5));

That put the inline bar correctly. But it left a white gap at line 2. This I found out is due to the fact that the panels used as containers for the toolbars have no body which IE6 did not ignore. The solution was to set the height to zero in the Ext.Panel property:

So add height:0;

There is still a gap between the tab bar and the inline bar which I haven't been able to remove as seen in the attached.

That solution gave me an error i did it like this:

this[this.stripTarget].setWidth(this.getScrollArea()-3);

it would be nice if someone could revisit this as it is such a handy UX, but i feel it is a bit buggy still.

jay@moduscreate.com
7 May 2008, 11:55 AM
I think this has potential.

I found that the tab scrolls too var left.

jay@moduscreate.com
7 May 2008, 11:58 AM
Your constructor doesn't need to apply config to itself and set the this.config - it's redundant.

svdb
14 May 2008, 5:13 AM
Has anyone got this ux working for FF2, IE7 *and* IE6 ?

IE6 seems to still have issues with this ux.

jay@moduscreate.com
14 May 2008, 7:05 AM
I had to totally rewrite this ux, but cannot release due to an NDA, etc.

I can tell you that it was done within 20 lines, extending the tabpanel,
extending afterRender method and overriding the getScrollArea and adding a fixTabStripWidth method.

in the afterRender method, call the superclass's afterRender method. I insertfirst a div to the tabstrip's dom parentnode parentnode object.

then i render the tabstriptoolbar to the newly inserted div.

i set the height of the element to 27 pix.

apply an afterlayout event handler to the fixtabstripwidth.


getscrollarea simply modifies the tabpanel getscrollarea , but takes into account the toolbar, reducing it's size to accomodate that.

the fix tabstrip width method simply aligns the toolbar to the upper right of the tabstrip.

hope this helps anyone looking to do the same thing.

tfulmino
14 May 2008, 10:08 AM
Great control - thanks for sharing!

Does this support external links in an IFrame?

svdb
16 May 2008, 6:52 AM
@jgarcia@tdg-i.com

Thanks for the info. I was able to assemble a working sample quickly following your guidelines...

On IE7 and IE6, what trick do you apply to make the tbar's panel apear inline with the tabstrip? (using float in the tbar's style didn't work)

here's what I have for now:



,afterRender : function(){
cwc.perspective.TabPanel.superclass.afterRender.call(this);
var elem = Ext.DomHelper.insertFirst(this[this.stripTarget].dom,
'<div id="'+this.toolbarDiv+'" class="x-tab-toolbar-wrap" style="float:left;height:25px;overflow:hidden;"></div>', true);
var tbar = this.initialConfig.toolbars[0];
var toolbar = new Ext.Panel({
renderTo: elem
,border: false
,width:50
,tbar: tbar.tbar
,height:0
});
this.strip.setWidth(this.getScrollArea());
}


(some of the stuff is hard coded but I'll clean that up later when everything's working)

SV

svdb
19 May 2008, 3:59 AM
So, it seems no one is ever testing anything on IE6 anymore...
Too bad, because most of my customers still use IE6, and none of the previous posts on this thread ever worked on IE6: tabs and toolbars always displayed on two different "lines".

After spending too much time on this I finally came up with an implementation that displays exactly the same on all three browser versions: FF2, IE7 and most importantly IE6.

However, fixing inline of the tabstrip with the toolbars broke the tabscrolling.
That's ok in my apps because I have no use case for tabscolling. I just mention it as a disclaimer.

Here's the code which you'll also find in the attached zip file.

Ext.ux.InlineToolbarTabPanel.js


Ext.namespace('Ext.ux.InlineToolbarTabPanel');
Ext.ux.InlineToolbarTabPanel = Ext.extend(Ext.TabPanel, {
enableTabScroll:false
,afterRender : function(){
Ext.ux.InlineToolbarTabPanel.superclass.afterRender.call(this);
var stripDom = this[this.stripTarget].dom;
var tabs = '<td style="width:100%;border-right:0px;"><div id="td_tabs" style="height:26px;"></div></td>';
var tbars = this.initialConfig.toolbars;
var leftTbar, rightTbar;
for (var i=0, maxi=tbars.length; i<maxi; i++) {
if (tbars[i].align.toLowerCase() == 'left') {
leftTbar = tbars[i];
} else {
rightTbar = tbars[i];
}
}
var leftTbarId = (leftTbar) ? leftTbar.id : 'leftTbar';
var rightTbarId = (rightTbar) ? rightTbar.id : 'rightTbar';
var style = "border-top:1px solid #8DB2E3;margin:0px;height:26px;";
var leftTool = '<td><div id="'+leftTbarId+'" class="x-tab-toolbar-wrap" style="border-left:1px solid #8DB2E3;'+style+'"></div></td>';
var rightTool = '<td><div id="'+rightTbarId+'" class="x-tab-toolbar-wrap" style="border-right:1px solid #8DB2E3;'+style+'"></div></td>';
var tableStart = '<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr>';
var tableEnd = '</tr></table>';
var table = tableStart + (leftTbar?leftTool:'') + tabs + (rightTbar?rightTool:'') + tableEnd;

var parentNode = stripDom.parentNode;
parentNode.removeChild(this[this.stripTarget].dom);
Ext.DomHelper.insertFirst(parentNode, table);
var tabs = Ext.get("td_tabs");
tabs.dom.appendChild(stripDom);
if (leftTbar) {
new Ext.Panel({
renderTo:leftTbarId
,border:false
,width:leftTbar.width
,tbar: leftTbar.tbar
,height:0
});
}
if (rightTbar) {
new Ext.Panel({
renderTo:rightTbarId
,border:false
,width:rightTbar.width-1
,tbar: rightTbar.tbar
,height:0
});
}
this.fixTabStripWidth();
}
,initEvents : function(){
Ext.ux.InlineToolbarTabPanel.superclass.initEvents.call(this);
this.on('afterlayout', this.fixTabStripWidth, this);
}
,fixTabStripWidth : function() {
var w = this.getScrollArea();
this.strip.setWidth(w-((Ext.isIE)?2:0));
this[this.stripTarget].setWidth(w);
this[this.stripTarget].first().setWidth(w);
}
,getScrollArea : function(){
var w = 0;
for (var i=0;i<this.initialConfig.toolbars.length;i++) {
w += this.initialConfig.toolbars[i].width;
}
w = this.el.dom.clientWidth - w - 1;
return w;
}
});
Ext.reg('inlinetoolbartabpanel',Ext.ux.InlineToolbarTabPanel);


tabs-extension.js



Ext.onReady(function(){
var tabs = new Ext.ux.InlineToolbarTabPanel({
renderTo:'ct'
,id:'myTabs'
,width:600
,toolbars:[{
id:'id1'
,width:50
,align:'left'
,tbar:[{text:'save',disabled:false}]
},{
id:'id2'
,width:50
,align:'right'
,tbar:[{iconCls:'ux-collapse'},{iconCls:'ux-close'}]
}]
,height:400
,tabPosition:'top'
,activeTab:0
,frame:false
,items:[{title: 'Tab Number 1'},{title: 'Tab Number 2'},{title: 'Tab Number 3'}]
});
});

tarini
19 May 2008, 4:54 AM
Thanks for your script but it doesn't work...

this is my code



this.northTabPanel = new Ext.ux.InlineToolbarTabPanel({
activeTab: 0,
items: new Ext.Panel({
html:"HomePage",
title:"GExt",
iconCls:"icon-gext",
id:"northHomePanel"
}),
height: "50%",
enableTabScroll: true,
split: true,
toolbars : [{
width: 70,
align:'right',
tbar: [{
xtype:'button',
tooltip:this.expandTabPanelText,
text:'',
iconCls: 'icon-maximize',
handler: this.expandTabPanel.createDelegate(this, ["N"])
},{
xtype:'button',
tooltip:this.collapseTabPanelText,
text:'',
iconCls: 'icon-minimize',
handler: this.expandTabPanel.createDelegate(this, ["S"])
},{
xtype:'button',
tooltip:this.collapseTabPanelText,
text:'',
iconCls: 'icon-restore',
handler: this.restoreTabPanel.createDelegate(this),
scope: this
}]
}]
});



it doesn't render the toolbar and left a right white space (with the toolbar width) on the tabpanel

jay@moduscreate.com
19 May 2008, 5:27 AM
@jgarcia@tdg-i.com

Thanks for the info. I was able to assemble a working sample quickly following your guidelines...

On IE7 and IE6, what trick do you apply to make the tbar's panel apear inline with the tabstrip? (using float in the tbar's style didn't work)

here's what I have for now:



,afterRender : function(){
cwc.perspective.TabPanel.superclass.afterRender.call(this);
var elem = Ext.DomHelper.insertFirst(this[this.stripTarget].dom,
'<div id="'+this.toolbarDiv+'" class="x-tab-toolbar-wrap" style="float:left;height:25px;overflow:hidden;"></div>', true);
var tbar = this.initialConfig.toolbars[0];
var toolbar = new Ext.Panel({
renderTo: elem
,border: false
,width:50
,tbar: tbar.tbar
,height:0
});
this.strip.setWidth(this.getScrollArea());
}


(some of the stuff is hard coded but I'll clean that up later when every thing's working)

SV

that's great to hear. Thanks for sharing your work thus far :)

try an insert first on this.stripWrap.dom.parentNode.parentNode with the style of float: right, position absolute and a large z index.

apply an afterlayout listener that will align the strip toolbar container to the element of the tab panel. align as top right, with the offset of the inverse result toolbar's width and a y-offset of zero.

also, set the width of the stripwrap's parent node to the difference of this.el's width to the striptoolbar's el width.

hope this helps :)

svdb
20 May 2008, 12:41 AM
Thanks for your script but it doesn't work...
it doesn't render the toolbar and left a right white space (with the toolbar width) on the tabpanel

Yep, I know, it only works with the sample config page I provided. Those only reflected the requirements for the project I'm working on. It might not work, or it might need some adjustments, in your own project. Sorry about that.

I'm currently trying another implementation that doesn't involve using a table. I'll post my results, um, if I succeed...

Yoris
2 Jun 2008, 12:26 PM
Hi everybody... is there an update on this ux ? is it still active ?
thanks in advance....

jfbasco
1 Jul 2008, 5:29 AM
Much thanks to svdb and his the code he posted. I was able to use his code for Ext.ux.InlineToolbarTabPanel.js and get the scrolling to work by moving the functionality out of the afterRender event to the onRender function, as well as removing a call to resize the header in the adjustBodyWidth function. I've tested in FF2 & IE7 with great success and you can find the code below.

Ext.ux.InlineToolbarTabPanel.js


Ext.namespace('Ext.ux.InlineToolbarTabPanel');
Ext.ux.InlineToolbarTabPanel = Ext.extend(Ext.TabPanel, {
enableTabScroll:false

,onRender : function(ct, position){
Ext.TabPanel.superclass.onRender.call(this, ct, position);

if(this.plain){
var pos = this.tabPosition == 'top' ? 'header' : 'footer';
this[pos].addClass('x-tab-panel-'+pos+'-plain');
}

var st = this[this.stripTarget];
var stripDom = st.dom;
var tabs = '<td style="width:100%;border-right:0px;"><div id="td_tabs" style="height:26px;"></div></td>';
var tbars = this.initialConfig.toolbars;
var leftTbar, rightTbar;
for (var i=0, maxi=tbars.length; i<maxi; i++) {
if (tbars[i].align.toLowerCase() == 'left') {
leftTbar = tbars[i];
} else {
rightTbar = tbars[i];
}
}

var tbarWidth = (leftTbar == undefined ? 0 : leftTbar.width-1) + (rightTbar == undefined ? 0 : rightTbar.width-1)
var tabWidth = parseInt(stripDom.style.width,10);
stripDom.style.width = (this.width-tbarWidth-2).toString() + 'px';

var scrolloffset = 0;
for(var i=0;i<this['header'].dom.childNodes.length;i++){
if(stripDom.childNodes[i].className.indexOf('x-tab-scroller-right') >= 0 || stripDom.childNodes[i].className.indexOf('x-tab-scroller-left') >= 0){
scrolloffset = scrolloffset + 19;
}
}

var leftTbarId = (leftTbar) ? leftTbar.id : 'leftTbar';
var rightTbarId = (rightTbar) ? rightTbar.id : 'rightTbar';
var style = "border-top:1px solid #8DB2E3;margin:0px;height:26px;";
var leftTool = '<td><div id="'+leftTbarId+'" class="x-tab-toolbar-wrap" style="border-left:1px solid #8DB2E3;'+style+'"></div></td>';
var rightTool = '<td><div id="'+rightTbarId+'" class="x-tab-toolbar-wrap" style="border-right:1px solid #8DB2E3;'+style+'"></div></td>';
var tableStart = '<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr>';
var tableEnd = '</tr></table>';
var table = tableStart + (leftTbar?leftTool:'') + tabs + (rightTbar?rightTool:'') + tableEnd;
var parentNode = stripDom.parentNode;
parentNode.removeChild(this[this.stripTarget].dom);
Ext.DomHelper.insertFirst(parentNode, table);
var tabs = Ext.get("td_tabs");
tabs.dom.appendChild(stripDom);
if (leftTbar) {
new Ext.Panel({
renderTo:leftTbarId
,border:false
,width:leftTbar.width
,tbar: leftTbar.tbar
,height:0
});
}
if (rightTbar) {
new Ext.Panel({
renderTo:rightTbarId
,border:false
,width:rightTbar.width-1
,tbar: rightTbar.tbar
,height:0
});
}

this.stripWrap = st.createChild({cls:'x-tab-strip-wrap', cn:{
tag:'ul', cls:'x-tab-strip x-tab-strip-'+this.tabPosition}});
this['stripWrap'].dom.style.width = (this.width-tbarWidth-scrolloffset-2).toString() + 'px';

this.stripSpacer = st.createChild({cls:'x-tab-strip-spacer'});

this.strip = new Ext.Element(this.stripWrap.dom.firstChild);

this.edge = this.strip.createChild({tag:'li', cls:'x-tab-edge'});
this.strip.createChild({cls:'x-clear'});

this.body.addClass('x-tab-panel-body-'+this.tabPosition);

if(!this.itemTpl){
var tt = new Ext.Template(
'<li class="{cls}" id="{id}"><a class="x-tab-strip-close" onclick="return false;"></a>',
'<a class="x-tab-right" href="#" onclick="return false;"><em class="x-tab-left">',
'<span class="x-tab-strip-inner"><span class="x-tab-strip-text {iconCls}">{text}</span></span>',
'</em></a></li>'
);
tt.disableFormats = true;
tt.compile();
Ext.TabPanel.prototype.itemTpl = tt;
}

this.items.each(this.initTab, this);
}

,adjustBodyWidth : function(w){
// if(this.header){
// this.header.setWidth(w);
// }
if(this.footer){
this.footer.setWidth(w);
}
return w;
}

});
Ext.reg('inlinetoolbartabpanel',Ext.ux.InlineToolbarTabPanel);

elietian
3 Jul 2008, 1:00 AM
This can not work while i put it in border layout ,
the tabpanel and toobar has been separate .

elietian
3 Jul 2008, 1:04 AM
and to jfbasco
its still can not work on border layout
seems has some problem with the table

dawesi
15 Aug 2008, 6:58 PM
Ok... I've been away from this community for many months now... so I'm revamping this baby...

Thanks for all the help that people have pitched in with in my absence, some great work has been done here.

Now I'm back we'll release a new version by the end of August along with my extension website extforge.com

sstratton
3 Sep 2008, 6:58 AM
Ok... I've been away from this community for many months now... so I'm revamping this baby...

Thanks for all the help that people have pitched in with in my absence, some great work has been done here.

Now I'm back we'll release a new version by the end of August along with my extension website extforge.com

How's the bug fix coming?

nerdydude81
8 Oct 2008, 12:09 PM
I kinda re-wrote version 0.1 so I could use it for my site. I accounted for tab scrolling too.

Thanks for the cool extension. I would have voted hell yea, but it wasn't there so my vote was only Definately.



Ext.namespace('Ext.ux.InlineToolbarTabPanel');
Ext.ux.InlineToolbarTabPanel = function(config) {
Ext.apply(this, config);
Ext.ux.InlineToolbarTabPanel.superclass.constructor.call(this, config);
};

Ext.extend(Ext.ux.InlineToolbarTabPanel, Ext.TabPanel, {
inlineToolbar: null
, toolbar: null
, headerToolbar: false
, afterRender: function() {
Ext.ux.InlineToolbarTabPanel.superclass.afterRender.call(this);
if (!Ext.isEmpty(this.toolbar))
this.setToolbar(this.toolbar);
}
, onResize : function() {
Ext.ux.InlineToolbarTabPanel.superclass.onResize.apply(this, arguments);
if (Ext.isEmpty(this.inlineToolbar)) return;

var w = arguments[0]-this.tbContainer.getSize().width;
var h = this.header.getHeight();

if (this.headerToolbar) w-=1;
if (this.headerToolbar) h-=4;

this.header.setWidth(w);
this.inlineToolbar.setHeight(h);
this.tbContainer.setHeight(h);
}
, getToolbar : function() {
return this.inlineToolbar;
}
, setToolbar : function(obj) {
var tbStyle = {style: 'border-width:0px;' + (this.headerToolbar? 'padding:0px;background:transparent none;': '')};
var cls;
this.toolbar = obj;

if (this.headerToolbar)
cls = 'x-tab-panel-header' + (this.border? '':
' x-tab-panel-noborder x-tab-panel-header-noborder');
else
cls = 'x-tab-strip-wrap x-tab-strip-top';

this.tbWrap = this.header.insertSibling({
style: 'float:right;width:auto;z-index:99;border-left-width:0px;'
, cls: cls
});

this.tbContainer = this.tbWrap.createChild({
style: 'border-left-width:0px;border-top-width:0px;'
, tag: this.headerToolbar? 'ul': 'div'
, cls: this.headerToolbar? 'x-tab-strip-top': 'x-tab-right x-tab-panel-header'
});

this.header.setStyle({borderrightwidth:'0px'});

Ext.apply(this.toolbar, tbStyle);
this.inlineToolbar = new Ext.Toolbar(this.toolbar);

if (!this.headerToolbar) {
this.inlineToolbar.removeClass('x-toolbar');
this.inlineToolbar.addClass('x-tab-strip-inner');
}

this.inlineToolbar.render(this.tbContainer);
this.onResize(this.getSize().width);
}
});

dellerbie
13 Oct 2008, 10:03 AM
I kinda re-wrote version 0.1 so I could use it for my site. I accounted for tab scrolling too.

Thanks for the cool extension. I would have voted hell yea, but it wasn't there so my vote was only Definately.



Ext.namespace('Ext.ux.InlineToolbarTabPanel');
Ext.ux.InlineToolbarTabPanel = function(config) {
Ext.ux.InlineToolbarTabPanel.superclass.constructor.call(this, config);
};

Ext.extend(Ext.ux.InlineToolbarTabPanel, Ext.TabPanel, {
inlineToolbar: null
, toolbar: null
, afterRender: function() {
Ext.TabPanel.superclass.afterRender.call(this);
if (Ext.isEmpty(this.toolbar)) return;

this.inlineToolbar = new Ext.Toolbar(this.toolbar);
this.inlineToolbar.removeClass('x-toolbar');
this.inlineToolbar.addClass('x-tab-strip-inner');

this.tbWrap = this.header.insertSibling({style:'float:right;width:auto;'});
this.tbWrap.addClass('x-tab-strip-wrap');
this.tbWrap.addClass('x-tab-strip-top');

this.tbContainer = this.tbWrap.createChild({style:'border-top-width:0px;border-left-width:0px;'});
this.tbContainer.addClass('x-tab-right');
this.tbContainer.addClass('x-tab-panel-header');

this.inlineToolbar.render(this.tbContainer);
}
, onResize : function() {
Ext.TabPanel.superclass.onResize.apply(this, arguments);
if (Ext.isEmpty(this.inlineToolbar)) return;

var w = arguments[0]-this.tbContainer.getSize().width;
var h = this.header.getSize().height;

this.header.setWidth(w);
this.tbContainer.setHeight(h);
this.inlineToolbar.setHeight(h);
}
, getToolbar : function() {
return this.inlineToolbar;
}
});



Do you have a sample that uses this code?

nerdydude81
13 Oct 2008, 10:09 AM
Unzip to the examples\tabs directory

dellerbie
13 Oct 2008, 11:54 AM
nerdydude,

I dumped your example into examples/tabs and it works. However my own example does not. The inline toolbar is floating on top of the tab strip, and looks funky for me. Do you see anything blatantly foul about my code below? Or is it just me?





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="/ext/resources/css/ext-all.css">
<script type="text/javascript" src="/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/ext/ext-all-debug.js"></script>
<script type="text/javascript" src="Ext.ux.InlineToolbarTabPanel.js"></script>
<script language="javascript">
Ext.onReady(function(){
var tabs = new Ext.ux.InlineToolbarTabPanel({
renderTo:'tabs',
resizeTabs:true, // turn on tab resizing
minTabWidth: 115,
tabWidth:135,
enableTabScroll:true,
width:600,
height:250,
toolbar: {
items:[{
text: 'Btn1'
},{
text: 'Btn2'
},{
text: 'Btn3'
},{
text: 'Btn4'
},{
text: 'Btn5'
}]
},
items: [{
title: 'panel1',
html: 'hi'
},{
title: 'panel2',
html: 'hi'
},{
title: 'panel3',
html: 'hi'
},{
title: 'panel3',
html: 'hi'
},{
title: 'panel3',
html: 'hi'
},{
title: 'panel3',
html: 'hi'
},{
title: 'panel3',
html: 'hi'
},{
title: 'panel3',
html: 'hi'
},{
title: 'panel3',
html: 'hi'
},{
title: 'panel3',
html: 'hi'
} ,{
title: 'panel3',
html: 'hi'
}]
});
});
</script>
</head>
<body>
<div id="tabs" style="margin:15px;"></div>
</body>
</html>

dellerbie
13 Oct 2008, 11:57 AM
It seems that if you add tab items to the tab panel with the items config, the inline toolbar renders funky.

However, if you dynamically add the tabs, like you do with the addTabs function in your example, it works like a champ.

nerdydude81
14 Oct 2008, 6:20 AM
It seems that if you add tab items to the tab panel with the items config, the inline toolbar renders funky.

However, if you dynamically add the tabs, like you do with the addTabs function in your example, it works like a champ.

My code was relying on a resize event and was causing your problem. I've updated my original posting with the newer version and included a header style of toolbar. To see or use the header toolbar set



headerToolbar: true

dellerbie
15 Oct 2008, 6:31 AM
Nice work man, works well!

Just one more issue. It's completely broken in IE7. I'm trying to debug it now, but maybe you can beat me to solution.

nerdydude81
15 Oct 2008, 6:46 AM
Nice work man, works well!

Just one more issue. It's completely broken in IE7. I'm trying to debug it now, but maybe you can beat me to solution.

IE7 has an overflow bug. Add this to your CSS.



.x-tab-panel-header {
position: relative;
}


Maybe I should add this to the extension.

tarini
23 Nov 2008, 6:49 AM
i'm still having some problem on IE6...

here's my screenshot and my code:



var north = new GExt.viewport.WorkdeskTabPanel({
id: 'north-workdesk-tab-panel',
toolbar: {items:[
{text: 'Btn1'}
, {text: 'Btn2'}
, {text: 'Btn3'}
, {text: 'Btn4'}
, {text: 'Btn5'}
]},
headerToolbar: true
});

GExt.viewport.WorkdeskTabPanel = Ext.extend(Ext.ux.InlineToolbarTabPanel, {

/* ext configurations */
height: "50%",
split:true,
enableTabScroll: true,




/* ext methods */
initComponent: function() {
this.items = [
new Ext.Panel({
html: 'ciao',
title: 'tab'
})
];

GExt.viewport.WorkdeskTabPanel.superclass.initComponent.call(this);

}
});

nerdydude81
24 Nov 2008, 7:27 AM
I've updated my version some; however it hasn't been tested to my satisfaction. There are some "magic numbers" in the code as well. Please post back any changes or bug fixes.

Thanks,
Jack



Ext.namespace('Ext.ux.InlineToolbarTabPanel');
Ext.ux.InlineToolbarTabPanel = Ext.extend(Ext.TabPanel, {
inlineToolbar: null
, tabTopPadding: 2
, toolbar: null
, headerToolbar: false
, afterRender: function() {
Ext.ux.InlineToolbarTabPanel.superclass.afterRender.call(this);
if (!Ext.isEmpty(this.toolbar))
this.setToolbar(this.toolbar);
}
, onResize : function() {
Ext.ux.InlineToolbarTabPanel.superclass.onResize.apply(this, arguments);
if (Ext.isEmpty(this.inlineToolbar)) return;

//The offset is for the left tab image
var tbWidth = this.inlineToolbar.getSize().width + (this.headerToolbar?2:10);
var w = this.getEl().getComputedWidth() - tbWidth;
var h = this.header.getSize().height;
var defaultHeight = this.headerToolbar? 28:30;

this.header.setHeight(h <= defaultHeight? defaultHeight: h);
this.header.setWidth(w);
this.tbHeader.setHeight(h);
this.tbHeader.setLeft(w+7);
this.tbHeader.setWidth(tbWidth);

h = this.header.getSize().height;
this.stripWrap.setHeight(h);

h = this.stripWrap.getComputedHeight() - (this.headerToolbar?2:4);
this.strip.setHeight(h - this.tabTopPadding);

this.inlineToolbar.setHeight(this.headerToolbar? h-4:h-3);
this.inlineToolbar.setWidth(tbWidth - (this.headerToolbar?2:10));
this.delegateUpdates();
}
, getToolbar : function() {
return this.inlineToolbar;
}
, setToolbar : function(obj) {
var cls = 'x-tab-panel-header';
var tbStyle = {style: 'border-width:0px;' +
(this.headerToolbar? 'padding:0px;background:transparent none;': '')};

if (this.headerToolbar)
cls += (this.border? '':
' x-tab-panel-noborder x-tab-panel-header-noborder');
else
cls += ' x-tab-strip-wrap x-tab-strip-top';

this.tbHeader = this.header.insertSibling({
style: 'position:absolute;' + (Ext.isIE6? 'width:0px;':'')
});

this.tbWrap = this.tbHeader.createChild({
style: 'border-left:0px none;border-left-width:0px;'
, cls: cls
});

this.tbContainer = this.tbWrap.createChild({
style: 'border-left:0px none;border-top:0px none;'
, tag: this.headerToolbar? 'ul': 'div'
, cls: this.headerToolbar? 'x-tab-strip-top': 'x-tab-right x-tab-panel-header'
});

this.header.setStyle('border-right', '0px none');

if (!this.headerToolbar)
this.header.setStyle('padding-top', this.tabTopPadding + 'px');

Ext.apply(this.toolbar, tbStyle);
this.inlineToolbar = new Ext.Toolbar(this.toolbar);

if (!this.headerToolbar) {
this.inlineToolbar.removeClass('x-toolbar');
this.inlineToolbar.addClass('x-tab-strip-inner');
}

this.inlineToolbar.render(this.tbContainer);

if (this.toolbar != obj) {
this.onResize(this.getSize().width);
this.toolbar = obj;
}
}
});

tarini
24 Nov 2008, 12:20 PM
i'm still having problem...
i think that ie doesn't render correctly css properties width:auto because if i force manually width:70px in code it will became more usable and toolbar doesn't fit 100% of the width...

nerdydude81
24 Nov 2008, 12:27 PM
i'm still having problem...
i think that ie doesn't render correctly css properties width:auto because if i force manually width:70px in code it will became more usable and toolbar doesn't fit 100% of the width...

Can you remove the width:auto completely? The width is being set in the onResize function. I don't have access to IE6 right now, but will work on setting it up.

tarini
26 Nov 2008, 6:28 AM
i made some test:

test A (set width:70px)
firefox -> screenshot 1
ie6 -> screenshot 2

test B (set no width property -> using onResize listener as you said)
firefox -> screenshot 1 (correct... same behaviour -> useless css property)
ie -> screenshot 3 (argh! toolbar's width 100% OVER tabpanel-> ****ing browser)

test B is exactly the same as width:auto because css width default is auto :)

text C (set width: 100px)
firefox -> screenshot 1 (correct... same behaviour -> useless css property)
ie -> screenshot 4 (argh! is like onResize resize doesn't work...)


conclusion:
firefox -> calls onResize (some bugs in this function but easy to fix)
ie -> onResize doesn't fire.... css properties rules

nerdydude81
26 Nov 2008, 11:06 AM
I've updated my posting with some new code. I've tested it on IE6, IE7, FF2, FF3, Safari 2.0.4, Safari 3.1.2, Safari 3.2, Opera 9.6, Google Chrome 0.3.154.9. I believe it will solve your problems.

Updated Post (http://extjs.com/forum/showthread.php?p=254580#post254580)


Thanks,
Jack

tarini
27 Nov 2008, 4:40 AM
great...
I think I love you ;)


last thing... i have to remove the "magic" +7 in this.tbHeader.setLeft method on line 27 because it left me some space between default header and toolbar

now it works and it's beautiful :)

thanks... really...

gthe
30 Nov 2008, 12:03 AM
I've updated my posting with some new code. I've tested it on IE6, IE7, FF2, FF3, Safari 2.0.4, Safari 3.1.2, Safari 3.2, Opera 9.6, Google Chrome 0.3.154.9. I believe it will solve your problems.

Updated Post (http://extjs.com/forum/showthread.php?p=254580#post254580)


Thanks,
Jack
I try You updated post and example from post #55. I also add

headerToolbar: trueand

.x-tab-panel-header {
position: relative;
}All work perfect except if you add tab items to the tab panel with the items config.

My changed code - tabs-inlinetoolbar-adv.js:


Ext.onReady(function(){

var tabs = new Ext.TabPanel({
id:'tabs',
renderTo:'tabs',
resizeTabs:true, // turn on tab resizing
minTabWidth: 115,
tabWidth:135,
enableTabScroll:true,
width:600,
height:250,
defaults: {autoScroll:true},
headerToolbar: true,
items:[{
title: 'Normal Tab'
},{
title: 'Ajax Tab 1'
},{
title: 'Ajax Tab 2'
},{
title: 'Event Tab'
},{
title: 'Disabled Tab',
disabled:true,
html: "Can't see me cause I'm disabled"
}
],
plugins: new Ext.ux.TabCloseMenu()
, toolbar: {items:[
{text: 'Btn1', id:'but_000'}
, {text: 'Btn2'}
, {text: 'Btn3'}
, {text: 'Btn4'}
, {text: 'Btn5'}
]}
});

// tab generation code
var index = 0;
while(index < 7){
addTab();
}
function addTab(){
tabs.add({
title: 'New Tab ' + (++index),
iconCls: 'tabs',
html: 'Tab Body ' + (index) + '<br/><br/>'
+ Ext.example.bogusMarkup,
closable:true
}).show();
}

new Ext.Button({
text: 'Add Tab',
handler: addTab,
iconCls:'new-tab'
}).render(document.body, 'tabs');
});And it look in FF like in attach.:

Thanks and sorry for my English.

nerdydude81
3 Dec 2008, 2:03 PM
svdb, Good find, I didn't even think to test that. I've made the following changes to the inlinetoolbartab.js and they appear to have resolved the remaining issues in IE7.

Thanks,
Jack


Changed Line 61:


this.header.setWidth((Ext.isIE || Ext.isGecko3)?w-4:w); //(Ext.isIE6)?(w-2):


Changed Line 89:


style: 'position:absolute;' + (Ext.isIE? 'width:0px;' : '')

svdb
4 Dec 2008, 2:48 PM
Try this one out. I decided not to strip out the "other stuff" I added for my site. Let me know if this helps or breaks.

Thanks,
Jack

Thanks for sharing this, Jack.
I just tested it on IE6, IE7, FF2, FF3 and found a couple of bugs.
I used the Ext default tabpanel example and plugged in you component.



var tabs = new Ext.ux.InlineToolbarTabPanel({
renderTo:'tabs',
resizeTabs:true, // turn on tab resizing
minTabWidth: 115,
tabWidth:135,
enableTabScroll:true,
width:600,
height:250,
defaults: {autoScroll:true},
plugins: new Ext.ux.TabCloseMenu()
,headerToolbar: true
,toolbar: {
items:[
{text: 'Btn1', id:'but_000'}
,{text: 'Btn2'}
,{text: 'Btn3'}
,{text: 'Btn4'}
]
}
});


IE7
- When no transitional DOCTYPE is specified for the page the tabs are entirely hidden by the inline button bar (see first attached screenshot).
- When specifying a transitional DOCTYPE in IE7, the the tabs are visible but the button bar is misplaced (second screenshot).

FF2 and FF3
Whether the transitional DOCTYPE is specified or not, it doesn't matter. It always produces the same result like in screenshot #2: the button bar is misplaced.

IE6
Setting transitional DOCTYPE cause the same problem as in screenshot #2. However when no DOCTYPE is specified everything seems to be alright.


Additional test: constraining the tabpanel inside a DIV wrapper.

IE7 and FF3: Using transitional DOCTYPE in this case causes problem #2. No DOCTYPE causes problem #2 in FF3 and problem #1 in IE7.
IE6: DOCTYPE or none, same result: No noticable problems.
FF2: DOCTYPE or none, same result: the button bar to be 1px too low and to far on the right.

I hope this helps.

Cheers,
svdb

svdb
4 Dec 2008, 6:27 PM
This is a followup of my previous post.

In the attached zip you'll find a slightly modified InlineToolbarTabPanel.
No big changes, only little size tweaks to get everything look the same on IE6, FF2, IE7 and FF3. I also made the button toolbar 4 pixels larger so the last button wouldn't flow over the toolbar's right border.

The bug where the button bar was pushed up was in fact a side effect of the sample page itself (should render the "add" button AFTER the tabpanel instead of inside the same container div).
I provide two sample pages: one has a transitional doctype needed for IE7 (FF3 doesn't care), and one without any doctype for IE6+FF2.

Just unzip to \ext-2.2\examples\tabs to use the new samples.

The main remaining issue is IE7 needs transitional doctype specified or it miscalculates the toolbar's width.

Cheers,
svdb

nerdydude81
5 Dec 2008, 12:24 PM
svdb, Good find, I didn't even think to test that. I've made the following changes to the inlinetoolbartab.js and they appear to have resolved the remaining issues in IE7.

Thanks,
Jack


Changed Line 61:


this.header.setWidth((Ext.isIE || Ext.isGecko3)?w-4:w); //(Ext.isIE6)?(w-2):


Changed Line 89:


style: 'position:absolute;' + (Ext.isIE? 'width:0px;' : '')

MtAiryEd
30 Mar 2009, 7:20 AM
Is there a fiinal working copy of this somewhere, including all the changes mentioned above?

Thanks.

exo
25 May 2009, 4:25 AM
It's not working for bottom aligned tabs, will this perhaps be a feature in a future version?

svdb
26 May 2009, 8:10 AM
Sorry dude, this is a DIY shop. If you need something done quick you'd better do it yourself,
and don't forget to share. ;)
Cheers,
Steph.

Note on the source code I provided earlier:
You will need to tweak the sizes here and there (modify the code) depending on where you insert your tabpanel. Since I'm not an Extjs expert I wasn't able to resolve 100% of the issues when the tabpanel is inside other panels. It means there is no "final" version for now.

Lobos
8 Sep 2009, 4:01 PM
adding:

Ext.ComponentMgr.registerType("inlinetabpanel", Ext.ux.InlineToolbarTabPanel);

to the bottom of the file:

InlineToolbarTabPanel.js

will allow you to add to a panel using xtype:'inlinetabpanel';

TBH this should be added to the core, it is pretty handy

yanghengtao
9 Jan 2010, 1:54 AM
hi all,i use svdb's solution but i can't close the tab ,anybody tell me why? i use v3.1

svdb
11 Jan 2010, 9:08 AM
What do you mean?
Please provide some screenshot or a better description of the problem.
Thanks.
SV

yanghengtao
14 Jan 2010, 10:43 PM
the problem is that when i use the ux with v3.1 i can't close the tab ,when i click the close button the panel's content is remove but the tab's title can not be removed

jay@moduscreate.com
15 Jan 2010, 2:41 AM
The plugin was written for 2.x and needs to be adapted for 3.1.

jay@moduscreate.com
15 Jan 2010, 2:41 AM
You should never expect a 2.x plugin to work for 3.x anyway.

jsakalos
15 Jan 2010, 3:37 AM
Well, 2.x plugins/extension may work OOTB in 3.x but, as Jay says, you cannot take it for granted.

jay@moduscreate.com
15 Jan 2010, 4:48 AM
Well, 2.x plugins/extension may work OOTB in 3.x but, as Jay says, you cannot take it for granted.

Yes, most of those are the ones that don't modify DOM elements, like this one does.

SimoAmi
4 Feb 2010, 11:49 PM
Yes, most of those are the ones that don't modify DOM elements, like this one does.

Not meaning to hijack the thread but just curious, many user extensions have duplicates for v2 and v3 of the framework. Don't we have the ability to check the framework version and perform operations on the dom accordingly?

jsakalos
5 Feb 2010, 12:07 PM
Ext version is in Ext.version variable.

svdb
6 Feb 2010, 8:45 AM
I wouldn't do that. Version after version you'll end up with more and more dead code in your project/product. It's better to separate code for different versions in different files: separate the problems instead of putting them all together. And easier to maintain too.

goldledoigt
10 Feb 2010, 8:47 AM
Hi,

first of all thanks to svdb and dawesi for sharing tabpanel inline toolbar scripts.

I have just made some modifications to make the svdb script working with Ext 3.1 .
Not optimized at all but works fine for me ... hope this can help.

weizju
19 Oct 2010, 2:13 AM
seems this inline toolbar tab panel did not work when "tabPosition: 'bottom'"

svdb
19 Oct 2010, 4:11 PM
seems this inline toolbar tab panel did not work when "tabPosition: 'bottom'"

True. It was never designed to work in that mode.
You're more than welcome to provide an improvement there.

svdb