1. #1
    Sencha User
    Join Date
    Nov 2012
    Posts
    2
    Vote Rating
    0
    lupin77 is on a distinguished road

      0  

    Default Answered: Multiple lines with containers

    Hi guys,

    Can anyone experienced give me some clue how to force "line break" while using hbox layout with many elements?

    Here is sample code:

    xtype:'container',
    height:30,
    layout:
    {
    type:'hbox'
    },
    items: [
    { xtype: 'button', width:100, text: 'Btn 1', margin: 2 },
    { xtype: 'button', width:100, text: 'Btn 2', margin: 2 },
    { xtype: 'button', width:100, text: 'Btn 3', margin: 2 },
    { xtype: 'button', width:100, text: 'Btn 4', margin: 2 },
    ]

    Considering 300px window width, one element is not visible. How to make it move to the next line automatically?

    General, I want to add elements dynamically with different widths.

    Any suggestions appreciated.

  2. You could instead use the default layout and float all the children like this:

    Code:
    {
        xtype: 'container',
        title: 'Welcome',
        width: 300,
        defaults: {
            style: {
                float: 'left'
            }
        },
        items: [
            { xtype: 'button', width:100, text: 'Btn 1', margin: 2 },
            { xtype: 'button', width:100, text: 'Btn 2', margin: 2 },
            { xtype: 'button', width:100, text: 'Btn 3', margin: 2 },
            { xtype: 'button', width:100, text: 'Btn 4', margin: 2 }
        ]
    }
    This example uses an inline style but you could just as easily assign a css class in the defaults block for the children.

    Brice

  3. #2
    Sencha User bricemason's Avatar
    Join Date
    Jan 2008
    Location
    Upstate NY
    Posts
    280
    Vote Rating
    46
    Answers
    49
    bricemason has a spectacular aura about bricemason has a spectacular aura about bricemason has a spectacular aura about

      0  

    Default

    You could instead use the default layout and float all the children like this:

    Code:
    {
        xtype: 'container',
        title: 'Welcome',
        width: 300,
        defaults: {
            style: {
                float: 'left'
            }
        },
        items: [
            { xtype: 'button', width:100, text: 'Btn 1', margin: 2 },
            { xtype: 'button', width:100, text: 'Btn 2', margin: 2 },
            { xtype: 'button', width:100, text: 'Btn 3', margin: 2 },
            { xtype: 'button', width:100, text: 'Btn 4', margin: 2 }
        ]
    }
    This example uses an inline style but you could just as easily assign a css class in the defaults block for the children.

    Brice
    Brice Mason
    Front End Developer
    Modus Create

    @bricemason
    bricemason.com

    Sencha Touch Screencasts
    Vimeo - Sencha Touch Channel

    Github Projects:
    Sencha Cordova Builder enables the automatic creation, building, and running of PhoneGap (Cordova) projects with Sencha Touch.

    Am I Sencha Touch Ready? checks your system to determine what you need to do to start Sencha Touch development. If you're having trouble getting up and running, try this out.

    Sencha Tools Bridge allows Sencha SDK Tools to co-exist with Sencha Cmd on the same system.

  4. #3
    Sencha User
    Join Date
    Nov 2012
    Posts
    2
    Vote Rating
    0
    lupin77 is on a distinguished road

      0  

    Default

    That is exactly what I was looking for. Thanks!

  5. #4
    Sencha Premium Member
    Join Date
    Sep 2015
    Location
    UK
    Posts
    16
    Vote Rating
    0
    rabia mahmood is on a distinguished road

      0  

    Default Ext JS 6 - Modern

    This works brilliantly for my container that has multiple images. The images are added by the user one at a time and I was having trouble trying to contain all the images in the container. Having tried various different layouts I found your method (highlighted below) worked perfectly.

    Quote Originally Posted by bricemason View Post
    You could instead use the default layout and float all the children like this:

    Code:
    {
        xtype: 'container',
        title: 'Welcome',
        width: 300,
        defaults: {
            style: {
                float: 'left'
            }
        },
        items: [
            { xtype: 'button', width:100, text: 'Btn 1', margin: 2 },
            { xtype: 'button', width:100, text: 'Btn 2', margin: 2 },
            { xtype: 'button', width:100, text: 'Btn 3', margin: 2 },
            { xtype: 'button', width:100, text: 'Btn 4', margin: 2 }
        ]
    }
    This example uses an inline style but you could just as easily assign a css class in the defaults block for the children.

    Brice

Thread Participants: 2

Tags for this Thread