PDA

View Full Version : Two Containers side by side



hermann.s
12 Nov 2013, 8:24 AM
Hi, I am trying to create two containers under a TabPanel that will be displayed side by side.
The code that I have does not work, and produces the following result :



xtype: 'tabpanel',
layout: { type: 'hbox', align: 'stretch' },
items: [{
title: 'Workflow',
items:
[
{ xtype: 'container', margin: 5, flex: 1, layout: { type: 'vbox', align: 'stretch' }, items: [
{ xtype: 'label', text: 'Work Instruction' },
{ xtype: 'container', layout: { type: 'fit' }, autoScroll: true, minHeight: 70, flex: 1 },
{ xtype: 'label', text: 'Last Comment' },
{ xtype: 'container', layout: { type: 'fit' }, autoScroll: true, minHeight: 70, flex: 1 },
{ xtype: 'container', layout: { type: 'hbox' }, height: 25 },
]},
{ xtype: 'container', margin: 5, flex: 1, layout: { type: 'vbox', align: 'stretch' }, items: [
{ xtype: 'label', text: 'Work Instruction' },
{ xtype: 'container', layout: { type: 'fit' }, autoScroll: true, minHeight: 70, flex: 1 },
{ xtype: 'label', text: 'Last Comment' },
{ xtype: 'container', layout: { type: 'fit' }, autoScroll: true, minHeight: 70, flex: 1 },
{ xtype: 'container', layout: { type: 'hbox' }, height: 25 },
]}
]
}]

46808

Anyone know how to solve this?

Johnny Major
12 Nov 2013, 12:10 PM
You don't have a layout defined on your first item of the tab panel. I am assuming the layout you defined on the tab panel you really wanted on your first item "panel";



xtype: 'tabpanel',
//layout: { type: 'hbox', align: 'stretch' }, --Removed
items: [{
title: 'Workflow',
layout: { type: 'hbox', align: 'stretch' },
items:
[
{ xtype: 'container', margin: 5, flex: 1, layout: { type: 'vbox', align: 'stretch' }, items: [
{ xtype: 'label', text: 'Work Instruction' },
{ xtype: 'container', layout: { type: 'fit' }, autoScroll: true, minHeight: 70, flex: 1 },
{ xtype: 'label', text: 'Last Comment' },
{ xtype: 'container', layout: { type: 'fit' }, autoScroll: true, minHeight: 70, flex: 1 },
{ xtype: 'container', layout: { type: 'hbox' }, height: 25 }
]},
{ xtype: 'container', margin: 5, flex: 1, layout: { type: 'vbox', align: 'stretch' }, items: [
{ xtype: 'label', text: 'Work Instruction' },
{ xtype: 'container', layout: { type: 'fit' }, autoScroll: true, minHeight: 70, flex: 1 },
{ xtype: 'label', text: 'Last Comment' },
{ xtype: 'container', layout: { type: 'fit' }, autoScroll: true, minHeight: 70, flex: 1 },
{ xtype: 'container', layout: { type: 'hbox' }, height: 25 }
]}
]
}]