PDA

View Full Version : Problems with hbox layout within table layout



Holger.wessels
8 Oct 2012, 1:48 AM
REQUIRED INFORMATION Ext version tested:

Ext 4.1 rev 1

Browser versions tested against:


IE8
FF15.0.1 (firebug 1.3.0.10 installed

DOCTYPE tested against:

____

Description:

Within a field container using a table layout I wanted to use a field container using hbox layout with two combo boxes . Instead of showing the combo boxes the corresponding row takes spaces but stays empty. It doesn't happen with a vbox layout. Or do I miss an essential config parameter?

Steps to reproduce the problem:

Define a field container using a table layout. For its items use a field container using hbox layout. For the hbox layout fieldcontainer use two combo boxes as items.

The result that was expected:

Two combo boxes appear in a row.

The result that occurs instead:

An empty row is shown.

Test Case:

Ext.create('Ext.panel.Panel', {
title: 'Table Layout',
width: 300,
height: 200,
layout: {
type: 'table',
// The total column count must be specified here
columns: 2
},
defaults: {
// applied to each contained panel
bodyStyle: 'padding:20px'
},
items: [{
html: 'Cell A content',
colspan: 2
},{
colspan: 2,
xtype: 'fieldcontainer',
layout: 'hbox',
items : [{

xtype: 'combobox',
fieldLabel : 'box 1'
}, {
xtype: 'combobox',
fieldLabel : 'box 2'
}]

},{
html: 'Cell D content',
colspan: 2
}],
renderTo: Ext.getBody()
});


HELPFUL INFORMATION

it works with a vbox layout

Screenshot or Video:

attached

Debugging already done:

none

Possible fix:

not provided

Additional CSS used:

only default ext-all.css

Operating System:

WinXP Pro SP3

evant
8 Oct 2012, 2:00 AM
What are you trying to achieve here? It's a fairly weird combination of layouts, table isn't commonly used.

Holger.wessels
8 Oct 2012, 2:58 AM
Hi Evan,

we built a component called master-slave-combobox as a fieldcontainer with two combo boxes. It uses either a vbox or a hbox layout. Until now we used it within a FormPanel with vbox layout. But this panel with 8 other items has to be changed to a 2 column layout, and thats where I thought the table layout would be the best for achieving a form with nicely arranged elements. Which alternative way would you suggest?
Regards,
Holger