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...s/positioning/