How to make tree panel height 100% inside accordion layout

**pmadhur** · 21 Dec 2008, 1:54 PM

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.

**mjlecomte** · 21 Dec 2008, 2:00 PM

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.

**pmadhur** · 21 Dec 2008, 2:09 PM

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

**Animal** · 22 Dec 2008, 12:55 AM

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

**pmadhur** · 22 Dec 2008, 3:51 AM

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>

**Animal** · 22 Dec 2008, 3:53 AM

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

**pmadhur** · 22 Dec 2008, 4:57 AM

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

**Animal** · 22 Dec 2008, 7:27 AM

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)

**pmadhur** · 22 Dec 2008, 7:56 AM

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);
                }

**Animal** · 22 Dec 2008, 8:48 AM

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

Thread: How to make tree panel height 100% inside accordion layout

Thread Tools

Search Thread

Display

How to make tree panel height 100% inside accordion layout

Posting Permissions

Stay Connected

Stay Connected

Sign up for Sencha News