1. #1
    Sencha Premium Member
    Join Date
    Mar 2008
    Posts
    145
    Answers
    6
    Vote Rating
    2
    kworam is on a distinguished road

      0  

    Default Answered: flow layout button panel

    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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,824
    Answers
    3470
    Vote Rating
    836
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      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 @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    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
    kworam is on a distinguished road

      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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,824
    Answers
    3470
    Vote Rating
    836
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      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 @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    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
    kworam is on a distinguished road

      0  

    Default Fixed!

    Fixed!


    That did it! Thanks a lot for your help.

Thread Participants: 1