PDA

View Full Version : How to arrange buttons in a grid layout?



ssdesign
31 Jul 2010, 9:46 AM
Hi,
I would like to have buttons arranged in a grid with a specific horizontal and vertical spacing as well as a starting X and Y.
I am unable to find how to set X and Y positions of components.

Maybe there is a different way to do it (which I may be unaware of).

This is how I am trying right now:


var griditems = [];
for(var m=1; m<=16; m++)
{
for(var n=1; n<=16; n++){
var myGridphButton = new Ext.Button({
minWidth: '40',
minHeight: '40',
cls: 'gridphBtn',
id: "g"+m+n,
ssg: gridVars[n-1]+(m),
handler: GridTapHandler,
html:'<div class="gridBtnClass"></div>'
})
}
myGridphButton.addClass("mGridhBtn");
griditems.push(myGridphButton);
}

This adds all buttons in a row. How can I position these buttons so that they appear in a grid?

Thanks for any help.

evant
1 Aug 2010, 5:47 PM
Simple example:



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function(){
var main = new Ext.Panel({
width: 400,
height: 400,
layout: {
type: 'vbox',
align: 'stretch'
}
}).show(),
ct;

for(var i = 0; i < 16; ++i){
if(i % 4 == 0){
ct = new Ext.Container({
height: 100,
layout: 'hbox',
});
main.add(ct);
}
ct.add({
xtype: 'button',
text: 'Foo'
});
}
main.doLayout();
}
});

jochem kuun
1 Apr 2011, 11:57 AM
thanks, this helped me a lot.

MPeg
20 Sep 2011, 11:02 PM
Hi, usefull example.
Might you have to setup a "fullscreen" property to show the panel on startup?