PDA

View Full Version : unable to dynamically generate a treepanel



pailyanish
29 Sep 2009, 9:10 PM
hai
i am new to extjs iam using extjs3
my problem is i have a treepanel
in that on check change i should able o generate another tree panel
i dont know wat is the problem in my code



<!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>
<div id='layer'></div>
<script>
Ext.onReady(function(){
var 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.on('checkchange',function(node,checkflag){
var text = node.text;
var id= node.id;
sel_id = id+"-"+"sel";
if(checkflag == true){
var child = new Ext.tree.TreeNode({
text: text,
checked:true,
draggable:true,
id:sel_id
});

eval("layer"+id).setVisibility(1);

if(selected.getChecked().length == 1){
selected.getRootNode().appendChild(child);
selected.getRootNode().expand();
selected.show();
}
}
/*else if(checkflag == false){
eval("layer"+id).setVisibility(0);
node_to_remove = selected.getNodeById(sel_id);
selected.getRootNode().removeChild(node_to_remove);
}*/
});
var selected = new Ext.tree.TreePanel({
id : 'sel_layers_tree',
title : 'Layer Manager',
split : true,
height : 'auto',
frame : true,
border : true,
bodyStyle :'padding:5px 10px 0',
minSize : 150,
width : 220,
rootVisible : true,
useArrows : true,
root: new Ext.tree.TreeNode({text:'Selected Layers', id: 'selectednode', expanded:true}),
listeners: {
'render':function(){
this.hide();
}
}
});

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({
frame:true,
border:true,
title:'LayerPanel',
layout:'fit',
width:450,
renderTo:'layer',
height:500,
items:[layerTreeLib]
});

});
</script>
</body>
</html>


thanks in advance

evant
30 Sep 2009, 1:03 AM
Please post help requests in the help forum.

Also please properly format your code using code tags so that it is readable.