1. #1
    Ext User
    Join Date
    Dec 2008
    Posts
    8
    Vote Rating
    0
    pmadhur is on a distinguished road

      0  

    Default How to make tree panel height 100% inside accordion layout

    How to make tree panel height 100% inside accordion layout


    Hi,

    I have the following html:

    HTML Code:
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"></link>
    <script type="text/javascript" src="adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ext-all.js"></script>
    </head>
    
    <body>
    <div id="dummytreediv">
    <div id="actualtreediv" />
    </div>
    <div id="searchdiv" />
    <div id="centerdiv" />
    <script type="text/javascript">
    Ext.onReady(function() {
        var item1 = new Ext.Panel({
            title: 'Tree',
            contentEl: 'dummytreediv'
        });
    
        var item2 = new Ext.Panel({
            title: 'Search',
            contentEl: 'searchdiv'
        });
        var viewport = new Ext.Viewport({
            layout: 'border',
            items: [
                new Ext.Panel({
                    region: 'west',
                    width: 210,
                    margins: '5 0 5 5',
                    split: true,
                    layout: 'accordion',
                    layoutConfig: {
                        animate: true
                    },
                    items: [item1, item2]
                }),
                new Ext.Panel({
                    margins: '5 5 5 0',
                    region: 'center',
                    contentEl: 'centerdiv'
                })
            ]
        });
    
        var tree = new Ext.tree.TreePanel({
            el: 'actualtreediv',
            autoScroll: true,
            height: 80,
    
            root: new Ext.tree.TreeNode({
                text: 'Root'
            })
        });
        tree.render();
        tree.getRootNode().expand();
        
    });
    </script>
    </body>
    </html>
    I would like to have the height of tree to be 100% and not fixed height of 80. If I add the tree panel directly to the accordion layout items, it works as I want. But is it possible to have something like i specified in my html? Can anybody guide me how to acheive that.

    Thanks in advance,
    Madhu.

  2. #2
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    You could maybe try autoHeight: true, but I kind of doubt that will work. Works best if the component is inside a container with a known height then it can be fully expanded to fit that container.

  3. #3
    Ext User
    Join Date
    Dec 2008
    Posts
    8
    Vote Rating
    0
    pmadhur is on a distinguished road

      0  

    Default


    I have tried autoHeight: true. Its height is set to the height of the tree contents, not 100%.

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,499
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    You will have to add a resize listener to the accordion Panel, and programmatically set the size of the inner Panels to the size of the container

  5. #5
    Ext User
    Join Date
    Dec 2008
    Posts
    8
    Vote Rating
    0
    pmadhur is on a distinguished road

      0  

    Default


    Thanks for your help, I added the resize listener, but I was not successful. Can you let me know what mistake I am making here.
    Following resize handler I added:
    Code:
                    onResize: function() {
                        Ext.Panel.prototype.onResize.apply(this, arguments);
                        this.items.each(function(i) {
                            if (i.rendered) {
                                var height = this.body.getHeight(true);
                                i.setHeight(height);
                                var treediv = Ext.getCmp('actualtreediv');
                                if(treediv)
                                    treediv.setHeight(height);
                            }
                        }, this);
                    }
    Here is the complete html:

    HTML Code:
    
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"></link>
    <script type="text/javascript" src="adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ext-all.js"></script>
    </head>
    
    <body>
    <div id="dummytreediv">
    <div id="actualtreediv" />
    </div>
    <div id="searchdiv" />
    <div id="centerdiv" />
    <script type="text/javascript">
    Ext.onReady(function() {
        var item1 = new Ext.Panel({
            title: 'Tree',
            contentEl: 'dummytreediv'
        });
    
        var item2 = new Ext.Panel({
            title: 'Search',
            contentEl: 'searchdiv'
        });
        var viewport = new Ext.Viewport({
            layout: 'border',
            items: [
                new Ext.Panel({
                    region: 'west',
                    width: 210,
                    margins: '5 0 5 5',
                    split: true,
                    layout: 'accordion',
                    layoutConfig: {
                        animate: true
                    },
                    items: [item1, item2],
                    onResize: function() {
                        Ext.Panel.prototype.onResize.apply(this, arguments);
                        this.items.each(function(i) {
                            if (i.rendered) {
                                var height = this.body.getHeight(true);
                                i.setHeight(height);
                                var treediv = Ext.getCmp('actualtreediv');
                                if(treediv)
                                    treediv.setHeight(height);
                            }
                        }, this);
                    }
    
                }),
                new Ext.Panel({
                    margins: '5 5 5 0',
                    region: 'center',
                    contentEl: 'centerdiv'
                })
            ]
        });
    
        var tree = new Ext.tree.TreePanel({
            el: 'actualtreediv',
            autoScroll: true,
    
    
            root: new Ext.tree.TreeNode({
                text: 'Root'
            })
        });
        tree.render();
        tree.getRootNode().expand();
    });
    </script>
    </body>
    </html>

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,499
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    So when you step through that code in Firebug, why is it going wrong?

  7. #7
    Ext User
    Join Date
    Dec 2008
    Posts
    8
    Vote Rating
    0
    pmadhur is on a distinguished road

      0  

    Default


    If step though the code "i.rendered" is always false.

  8. #8
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,499
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    You'll have to skip sizing items if they are not rendered. A Container can get sized before it lays its child items out for the first time (which forces them to be rendered)

  9. #9
    Ext User
    Join Date
    Dec 2008
    Posts
    8
    Vote Rating
    0
    pmadhur is on a distinguished road

      0  

    Default


    Finally, it works, but I am not sure if its the right way to do that.

    Here is working code:

    Code:
                    onResize: function() {
                        Ext.Panel.prototype.onResize.apply(this, arguments);
                        this.items.each(function(i) {
                            //if (i.rendered) {
                                var height = this.body.getHeight(true);
                                i.setHeight(height);
                                var treediv = Ext.get('actualtreediv'); //Ext.getCmp('actualtreediv');
                                if(treediv)
                                {
                                    treediv.setHeight(height);
                                }
                            //}
                        }, this);
                    }

  10. #10
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,499
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Well, it's i you need to set height on isn't it? You want all your items full height don't you?

Thread Participants: 2

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