Layout Dialog Markup Syntax Question

[Bobafart]

I am looking at Jack's layout dialog example here:

http://extjs.com/deploy/ext/examples/dialog/layout.html

The dialog is created from the below markup:



<!-- dialog is created from existing markup -->
<div id="hello-dlg" style="visibility:hidden;">
<div class="x-dlg-hd">Layout Dialog</div>

<div class="x-dlg-bd">
<div id="west" class="x-layout-inactive-content">
West
</div>
<div id="center" class="x-layout-inactive-content" style="padding:10px;">
<p>This dialog has the Vista theme applied.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.</p>

</div>
</div>
</div>


What is the proper syntax to add text to the second and third tabs?

[Animal]

Tried this?

http://extjs.com/deploy/ext/docs/output/Ext.BasicDialog.html#config-autoTabs

[Bobafart]

Tried this?

http://extjs.com/deploy/ext/docs/output/Ext.BasicDialog.html#config-autoTabs

I tried that and many more things from the docs. Which brings me to the frustration I went through to solve this problem. I question if that entry in the documentation is even correct.

I managed to get it working without following the documentation information (which was leading me astray it turns out).

The docs say:

"If true, all elements with class 'x-dlg-tab' will get automatically converted to tabs (defaults to false)"

If I used autoTabs: true and class="x-dlg-tab" it didn't work.

Instead what I did was this (which was pure fluke after hours of playing around):
I changed this:


layout.add('center', new Ext.ContentPanel(Ext.id(), {
autoCreate:true, title: 'Unit Statistics', background:true}));
layout.add('center', new Ext.ContentPanel(Ext.id(), {
autoCreate:true, title: 'Unit Skills', closable:true, background:true}));


to this:


layout.add('center', new Ext.ContentPanel('statistics', {
autoCreate:true, title: 'Unit Statistics', background:true}));
layout.add('center', new Ext.ContentPanel('skills', {
autoCreate:true, title: 'Unit Skills', closable:true, background:true}));


and I added a few divisions to the markup:


<!-- dialog is created from existing markup -->
<div id="soldierDetails" style="display: none;">
<div class="x-dlg-hd">Unit Details</div>

<div class="x-dlg-bd">
<div id="west" class="x-layout-inactive-content">
<p>Unit Item 1</p><p>Unit Item 2</p><p>Unit Item 3</p>
</div>
<div id="center" class="x-layout-inactive-content" style="padding:10px;">
<p>This dialog has the Vista theme applied.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac.</p>
<div id="statistics" class="x-layout-inactive-content">
Your unit statistics are listed here
</div>
<div id="skills" class="x-layout-inactive-content">
Your unit skills and upgrades are listed here
</div>
</div>
</div>
</div>


Hopefully someone else can learn from this fluke thereby preventing the frustration I went through. Or even make a tutorial out of it.

[brian.moeskau]

Well, doing it the documented way should work. If you look at the source code, the constructor for BasicDialog has this:



if(this.autoTabs){
this.initTabs();
}

and initTabs does this:



var tabEls = YAHOO.util.Dom.getElementsByClassName("x-dlg-tab", this.tabTag || "div", this.el.dom);
if(tabEls.length > 0){
for(var i = 0, len = tabEls.length; i < len; i++) {
var tabEl = tabEls[i];
tabs.addTab(Ext.id(tabEl), tabEl.title);
tabEl.title = "";
}
tabs.activate(0);
}


LayoutDialog is a subclass of BasicDialog, so it should work the same way since it does not override this. If you get some errors with it, please post them so that someone can take a look.

[Animal]

It definitely works:

Were d is the dialog:



var l = d.getLayout();
var c = l.getRegion("center");
c.add(new Ext.ContentPanel("bar", {autoCreate:{id:"bar", cls:"x-dlg-bd", html:"This is a new tab"}}));
var tabPanel = c.getTabs();
tabPanel.getTab(tabPanel.getCount() - 1).setText("New Tab");


Adds a new tab no probs at all.