Mixing vbox / hbox

[jop_008]

I am trying to do the following split the screen vertically with two list items on the right and left side.
Underneath the list items there must be buttons to send items from left to right.
Some extra stuf is needed above the left side.
So I am mixing vbox and hbox layout as follows:


Ext.define ('OpenmodelingMobile.view.ActionButtons', {
extend : 'Ext.form.FormPanel',
xtype : 'ActionButtons',
config : {
itemId: 'ActionButtons',
layout : 'hbox',
items: [
{
xtype : 'button',
id : 'verwijderopname',
pressedCls : 'x-button-pressed',
handler: function () {
//om_helper.deleteopname ();
},
text : 'Select all',
width : '220px',
height : '50px',
ui : 'confirm',
scope : this,
flex : 2
},
{
xtype: 'spacer',
flex : 1
}
,
{
xtype : 'button',
pressedCls : 'x-button-pressed',
id : 'nieuwgebrek',
text : 'Nieuw gebrek',
handler: function () {
//om_helper.deleteopname ();
},
width : '220px',
height : '50px',
ui : 'confirm',
scope : this,
flex : 2
} // button
] // items
} // config
}); // Ext `define formpanel


Ext.define ('OpenmodelingMobile.view.RelationDialoguePanel', {
extend : 'Ext.Container',
xtype : 'relationdialoguepanel',
fullscreen : true,


config: {
layout:'hbox',


items: [
{
flex:1,
config: {
xtype:'panel',
border:true,
layout:'vbox',
items:[// item is missing as well
{
itemId: 'picklist_title',
xtype: 'container',
html:'test', // there is no test displayed
defaults: {
styleHtmlContent: true
},
//height: '10%',
flex:0.1
}
,
{
xtype: 'picklist', // this one is not displayed at all
height: '90%',
flex:1
}
]
}
}
,{
xtype: 'selecteditemlist', // this one is displayed fine
flex:1
}
]
}//config
});


John

[jay@moduscreate.com]

I modified your post, wrapping your code in CODE tags. Please use that in the future, John :).

[jop_008]

But no results so far.

[jop_008]

Issue solved by putting the elements in separated panels and one panel gluing things together.

John