PDA

View Full Version : [SOLVED]A question with Vbox and Hbox Layout



kohyea
28 Jul 2009, 4:09 AM
Hi all;

Any one could tell me how to create the layout following the screenshot?

Thanks,
Kohyea

28 Jul 2009, 5:01 AM
hy use hbox and vbox? Sounds a perfect use for a border layout to me.

kohyea
28 Jul 2009, 5:15 AM
Hi, thanks for your quick reply.

the problem is I don't know how to align Button1(Button2, Button3) to right?

Thanks again.

kohyea
28 Jul 2009, 10:24 AM
Hi, thanks for your suggetion, border layout works great for me!
:D:D:D

28 Jul 2009, 10:26 AM
aww!! i was almost done working on a hbox/vbox layout for you ;)

28 Jul 2009, 10:28 AM
anyway, here's a start:


var buildButton = function() {
return {
xtype : 'button',
text : 'button'
}
}

var topContainer = {
xtype : 'container',
height : 50,
layout : 'hbox',
layoutConfig : {
pack : 'end',
align : 'middle'
},
items : [
buildButton(),
buildButton(),
buildButton()
]
}

var leftContainer = {
xtype : 'container',
height : 50,
layout : 'vbox',
width : 100,
layoutConfig : {
align : "center"
},
items : [
buildButton(),
buildButton(),
buildButton()
]
};

console.info(leftContainer)

var buildButton = function() {
return {
xtype : 'button',
text : 'Button'
}
}
var centerContainer = {
xtype : 'container',
frame : true,
flex : 1,
layout : 'hbox',
layoutConfig : {
align : 'stretch'
},
items : [
leftContainer,
{
frame : true,
flex : 1,
title : 'Some panel',
html : 'some panel content'
}
]
};

new Ext.Window({
height : 300,
width : 500,
layout : 'vbox',
layoutConfig : {
align : 'stretch'
},
items : [
topContainer,
centerContainer,
topContainer
]

}).show()

kohyea
28 Jul 2009, 10:34 AM
Wooo;

Thanks, great man! you have been helping me a lot!

~o)