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
    8,927
    Answers
    656
    Vote Rating
    443
    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
    8,927
    Answers
    656
    Vote Rating
    443
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi