Hi all,
I want to construct a Panel with a TabPanel inside and put a TreePanel into each tab (see the first attached image).
When I try to insert the second tree into the tab 'Categoria test' it is not added to the tab but appears under the first tree (see the second attached image).
It seem to be an id collision, but I can't find where the problem is...
Firebug does not show any errors.
Please help!!
Thanks,
Marco
This is the html code:
Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>2 Lonely Trees</title>
<link rel="stylesheet" type="text/css" href="/extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="tree.js"></script>
<script type="text/javascript" src="main.js"></script>
<link rel="stylesheet" type="text/css" href="base.css" />
<script type="text/javascript">
Ext.onReady(digitalAsset.app.init, digitalAsset.app);
</script>
</head>
<body>
<div id="sta_minchia"></div>
<div id="thumbnails"></div>
<div id="tree-div" style="overflow: auto; height: 300px;"></div>
<div id="tree-category-div" style="overflow: auto; height: 244px;"></div>
<div id="status_bar">Ready</div>
</body>
</html>
tree.js:
Code:
var TreeCreator = function(){
var Tree = Ext.tree;
var tree = new Tree.TreePanel({
el:'tree-div',
animate:true,
autoScroll:true,
loader: new Tree.TreeLoader({dataUrl:'getTreeCategoryNodes.php'}),
enableDD:true,
containerScroll: true,
dropConfig: {appendOnly:true}
});
var root = new Tree.AsyncTreeNode({
text: 'Ext JS',
draggable:false, // disable root node dragging
id:'async-root'
});
//--------------------------------------------
var tree2 = new Tree.TreePanel({
el:'tree-category-div',
animate:true,
autoScroll:true,
loader: new Tree.TreeLoader({dataUrl:'getTreeCategoryNodes.php'}),
containerScroll: true,
enableDD:true,
dropConfig: {appendOnly:true}
});
var root2 = new Tree.AsyncTreeNode({
text: 'My Files',
draggable: false,
id:'async-cat-root'
});
return {
init : function(){
tree.setRootNode(root);
tree.render();
root.expand(false, /*no anim*/ false);
//-------------------------------------------------------------
tree2.setRootNode(root2);
tree2.render();
root2.expand(false, /*no anim*/ false);
},
getTree: function() { return tree; },
getTree2: function() { return tree2; }
};
}();
main.js:
Code:
// create namespace
Ext.namespace('digitalAsset.app');
digitalAsset.app = function()
{
// public space
return {
init: function()
{
Ext.QuickTips.init();
TreeCreator.init();
var myCallback = function() { }
// pannello che contiene l'albero delle categorie
var slideCategoryPanel = new Ext.Panel({
renderTo: 'sta_minchia',
frame: false,
border: false,
title: 'Navigazione',
collapsible: true,
titleCollapse: true,
items: new Ext.TabPanel({
id: 'category-tab-panel',
resizeTabs: true,
border: false,
minTabWidth: 105,
activeTab: 0,
tabWidth: 110,
enableTabScroll: false,
height: 270,
defaults: {autoScroll: false},
cls: 'categoryTabTool',
items: [
{iconCls: 'nav', title: 'Directory', items: TreeCreator.getTree2()},
{iconCls: 'user', title: 'Categoria test', items: TreeCreator.getTree()}
//{title: 'Directory', items: new Ext.Button({text: 'Aggiungi categoria', handler: myCallback})}
]
})
});
}
};
}();
Problem using Multiple tree, TreePanel
Reply With Quote
