1. #1
    Sencha User
    Join Date
    Mar 2007
    Posts
    580
    Vote Rating
    0
    dolittle is an unknown quantity at this point

      0  

    Default Unanswered: auto height for a container with border layout

    Unanswered: auto height for a container with border layout


    Hi,

    I'm rendering a container with border layout in a div.
    I want the container to get the maximum available height - auto height.
    There is no autoHeight settings in extjs 4 and the container should use autoHeight if height is not set.

    How do I make it work with border layout?

    Code:
    Ext.define('Myapp.view.Main', {
        extend: 'Ext.container.Container',
        alias: 'widget.myapp.main',
        
        initComponent: function() {
            Ext.apply(this, {
    	    renderTo: 'main-wrapper',
                layout: 'border',
    
                items: [{
                    region: 'north',
                    height: 50,
                    title: 'north'
                }, {
                    region: 'west',
                    width: 20,
                    title: 'nav'
                }, {
                    region: 'center',
                    width: 800,
                    title: 'center'
                }]
            });
            this.callParent(arguments);
        }
    });
    Thanks

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,085
    Answers
    675
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      1  

    Default


    Border layout does support 'autoHeight'.

    You could use something like the following. Please note that the North Panel in this example uses '%' and is currently not working as expected. Once this is corrected, this should be a working solution:

    Code:
    Ext.define('Myapp.view.Main', {
        extend: 'Ext.panel.Panel', //Ext.container.Container 
        // alias: 'widget.myapp.main', // illegal alias ... no period allowed for xtype
        
        initComponent: function() {
            Ext.apply(this, {
                layout: {
                    type: 'vbox', // border vbox
                    align: 'left' // default
                },    
    
                items: [{
                    height: 50,
                    width: '100%', // does not work in RC3- schedule for GA
                    title: 'north'
                }, {
                    width: 20,
                    title: 'nav'
                }, {
                    width: 800,
                    title: 'center'
                }]
            });
            this.callParent(arguments);
        }
    });
    
    
    Ext.onReady(function(){
    
        var mycontainer = Ext.create('Myapp.view.Main', {
            renderTo: 'sencha-div' 
        }); 
    
        Ext.EventManager.onWindowResize(mycontainer.doLayout, mycontainer);
    
    });

  3. #3
    Sencha User
    Join Date
    Mar 2007
    Posts
    580
    Vote Rating
    0
    dolittle is an unknown quantity at this point

      0  

    Default


    I'm asking about Ext.layout.BorderLayout:
    "multi-pane, application-oriented UI layout style that supports multiple nested panels, automatic bars between regions and built-in expanding and collapsing of regions."

    You are suggesting Ext.layout.HBoxLayout
    "A layout that arranges items horizontally across a Container. This layout optionally divides available horizontal space between child items containing a numeric flex configuration."

    That's not the same thing.

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,085
    Answers
    675
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    You are suggesting Ext.layout.HBoxLayout
    Not sure where you saw hbox, but my example is using vbox.
    You can add flex to grow with height .. .

    Point being .. borderlayout will not support autoHeight.

    Regards,
    Scott.

  5. #5
    Sencha User
    Join Date
    Mar 2007
    Posts
    580
    Vote Rating
    0
    dolittle is an unknown quantity at this point

      0  

    Default


    I meant vbox, it's the same thing.
    Any reason why borderLayout can't support autoHeight?

Thread Participants: 1