View Full Version : something wrong with vbox in tab ?

9 Jul 2009, 1:26 AM
function test_tab_panel() {
var tabs = new Ext.TabPanel({ title: 'Test Tab', renderTo: 'test_surface',
items: [{ title: 'Tab One', layout: 'vbox',
items: [{ xtype: 'button', text: 'Test Button 1' },
{ xtype: 'button', text: 'Test Button 2'}]}]

Under IE7 only first button is visible, under FF none.
When 'hbox' is used instead vbox, both buttons are visible (FF-ok, IE7- a bit truncated).

9 Jul 2009, 1:29 AM
Because you haven't give the tab panel any dimensions.

9 Jul 2009, 1:40 AM
'test_surface' is a DIV with fixed dimensions.
does TabPanel expands automatically only in horizontal direction to fit its container ?
setting 'autoHeight: true' doesn't help.
what are the rules ?

9 Jul 2009, 1:41 AM
BoxComponents must be sized.

9 Jul 2009, 1:59 AM
Thanks for explanaition.
I understand that sizing can be done explicity by programmer or implicity by parent panel.

And additional related question - I fill Ext.Panel's body with my own plain DIV, how to resize it (SyncSize doesn't work as expected) or how to calculate panel's size on custom content one ?

9 Jul 2009, 2:23 AM
You don't use "your own DIV".

You use a BoxComponent (which as per the API docs) may be constructed around an existing DIV, and add it.

And the layout (Again, this is emphasized in the API docs) is what renders, and (possibly, depending upon layout type) sizes child Components.

9 Jul 2009, 3:47 AM
look at this:

function test_tab_panel1() {
var tabs = new Ext.TabPanel({ title: 'Test Tab', renderTo: 'test_surface', height: 300, width: 400 });
var div1 = document.createElement('div');
div1.style.backgroundColor = 'Lime';
var bc1 = new Ext.BoxComponent({ title: 'wrapper1', layout: 'fit', bodyStyle: 'background-color: Red;', el: div1 });
var div2 = document.createElement('div');
div2.style.backgroundColor = 'Yellow';
var panel2 = new Ext.Panel({ title: 'wrapper2', layout: 'fit', bodyStyle: 'background-color: Red;', el: div2 });

when DIV is wrapped exactly by BoxComponent it works, but when I use Panel it doesn't - why ?
but BoxComponent is not allowed to be used inside accordion - what is wrong ?

9 Jul 2009, 4:44 AM
Panels use a complex internal structure to handle header, header tools, top toolbar, body, bottom toolbar, footer, and the collapsible config and capability.

If you just want a Component that is to have its height and width managed, then that is a BoxComponent.

The following link explains what a BoxComponent is (I don't understand why you have not read it): http://extjs.com/deploy/dev/docs/?class=Ext.BoxComponent

Panels must be used inside an accordion layout because it explicitly relies on having a header and header tools and collapsibility.

So, if you want your "thing" inside a Panel, create a BoxComponent out of it, and put it in a Panel. Give that Panel an appropriate layout of YOUR chioce which performs sizing/positioning to your requirements

9 Jul 2009, 5:05 AM
Thanks for answer.

I don't know upfront what kind of container will be used - so I'm searching for generic solution.

My conclusion for now is that there is no universal method to wrap externally-generated content in ExtJS's panels - so "If you want add something into Tab wrap it into BC, if into accordion - wrap in Panel wrapping BC, etc. ..., but if your box is already Panel, you needn't do it,... sometimes...".
This is complex set of rules and for me it lacks orthogonality (mutual independence) of building blocks - what makes architecture great.

9 Jul 2009, 5:45 AM
A BoxComponent!

It's just a wrapper class which allows a DIV to be managed as a child Component of ANY Container.

9 Jul 2009, 6:05 AM
Please correct me if I am wrong:
1) putting 'thing' into accordion:

var div = document.createElement('div');
div.style.backgroundColor = 'Lime';
//MUST be sized
div.style.width = '100px';
div.style.height = '100px';
var wrapper = new Ext.Panel({ title: 'wrapper', /*DISALLOWED HERE: bodyStyle:'background-color: Red;',*/ el: div });

2) putting 'thing' into tab:

var div = document.createElement('div');
div.style.backgroundColor = 'Lime';
//NO NEED to size
//div.style.width = '100px';
//div.style.height = '100px';
var wrapper = new Ext.BoxComponent({ title: 'wrapper', bodyStyle: /*ALLOWED HERE:*/'background-color: Red;', el: div });

or is there any uniform way ?

9 Jul 2009, 7:37 AM
Yes. It is uniform.

Create a BoxComponent from your div.

That is IT!

Forget about the different things you can do with it. You have your BoxComponent.

You can put that into a TabPanel.


You can put it into a layout 'fit' Panel, and use that Panel in an accordion.

10 Jul 2009, 4:40 AM
Thank you - it works.
But there is another problem with 'table' layout - try this:

//famous DIV creator ;)
function test_make_div(strColor) {
var oDiv = document.createElement('div');
oDiv.style.backgroundColor = strColor;
oDiv.style.width = '150px';
oDiv.style.height = '100px';
return oDiv;
function test_table_panel() {
var oTable = new Ext.Panel({ layout: 'table', layoutConfig: { columns: 3 },
width: 400, height: 300, renderTo: 'test_surface'
oTable.add(new Ext.BoxComponent({ el: test_make_div('Blue') }));
oTable.add(new Ext.BoxComponent({ colspan: 2, el: test_make_div('Lime') }));
oTable.add(new Ext.BoxComponent({ colspan: 2, el: test_make_div('Red') }));

at least on my screen blue rect has same width as red one