Results 1 to 5 of 5

Thread: flow layout button panel

  1. #1
    Sencha Premium Member
    Join Date
    Mar 2008
    Posts
    145
    Answers
    6
    Vote Rating
    2
      0  

    Default Answered: flow layout button panel

    I am trying to make a panel that contains a dynamic number of buttons. I would like to layout the buttons as if they were 'inline' HTML elements in a flow layout. In other words, I would like the first button to be positioned at the top-left corner of the panel, the next button to its right and so on. If a button overflows the right edge of the panel, I would like to 'line break' to the next 'line' in the panel and begin laying out the remaining buttons on the next line. Is there an existing layout manager that does this or is there some sample code that does this?

    Thanks.

  2. The cls config expects a CSS class name

    Code:
    cls : 'button-inline'
    And then in your CSS file:

    Code:
    .button-inline {
        display : inline-block;
    }

  3. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,320
    Answers
    3883
    Vote Rating
    1293
      0  

    Default

    Two options, if you want to have flex sizing then you can use hbox layout. Other wise a more performant way is to give the buttons some CSS like display : inline-block;
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it!

    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha Premium Member
    Join Date
    Mar 2008
    Posts
    145
    Answers
    6
    Vote Rating
    2
      0  

    Default

    I decided to try your CSS suggestion so I configured my buttons as follows:

    {
    xtype: 'button',
    text: 'abc',
    maxWidth: '50px',
    margin: 5,
    cls: 'display : inline-block;'
    },

    When I specified no layout on the containing panel, the buttons were displayed one per line. When I set the layout of the containing panel to 'hbox', but the buttons did not line-break to the next line but were laid out in a single line that extended off the right edge of the screen.

  5. #4
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,320
    Answers
    3883
    Vote Rating
    1293
      0  

    Default

    The cls config expects a CSS class name

    Code:
    cls : 'button-inline'
    And then in your CSS file:

    Code:
    .button-inline {
        display : inline-block;
    }
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it!

    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #5
    Sencha Premium Member
    Join Date
    Mar 2008
    Posts
    145
    Answers
    6
    Vote Rating
    2
      0  

    Default Fixed!

    That did it! Thanks a lot for your help.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •