Threaded 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

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