Hybrid View

  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

    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 Premium Member bricemason's Avatar
    Join Date
    Jan 2008
    Location
    Upstate NY
    Posts
    280
    Answers
    49
    Vote Rating
    42
    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!

Thread Participants: 1

Tags for this Thread

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