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>