View Full Version : Problems with hbox layout within table layout

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

Ext 4.1 rev 1

Browser versions tested against:

FF15.0.1 (firebug installed

DOCTYPE tested against:



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()


it works with a vbox layout

Screenshot or Video:


Debugging already done:


Possible fix:

not provided

Additional CSS used:

only default ext-all.css

Operating System:

WinXP Pro SP3

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.

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?