1. #1
    Ext JS Premium Member
    Join Date
    Jul 2010
    Posts
    234
    Vote Rating
    1
    DaveC426913 is on a distinguished road

      0  

    Default lining up buttons horizontally or in a table

    lining up buttons horizontally or in a table


    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?

    Code:
     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'},
        ]
       }

  2. #2
    Ext JS Premium Member
    Join Date
    Jul 2010
    Posts
    234
    Vote Rating
    1
    DaveC426913 is on a distinguished road

      0  

    Default


    Nevermind...

    Wrong:
    Code:
        xtype: 'panel',
        defaults: { 
         ui:   'dark',
         minWidth: 42,
         maxWidth: 42,
       layout: {type: 'hbox'},
       },
           items: [
         { xtype: 'button', text: 'Q'},
    Right:
    Code:
     
        xtype: 'panel',
        defaults: { 
         ui:   'dark',
         minWidth: 42,
         maxWidth: 42,
        },
      layout: {type: 'hbox'},
           items: [
         { xtype: 'button', text: 'Q'},
    I'm new... :blush:

  3. #3
    Sencha User
    Join Date
    Jul 2010
    Posts
    31
    Vote Rating
    0
    jjfortuin is on a distinguished road

      0  

    Default


    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?

  4. #4
    Ext JS Premium Member
    Join Date
    Jul 2010
    Posts
    234
    Vote Rating
    1
    DaveC426913 is on a distinguished road

      0  

    Default


    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.

  5. #5
    Sencha User
    Join Date
    Jan 2011
    Location
    openthesky7(at)gmail.com
    Posts
    54
    Vote Rating
    1
    openthesky7 is on a distinguished road

      0  

    Default


    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/

Similar Threads

  1. size of buttons in table layout
    By TheMonolith in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 2 Mar 2010, 6:43 AM
  2. how to use layout or other metaphors to horizontally arrange buttons.
    By geewhizbang in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 11 Aug 2009, 7:11 AM
  3. centering table vertically and horizontally.
    By d0uble_hel1x in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 6 Jul 2008, 10:17 PM

Thread Participants: 2

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar