PDA

View Full Version : hide a tab inside tabpanel



pailyanish
8 Oct 2009, 12:37 AM
hi,

i am using extjs 3

i have two tree panels one tree is hidden intially and i have put both these trees inside a tabpanel

now on initially loading page i want my second tab-panel to be hidden and show it when i check the check box of first tab treel panel


<!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>
</head>
<body>
<div id='layer'></div>
<script>
Ext.onReady(function(){
var layerTreeLib = new Ext.tree.TreePanel({
id:'layer_container',
bodyStyle:'padding:5px 10px 0',
rootVisible: false,
trackMouseOver:true,
title:'Layer Themes',
collapsible:true,
height:400,
singleExpand: true,
baseCls:'layers',
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,
style:'margin-bottom:10px;',
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,
leaf:true

});

selected.getRootNode().appendChild(child);
//tabs.doLayout();
selected.getRootNode().expand();
selected.show();
}

});
var selected = new Ext.tree.TreePanel({
id : 'sel_layers_tree',
title : 'Layer Manager',
bodyStyle :'padding:5px 10px 0',
height:400,
rootVisible : true,
autoHeight:true,
enableDD:true,
trackMouseOver:false,
//tabCls : 'x-hidden',
autoShow:true,
autoScroll: true,
root: new Ext.tree.TreeNode({text:'Selected Layers', id: 'selectednode', expanded:true}),
listeners: {
'render':function(){
this.hide();
}
}
});

var tabs = new Ext.TabPanel({
id:'layer_tab',
height:500,
width:600,
renderTo:'layer',
activeTab: 0,
items:[
layerTreeLib,
selected

]
});


});
</script>

</body>


thanks in advance