PDA

View Full Version : Mixing vbox / hbox



jop_008
1 Oct 2012, 8:30 AM
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
2 Oct 2012, 7:54 AM
I modified your post, wrapping your code in CODE tags. Please use that in the future, John :).

jop_008
4 Oct 2012, 3:26 AM
But no results so far.

jop_008
4 Oct 2012, 9:53 AM
Issue solved by putting the elements in separated panels and one panel gluing things together.

John