PDA

View Full Version : A bit of help with a little layout.



Rohall
27 Jul 2010, 11:40 AM
Hey Everyone!
I'm a bit stuck with a nested item: layout. If anyone has some insight that would be great. I'm still getting used this method of positioning so the code bellow may be a bit convoluted. Thanks for any help :).

The desired effect is for the titlebar to be placed at the top (but not docked), with a back button placed inside of it (this part works). Next the buttons (buttonPVExpect, buttonPVGetting) should be aligned to the right of the screen at the bottom. They are however stuck to the left side of the screen.



layout: {
type: 'vbox',
pack: 'top',
align: 'justify',
},


items: [
this.titlebarPatientsAndVisitors,
{xtype: 'spacer'},

{
layout: {
type: 'auto',
pack: 'top',
align: 'right'
},
defaults: {
type: 'hbox',
align: 'right',
},
items: [
{items: [
{xtype: 'spacer', flex: 1},
this.buttonPVExpect,
]},{
items: [
{xtype: 'spacer', flex: 1},
this.buttonPVGetting
]}]
}]

});

Rohall
27 Jul 2010, 1:34 PM
The following code produced the desired outcome (a bit messy though, sorry):



layout: {
type: 'vbox',
pack: 'top',
align: 'justify',
},


items: [
this.titlebarPatientsAndVisitors,
{xtype: 'spacer'},

{
layout: {
type: 'auto',
pack: 'top',
align: 'right'
},

items: [
{ layout: {
type: 'hbox',
},
items: [
{xtype: 'spacer', flex: 1},
this.buttonPVExpect,
]},{
layout: {
type: 'hbox',
},
items: [
{xtype: 'spacer', flex: 1},
this.buttonPVGetting
]}]
}]


});