View Full Version : TabPanel and AutoTabs: dynamically loading tabs is a problem for me...

12 Aug 2010, 11:58 PM
Hello fellow Extjsers,

I have some problems with the tabpanel; but let me first explain the background.

I am currently integrating zend framework and extjs in such a way that:
a) the global page layout - a border layout - is defined for once and for all in a zend layout
b) each view is independant, so I can use html views without having to care about the global layout.

The views are loaded in the center region of my global layout. This center region is a tabpanel.
It is defined as follows:

innercontentPanel = new Ext.TabPanel({
defaults: {
border: false,
id: 'innercontentPanel',
activeTab: 0,
deferredRender: false,
autoTabs: true
Now, you see I've set autoTabs to true so that everytime it see a x-tab class in my "innercontent" div, it turns it into a tab. Works perfectly.
Now my problem. When I change the page (in ajax), in fact, I get a whole new html view through my ajax query and then I do this:

In this htmlreponse I get, I receive a series of divs with x-tab classes; so this makes new tabs in the end.

Typically, I send things like this back in htmlresponse:

<div class="x-tab" title="Pure text tab">
<p>This is just text, and if you see this, it's working alright.</p>
<div class="x-tab" title="Another tab">
<div id="editor-grid"></div>
...but as you can guess from this view, it is sometimes more than just html; sometimes too, there is a <script type="text/javascript"> inside the response with its own extjs object creation. In the example above, notice the second tab called "Another tab": it has an empty div inside (editor grid); well, the view is sent with the script for creating an editor grid in this case (didn't post it, would be too long, but you get the idea: html tabs are sent with some extjs object definition).

Now to the problem:
The object inside the tabs renders badly; let's continue with the example above; so I do readTabs, and it creates my tabs; then I do activate(0), it activates the second tab; then I check my tabs manually, and I click on the second tab; here is what I see:


The grid, which also has a tbar, renders badly; now, same example, but this time I do activate(1) after readTabs (so I activates the second tab directly); surprise, it work as intended:


The grid and the tbar show correctly.

My problem is thus that to render a tab correctly, I have to activate that particular tab. But I can't say in advance which tab will contain an extjs object; I want to always activate the first tab - seems logical - and when switching to the second, well its content shouldn't be messed up.

It's really hard for me to explain the bug, but I went through this detailled description so that someone might be able to understand the problem.

Hoping for some answers,
Thanks in advance.

Another - you guessed it - extjs beginner

20 Nov 2012, 11:43 PM
Hi Sencha,

I am migrating 3.4 to 4.0.7 Here what should i replace for autoTabs config(extjs 3) in extjs 4.

Ext.create('Ext.tab.Panel',{ autoTabs: true, // In Extjs 4 ??
activeTab: 0,
deferredRender: false,
border: false,
html: helpText});
If i placed question in wrong place kindly tell me where i have to place this...