and for these example I didn’t care about any appearance – it’s just an example.

and what’s the deal If I just pull some things from the HTML? Either pull all (progressive Enhancement) or not (non-progressive). With progressive Enhancement my js can stay always the same even if the data changes. With non-progressive it’s the other way around.
I personally don’t want to create dynamic javascript – but that’s maybe just me. That’s the reason why I’m no so into ExtJS but I’m sure many don’t mind. And as I stated above choosing your Javascript Framework is just a personal matter so everyone should be fine..

Plus the tab-sprite.gif is 404, so the tabs that you *do* create correctly don’t have a correct appearance.

Just use the contentEl config in each of those child tabs instead of the html config!

You are really posting things saying how it’s bad, but you aren’t in possession of all the facts!

ExtJs is designed for creating *applications*

It is a complete UI solution which creates a dynamically layed out UI from the document.body all the way down a managed Container->Component hierarchy.

So a TabPanel is not a simple few divs. A TabPanel uses a “CardLayout” layout manager to manage the visibility of it child Components.

Each of these Components may be a flat piece of HTML, but it may also be a Container (containing other Components arranged in a border layout with resizable regions), or a GridPanel, or a TreePanel or a DataView, or a FormPanel etc…

If the TabPanel is a child of a layout which resizes, then it cascades the resize down through all descendant Containers.

PS: the code tag doesn’t work in the comments (sorry…)

I let you draw your own conclusions about it.

?

What you did with jQuery was to grapple about with the DOM structure first using the ubiquitour dollar-does-everything function with lots of pugly code. You had to change the document!

Well, if you’re going to do that, how about the elegant:

Ext.onReady(function(){
var tabs = new Ext.TabPanel({
applyTo: Ext.getBody().child(".FlowTabs"),
width: 450,
height: 300,
deferredRender: false,
activeTab: 0,
frame: true,
autoTabs: true,
autoTabSelector: 'div.TabContent'
});
Ext.getBody().select('.FlowTabs .Tab').each(function(t, composite, idx) {
t.remove();
tabs.items.get(idx).setTitle(t.dom.innerHTML);
});
});