1. #1
    Ext JS Premium Member
    Join Date
    Sep 2009
    Location
    Cambridge
    Posts
    97
    Vote Rating
    0
    markalroberts is on a distinguished road

      0  

    Default Auto adjust panel height after dynamically adding items

    Auto adjust panel height after dynamically adding items


    I have an empty panel (which is an item inside another panel with layout hbox). I am dynamically adding items to this panel, then calling doLayout().

    The height of the panel doesn't change on doLayout(), and since the panel was originally empty (0px height when rendered), the new items are not visible.

    At the moment, my work around is to explicitly set the panel's height.

    Is there way to say "resize the height of this panel to its child items" - guess I was hoping that doLayout() would do this.

    Thanks

  2. #2
    Ext User zhegwood's Avatar
    Join Date
    Dec 2007
    Location
    Boulder, CO Suburbia (Lafayette)
    Posts
    388
    Vote Rating
    1
    zhegwood is on a distinguished road

      0  

    Default


    Is it set to height:0px when it's rendered or is height:auto? Setting height:auto could solve your problem. Another thing that might be affecting it is not properly clearing floated elements. What does the content look like that's being added? Are they just more panels or containers?

  3. #3
    Ext JS Premium Member
    Join Date
    Sep 2009
    Location
    Cambridge
    Posts
    97
    Vote Rating
    0
    markalroberts is on a distinguished road

      0  

    Default


    The docs say height defaults to 'auto'... the thing is, this gets set to 0px when the item is rendered (as the panel is empty)... then when I add a couple of form elements (combobox and textbox), and call doLayout(), the height doesn't get re-adjusted to for the height of the items.

    Don't reckon anything's floating.

    It's not a massive deal, as I happen to know the height of what I'm adding, and that doesn't change... but it would be nice in general to be able to dynamically add items and have height re-adjust.

    Guess it could be down to the layout I'm using - happy to reproduce with some code if it sounds like this is not the expected result.

    Thanks.

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    It just sounds like overnesting a Panel which is "an item inside a Panel"?

    Show some code, or describe what you actually want to achieve. There'll be a better way.

  5. #5
    Ext JS Premium Member
    Join Date
    Sep 2009
    Location
    Cambridge
    Posts
    97
    Vote Rating
    0
    markalroberts is on a distinguished road

      0  

    Default


    Sure... here's some code:

    Code:
    Ext.onReady(function() {
        new Ext.FormPanel({
            id: 'searchForm',
            xtype: 'panel',
            layout: 'hbox',
            renderTo: document.body,
            items: [
            {
                flex: 1,
                xtype: 'textfield',
                name: 'searchFilter',
                value: 'Joe Bloggs',
                fieldLabel: 'Search'
            }, {
                flex: 2,
                xtype: 'panel',
                layout: 'hbox'
                //,height: 22
            }, {
                xtype: 'button',
                text: 'Search',
                handler: function() {
                    var panel = this.ownerCt.items.items[1];
                    panel.add(new Ext.form.TextField({
                        flex: 1,
                        value: 'Hello world'
                    }));
                    panel.doLayout();
                }
            }
            ]
        });
    });
    If you uncomment the { height: 22 } config item, then you can see the elements, otherwise, they are not visible (despite the doLayout())

    Also, is there a nicer way in Ext to get the panel relative to the button that's clicked (without resorting to setting the id and using Ext.getCmp) ?

    Thanks

  6. #6
    Ext JS Premium Member
    Join Date
    Sep 2009
    Location
    Cambridge
    Posts
    97
    Vote Rating
    0
    markalroberts is on a distinguished road

      0  

    Default


    So, any thoughts on the "better way" ?

  7. #7
    Ext User zhegwood's Avatar
    Join Date
    Dec 2007
    Location
    Boulder, CO Suburbia (Lafayette)
    Posts
    388
    Vote Rating
    1
    zhegwood is on a distinguished road

      0  

    Default


    That panel is being rendered with height:0px; and needs to be rendered with height:auto;

    I did this and it worked:

    Code:
    /* create a class that will give that panel a height:auto */
    .expand-panel .x-panel-body {
        height:auto !important;
    }
    Code:
    //specify that class on the panel that will have stuff added to it:
    Ext.onReady(function() {
        new Ext.FormPanel({
            id: 'searchForm',
            xtype: 'panel',
            layout: 'hbox',
            renderTo: document.body,
            items: [
            {
                flex: 1,
                xtype: 'textfield',
                name: 'searchFilter',
                value: 'Joe Bloggs',
                fieldLabel: 'Search'
            }, {
                flex: 2,
                xtype: 'panel',
                layout: 'hbox',
                cls: "expand-panel"
            }, {
                xtype: 'button',
                text: 'Search',
                handler: function() {
                    var panel = this.ownerCt.items.items[1];
                    panel.add(new Ext.form.TextField({
                        flex: 1,
                        value: 'Hello world'
                    }));
                    panel.doLayout();
                }
            }
            ]
        });
    });

  8. #8
    Ext User zhegwood's Avatar
    Join Date
    Dec 2007
    Location
    Boulder, CO Suburbia (Lafayette)
    Posts
    388
    Vote Rating
    1
    zhegwood is on a distinguished road

      0  

    Default


    Oh, and for your other question, you can just create the panel separately and set it to a variable if you want to access it without using Ext.getCmp(...).

    Code:
    //you'd just build it like this
    var blah = new Ext.Panel({
     ..config..
    });
    
    //then in the other panel you'd add it like this
    items: [
        blah
    ]
    Giving it an id and using Ext.getCmp works just fine though.

  9. #9
    Sencha User
    Join Date
    Aug 2012
    Posts
    1
    Vote Rating
    0
    manish@smartshore.nl is on a distinguished road

      0  

    Default Design pattern auto height for inner pannels

    Design pattern auto height for inner pannels


    Hi, i an new to ExtJS. Sure anyone will help me.
    I have a viewport which helds tabpanel. In a tab there are three panels. Two parallel panel with data grid list and one at bottom for a form. Viewport is extending accordingly, but can i give the inner grids and form panel any kind of auto height so the page will cover all the outer panel.

  10. #10
    Sencha User
    Join Date
    Jun 2014
    Posts
    14
    Vote Rating
    0
    rajdev0791 is on a distinguished road

      0  

    Default


    Hi Everyone. I want to be able to generate textboxes dynamically, which i am able to but the layout of the controls is messed up. https://fiddle.sencha.com/#fiddle/77g. They seem ok except for the missing images, but if i cut and paste the code as it in App.JS and include the same in index.html , you would observe that the icons are not being inserted properly. Secondly the controls are getting added in the beginning rather than at the end.