Hi,
I am trying to display treePanel in west region of border layout from last 5 hours but the problem is nothing is displayed in west region and interestingly no error in firebug.
Can u please tell me can I have treepanel as a region(I think we can as it is a panel)
if so What is wrong with the code below:-
Copy the code in a file say 1.html and paste 1.html in ext-2.1\ext-2.1\examples\layout folder of ext download.
Code:
<html>
<head>
<title>Complex Layout</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script> <!-- ENDLIBS -->
<script type="text/javascript" src="../../ext-all.js"></script>
<!--<script language="javascript" src="../grid/PropsGrid.js"></script>-->
<style type="text/css">
html, body {
font:normal 12px verdana;
margin:0;
padding:0;
border:0 none;
overflow:hidden;
height:100%;
}
</style>
<script type="text/javascript">
Ext.onReady(function(){
var treePanel = createTreePanel("treePanel1" , "west");
//alert("treePanel.isVisible() ="+treePanel.isVisible());
var viewport = new Ext.Viewport({
layout:'border',
items:[treePanel ,{
region:'center',
contentEl:'center2',
autoScroll:true
},
{
region:'north',
contentEl:'north',
height:100,
autoScroll:true
}
]
});
});
function createTreePanel(el , region){
var treePanel = new Ext.tree.TreePanel({
region:region,
width:250,
el:el,
animate:true,
autoScroll:true,
enableDD:false,
containerScroll: true
});
var rootNodeObj = new Object();
rootNodeObj.text = 'Root';
rootNodeObj.id = 'Root_id';
rootNodeObj.allowChildren = true;
var root = new Ext.tree.TreeNode(rootNodeObj);
treePanel.setRootNode(root);
// render the tree
treePanel.render();
node1 = new Ext.tree.TreeNode({
text: 'node1 title',
id: 'node1_id',
cls: 'some_class',
allowChildren: true
});
childnode1 = new Ext.tree.TreeNode({
text: 'node2 title',
id: 'node2_id',
cls: 'some_class',
allowChildren: false
});
node1.appendChild(childnode1);
root.appendChild(node1);
root.expand(false);
return treePanel;
}
</script>
</head>
<body>
<div id="treePanel1">
</div>
<div id="center2">
center region
</div>
<div id="north">
</div>
</body>
</html>
Thanks.
with regards
treepanel in borderlayout problem
Reply With Quote