lining up buttons horizontally or in a table

[DaveC426913]

I'm trying to make a virtual keyboard. My buttons are all appearing stacked in a vertical row, no matter what I do. What am I doing wrong?


initComponent: function() {
this.entryArray[0] = this.defaultEntryText;
var config = {
fullscreen: true,
items: [{
xtype: 'field',
id: 'entryfield',
value: this.entryArray
},{
xtype: 'panel',
defaults: {
layout: {type: 'hbox'},
ui: 'dark',
minWidth: 42,
maxWidth: 42,
},
items: [
{ xtype: 'button', text: 'Q'},
{ xtype: 'button', text: 'W'},
{ xtype: 'button', text: 'E'},
{ xtype: 'button', text: 'R'},
{ xtype: 'button', text: 'T'},
{ xtype: 'button', text: 'Y'},
{ xtype: 'button', text: 'U'},
{ xtype: 'button', text: 'I'},
{ xtype: 'button', text: 'O'},
{ xtype: 'button', text: 'P'},
]
}

[DaveC426913]

Nevermind...

Wrong:

xtype: 'panel',
defaults: {
ui: 'dark',
minWidth: 42,
maxWidth: 42,
layout: {type: 'hbox'},
},
items: [
{ xtype: 'button', text: 'Q'},


Right:


xtype: 'panel',
defaults: {
ui: 'dark',
minWidth: 42,
maxWidth: 42,
},
layout: {type: 'hbox'},
items: [
{ xtype: 'button', text: 'Q'},



I'm new... :blush:

[jjfortuin]

Hi, I'm new too... I'm trying to make a "numpad" virtual keyboard, like a phone. However I want the buttons all to "touch" each other. Mine are only touching horizontal and there's a big gap vertical. Are these issues hbox/vbox issues or can I layout the "button" differently?

[DaveC426913]

It should be doable. You may have to add some css to control margin/padding.

You should be able to 'flow' them into your box so they wrap to the next line.

Failing that though, a last-ditch clunkier way is to lay out 3 hboxes within each of 4 vboxes (to make a 3 wide by 4 high kb).


Show your code.

[openthesky7]

Add " style:'float:left' " to your components. Inside every component is div, so you can control this via CSS.

Quick howto with css positioning: http://www.barelyfitz.com/screencast/html-training/css/positioning/