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,503
    Vote Rating
    49
    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,503
    Vote Rating
    49
    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,503
    Vote Rating
    49
    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,503
    Vote Rating
    49
    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