Results 1 to 7 of 7

Thread: Table layout. Something wrong with column sizes

  1. #1
    Sencha User
    Join Date
    Oct 2012
    Posts
    28

    Default Answered: Table layout. Something wrong with column sizes

    Hi there,
    i'm placing some Ext.form.Fieldsets in one panel. For testing purposes I used 'Column' layout for main container and everything looked fine and nice (column sizes were defined with %). But now I need add some more fieldsets below, so I need rows and changed layout to 'Table' and everything messed up. Only fixed width: xxx helps, I need dynamic size for column. Why not % here?

  2. Please have a look at the following:
    http://jsfiddle.net/wqXK7/

    You may also be interested in our Sencha Architect application for creating layouts.
    http://www.sencha.com/products/architect/

    Scott.

  3. #2
    Ext JS Premium Member
    Join Date
    Nov 2009
    Location
    St Louis,MO
    Posts
    267
    Answers
    20

    Default

    Personally I rarely uses anything but anchor (for forms), fit, card and box.

    In your case I would recommend using box. For examples

    Code:
    panel: layout = vbox
       container (row 1): layout = hbox
          fieldset1: flex = 2
            fieldset2: flex = 1
            fieldset3: width = XXX
       container (row 2) layout = hbox
            fieldset1: width = XXX
            fieldset2: flex = 1
            fieldset3: width = YYY

  4. #3
    Sencha User
    Join Date
    Oct 2012
    Posts
    28

    Default

    Thanks for answer, but percentage widths seems not working here also. I just put my latest code here. Some blocks can contain unused props, cause I played with many layouts. My main goal is just get 4 fieldsets in 2 rows (3 on top, bottom fieldset is full width in container, colspan: 3).

    Code:
    Ext.define('AC.view.encoding.Video', {
        extend: 'Ext.form.Panel',
        alias: 'widget.videoparams',
    
        layout: "vbox",
        frame: true,
        items: [
            {
                layout: 'hbox',
                items: [
                    {
                        xtype: 'fieldset',
                        title: 'amazing',
                        flex: 2,
                        width: '30%',
                        //columnWidth: 0.3,
                        layout: 'anchor',
                        defaults: {
                            anchor: '95%',
                            labelAlign: "right",
                            labelWidth: 300
                        },
    
                        items: [
                            {
                                fieldLabel: 'Field 1',
                                name: 'field1',
                                xtype: 'numberfield'
                            },
                            {
                                fieldLabel: 'Field 2',
                                name: 'field2',
                                xtype: 'numberfield'
                            },
                            {
                                fieldLabel: 'Field 3',
                                name: 'field3',
                                xtype: 'numberfield'
                            },
                            {
                                fieldLabel: 'Field 4',
                                name: 'field4',
                                xtype: 'numberfield'
                            }
                        ]
                    },
    
                    {
                        xtype: 'fieldset',
                        title: 'amazing',
                        flex: 1,
                        width: '30%',
                        //columnWidth: 0.3,
                        layout: 'anchor',
                        defaults: {
                            anchor: '95%',
                            labelAlign: "right",
                            labelWidth: 150
                        },
    
                        items: [
                            {
                                fieldLabel: 'Field 1',
                                name: 'field1',
                                xtype: 'numberfield'
                            },
                            {
                                fieldLabel: 'Field 2',
                                name: 'field2',
                                xtype: 'numberfield'
                            },
                            {
                                fieldLabel: 'Field 3',
                                name: 'field3',
                                xtype: 'numberfield'
                            },
                            {
                                fieldLabel: 'Field 4',
                                name: 'field4',
                                xtype: 'numberfield'
                            }
                        ]
                    },
    
                    {
                        xtype: 'fieldset',
                        title: 'amazing',
                        width: 30%,
                        //columnWidth: 0.3,
                        layout: 'anchor',
                        defaults: {
                            anchor: '95%',
                            labelAlign: "right",
                            labelWidth: 150
                        },
    
                        items: [
                            {
                                fieldLabel: 'Field 1',
                                name: 'field1',
                                xtype: 'numberfield'
                            },
                            {
                                fieldLabel: 'Field 2',
                                name: 'field2',
                                xtype: 'numberfield'
                            },
                            {
                                fieldLabel: 'Field 3',
                                name: 'field3',
                                xtype: 'numberfield'
                            },
                            {
                                fieldLabel: 'Field 4',
                                name: 'field4',
                                xtype: 'numberfield'
                            }
                        ]
                    }
                ]
            }
        ],
    
    
        initComponent: function() {
            var self = this;
    
            this.callParent(arguments);
        }
    });

  5. #4
    Ext JS Premium Member
    Join Date
    Nov 2009
    Location
    St Louis,MO
    Posts
    267
    Answers
    20

    Default

    With box layouts you use the flex parameter which is actually both simpler and more powerful than a percentage.

    If you want 3 equally spaced columns you would give them each a flex: 1 for: 1/3, 1/3, 1/3.

    Box layouts will use the fixed width or height of items without flex and use the flex values for a ratio of the remaining space.

    Lets say, for example you have 1000px;

    if you have 3 components of:

    width: 100,
    flex: 1,
    flex: 2

    The layout will take the first 100px for the first item, leaving 900px.
    The second item will get 300px: total flex = 3, 900 / 3 = 300, 300 * 1 = 300.
    The third item will get 600px: total flex = 3, 900 / 3 = 300, 300 * 2 = 600.

    Once you get the hang of box model and nesting boxes it really is much easier to use and works a lot better than table/column.

  6. #5
    Sencha User
    Join Date
    Oct 2012
    Posts
    28

    Default

    Well, or I doing something bad or it is simply not working. In code I paste above I removed all width properties, labelWidth decreased, left only flex: 1 and they are not filling nicely container, here look some evidence :-)


  7. #6
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716

    Default

    Please have a look at the following:
    http://jsfiddle.net/wqXK7/

    You may also be interested in our Sencha Architect application for creating layouts.
    http://www.sencha.com/products/architect/

    Scott.

  8. #7
    Sencha User
    Join Date
    Oct 2012
    Posts
    28

    Default

    Thanks, Scott,
    I actually figured out about 'hbox' and 'vbox', just did not notice align property :-) Additionally, got a little problem here, fieldset's background is white, I want it blue, so I changed xtype to 'container' and voila! Dunno is it good though :-)

Posting Permissions

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