Results 1 to 3 of 3

Thread: Hbox layout rendering some fields with width 0

  1. #1
    Sencha User
    Join Date
    Apr 2016
    Posts
    2

    Default Answered: Hbox layout rendering some fields with width 0

    Well, I don't know for sure if it's a bug or not, but this behavior is happening to me in my application and I didn't find a workaround at the moment. In my specific case this happens only in Firefox (Chrome, IE and Opera are working fine), but I was able to identify that the problem is in the hbox layout. When it is used with multiple levels of containers, at some point it stops to give fields an width, so this fields will not show in the application.

    I managed to write a simple code (my original structure is much more complex) that reproduces this behavior, testing it against the samples in the docs simulates the problem for Ext JS 4.2.1 and even to 6.02. The sample code is as below (I just modified the sample code in the documentation of hbox in each version page):

    Code:
    Ext.create('Ext.Panel', {
        width: 500,
        height: 300,
        title: "HBoxLayout Panel",
        layout: {
            type: 'hbox',
            align: 'stretch'
        },
        renderTo: document.body,
        items: [{
            xtype: 'container',
            layout: 'hbox',
            title: 'Inner Panel One',
            flex: 2,
            items: [
                {
                     xtype: 'textfield',
                     flex: 1
                },
               {
                    xtype: 'textfield',
                    flex: 1
                },
                {
                    xtype: 'container',
                
                    layout: 'hbox',
                    items: [
                        {
                            xtype: 'textfield',
                            flex: 1
                        },
                        {
                            xtype: 'textfield',
                            flex: 1
                        }
                    ]
                }
            ]
        },{
            xtype: 'panel',
            title: 'Inner Panel Two',
            flex: 1
        },{
            xtype: 'panel',
            title: 'Inner Panel Three',
            flex: 1
        }]
    });
    If I change the layout of the first containerto anchor it will render normally, but in the given code, with hbox, it will not. So, am I missing something? Or this is really a bug?

  2. The nested container also needs a flex:
    Code:
     {
                        xtype: 'container',
                        flex:1, // <------------ this is required. You were missing this
                        layout: 'hbox',
                        items: [{
                            xtype: 'textfield',
                            flex: 1
                        }, {
                            xtype: 'textfield',
                            flex: 1
                        }]
                    }

  3. #2
    Sencha User
    Join Date
    Jul 2012
    Posts
    236
    Answers
    45

    Default

    The nested container also needs a flex:
    Code:
     {
                        xtype: 'container',
                        flex:1, // <------------ this is required. You were missing this
                        layout: 'hbox',
                        items: [{
                            xtype: 'textfield',
                            flex: 1
                        }, {
                            xtype: 'textfield',
                            flex: 1
                        }]
                    }

  4. #3
    Sencha User
    Join Date
    Apr 2016
    Posts
    2

    Default

    Sorry for the bad sample. With your answer I have tried to map the entire structure of my view and found one mystake. My structure was something like this:

    Code:
    Grid {
        Toolbar (dock: 'top', layout: 'hbox')) {
            Container (layout: 'anchor'){
                Container () {
                    //some fields
                }
                Panel (layout: 'anchor') {
                    //some docked items
                    Container (layout: 'hbox') {
                        //some labels
                    }
                    Container (layout: 'anchor') {
                                            //dinamically generated fields
                    }
                }
            }
        }
    }
    The problem was with the last container, which is the one where the final user will be able to dinamically add some components. The anchor was not set and I really didn't find it because everything works just fine in Chrome, even without the layout configuration. The only thing I don't undestand is why it works in Chrome while not in Firefox.

Similar Threads

  1. WP Fieldset fields invisible (hbox-layout)
    By janhar in forum Sencha Touch 2.x: Bugs
    Replies: 2
    Last Post: 20 Jan 2014, 11:42 PM
  2. hbox ratio with hidden fields occuping width
    By maneljn in forum Ext: Q&A
    Replies: 1
    Last Post: 14 Nov 2012, 4:12 AM
  3. Replies: 0
    Last Post: 31 May 2011, 8:33 AM
  4. tabpanel width into a panel with a hbox layout
    By McCornic in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 22 Apr 2010, 2:12 AM
  5. Three column hbox layout with fixed width center
    By Greendrake in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 15 Mar 2010, 8:16 AM

Tags for this Thread

Posting Permissions

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