Results 1 to 5 of 5

Thread: What does flex do?

  1. #1
    Ext User
    Join Date
    Jul 2010
    Location
    Calgary, Alberta
    Posts
    186

    Cool What does flex do?

    No, seriously. I've been seeing it in a few places and all I can think of is a puny little class surrounded by divs, trying to do the whole 'muscle' pose so girls will help him with layouts and get him displayed...

    so what does flex: 1 really mean?

  2. #2
    Sencha Premium User
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258

    Default

    It's a ratio:

    Code:
        new Ext.Panel({
                fullscreen: true,
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                items: [{
                    flex: 1,
                    html: 'Foo',
                    style: 'border: 1px solid red;'
                },{
                    flex: 5,
                    html: 'Bar',
                    style: 'border: 1px solid blue;'
                }]
            });
    In the above, the blue panel takes up 5/6 of the height.

    You can also mix in items with fixed height:

    Code:
        new Ext.Panel({
                fullscreen: true,
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                items: [{
                    flex: 1,
                    html: 'Foo',
                    style: 'border: 1px solid red;'
                },{
                    flex: 5,
                    html: 'Bar',
                    style: 'border: 1px solid blue;'
                },{
                    html: 'Fixed at 200',
                    height: 200,
                    style: 'border: 1px solid green;'
                }]
            });
    The blue panel now takes 5/6 of the remaining height, after the height of the fixed size item is allocated.

  3. #3
    Sencha User
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    This is a case where the Main ExtJS API docs include the configuration even though it's not technically a config of the layout, it's a config of the layout's child.

    The Sencha Touch API docs don't include this because of the ambiguity as to where it should go. It's not really a config of the Panel class, so it's not right just to put it there? Maybe with a strong warning that it's only use by box layouts?

    Anyway: http://www.sencha.com/deploy/dev/doc...ut&member=flex

  4. #4
    Ext User
    Join Date
    Jul 2010
    Posts
    24

    Default

    Maybe I'm just overlooking something simple (like leaving the panel to render without a height or flex), but is there a way to let the panel determine the height based on the content inside?

    I'm more curious from a two panel vertical setup where the top box height is determined based on dynamic content.

  5. #5
    Sencha Premium Member
    Join Date
    Jul 2014
    Location
    Pune, India
    Posts
    12

    Lightbulb

    Flex is used as a property in hbox and vbox layouts, and indicates the amount of space this component will take up in its parent container.

    You can use any number greater than zero as a flex property value - some people like to use whole numbers for simplicity, others I've seen use values like 0.25 to more easily represent percentages.

    A basic example of flex in action:


    Code:
    var myPanel = Ext.create('Ext.panel.Panel', {
        width: 100,
        height: 100,
        layout: {
            type: 'hbox',
            align: 'stretch' // Stretches child items to the height of this panel.
        },
        items: [{
            xtype: 'container',
            html: 'Container one!',
            flex: 5 // This takes up 50% of the container.
        }, {
            xtype: 'container',
            html: 'Container two!',
            flex: 3 // This takes up 30% of the container.
        }, {
            xtype: 'container',
            html: 'Container three!',
            flex: 2 // This takes up 20% of the container.
        }]
    });
    The key here is knowing that it's not the value of each flex that defines the layout, but how these values all relate to each other. If I added another container with a flex of 10 into this layout, that would take up half of the layout, since 10 is half of 10 + 5 + 3 + 2 = 20.

Similar Threads

  1. GXT vs FLEX
    By Kvel in forum Ext GWT: Discussion
    Replies: 1
    Last Post: 6 Jul 2010, 5:14 AM
  2. Flex Table Issue.
    By c-new in forum Ext GWT: Help & Discussion (1.x)
    Replies: 0
    Last Post: 15 Mar 2010, 12:02 PM
  3. Flex Issues
    By DrogoNevets in forum Ext GWT: Discussion
    Replies: 0
    Last Post: 23 Dec 2009, 2:30 AM
  4. Difference between flex and ExtJS
    By pradeepptp in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 25 Nov 2009, 9:24 AM
  5. EXT + Flex
    By [email protected] in forum Community Discussion
    Replies: 15
    Last Post: 4 Sep 2009, 3:48 AM

Posting Permissions

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