PDA

View Full Version : unable to bring treepanel inside formpanel



pailyanish
29 Sep 2009, 2:47 AM
i am new to extjs
can anyone tell me wat is the problem with my code
i am no able to bring treepanel inside a formpanel

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Layers</title>
<link rel="stylesheet" type="text/css" href="http://localhost/ext-3/resources/css/ext-all.css"/>
<script type="text/javascript" src="http://localhost/ext-3/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://localhost/ext-3/ext-all.js"></script>

<style type="text/css">
.layerinfo {
width:16px;
margin-left:250px;
margin-top:-21px;
height:16px;
background-image:url(visimages/layerinfo.png);
background-repeat:no-repeat;
}
.download {
width:16px;
margin-left:300px;
margin-top:-17px;
height:16px;
background-image:url(visimages/download.png);
background-repeat:no-repeat;
}
.x-tree-node-el.x-tree-node-leaf.x-unselectable {
font-size:12px;
margin-top:5px;

}
.x-tree-node-cb{
margin-top:3px;
}
.x-tree-node a{
font-size:12px;
}

.x-tree-node-expanded .x-tree-node-icon{
background-image:url(visimages/folderopen.png);
}

.x-tree-node-collapsed .x-tree-node-icon {
background-image:url(visimages/folderclose.png);
}
</style>

</head>
<body>
<script>
Ext.onReady(function(){
layerTreeLib = new Ext.tree.TreePanel({
id:'layer_container',
title:'Layer Themes',
height:400,
border:true,
frame:true,
bodyStyle:'padding:5px 10px 0',
minSize: 150,
width : 400,
rootVisible: false,
singleExpand: true,
root: new Ext.tree.AsyncTreeNode({
id :'root',
children: [
{
text:'Environment',id:'environment', leaf:false,
expanded:true,
children :
[
{text:'Birds', id :'1',leaf:true,checked:false},
{text:'Vembanadu Bird Count',id:'2',leaf:true,checked:false},
{text:'Fishes', id:'3',leaf:true,checked:false},
{text:'Vembanadu Fish Count',id:'4',leaf:true,checked:false},
{text:'Mangroves',id :'5',leaf:true,checked:false},
{text:'Hydrology',id :'6',leaf:true,checked:false},
{text:'Water Quality',id :'7',leaf:true,checked:false},
{text:'Community Monitoring',id :'8',leaf:true,checked:false},
{text:'Rivers',id :'9',leaf:true,checked:false},
{text:'Water Sheds',id :'10',leaf:true,checked:false},
{text:'Bio-Physical Environment',id :'11',leaf:true,checked:false},
{text:'Soil',id :'12',leaf:true,checked:false}
]
},
{
text:'Lively Hoods',id:'livelyhoods',leaf:false,
expanded:true,
children :
[
{text:'Agriculture', id :'13',leaf:true,checked:false},
{text:'Fisheries',id:'14',leaf:true,checked:false},
{text:'Aquaculture',id:'15',leaf:true,checked:false},
{text:'Clams', id:'16',leaf:true,checked:false},
{text:'Coir', id:'17',leaf:true,checked:false},
{text:'Tourism', id:'18',leaf:true,checked:false},
{text:'Navigation', id:'19',leaf:true,checked:false}
]
}
]
})
});

layerTreeLib.render(document.body);
layerdivs= new Array();
var divs=document.getElementById('layer_container').getElementsByTagName("div");

var i ,j =0;
for(i =0;i<divs.length;i++){
if(divs[i].className == 'x-tree-node-el x-tree-node-leaf x-unselectable '){
layerdivs[j] = divs[i];
j++;
}
}

//alert(layerdivs.length);
for(i =0;i<layerdivs.length;i++){

id_layerinfo = 'layerinfo'+i;
id_download = 'download'+i;
var dh =Ext.DomHelper;
dh.append(layerdivs[i],[
{
tag:'div',
id:id_layerinfo,
cls : 'layerinfo'

},{
tag:'div',
id:id_download,
cls : 'download'
}
]);
}

var layerform=new Ext.FormPanel({
border:true,
frame:true,
title:'LayerPanel',
width : 500,
height : 600,
items:[layerTreeLib]

});
});
</script>
</body>
</html>
thanks in advance

14 Oct 2009, 3:30 AM
Don't render the tree panel, it will be a child to the form panel.

*do* render the formpanel though.