Creating Ext.tree.TreePanel from static JSON data in one shot :: I tried the example with ext 2.0 (I needed to convert the first argument of the TreePanel constructor to the "el" property in the config parameter). http://www.extjs.net/forum/showthread.php?t=4595&page=2HOME | My treePanel worked well in 1.1 but now doesn't render in 2.0. I don't understand entirely how it works in 2.0. In 1.1 I rendered the layout and then ran the function to create the tree and assigned the tree to the in the HTML. Now it seems I have to config everything in the layout, but where do I set the root node? Where do I define the reload functions.
It looks like going to 2.0 is a major rewrite. To get the app's menu to render in the layout I had to construct the menu before the layout. This was not the case in 1.1 and the problem wasn't so easy to solve.
That all looks reasonably correct, what is the particular problem you're having?
Well you don't need to use renderTo since you are creating it with the Layout Manager... Wrap your root node in an AsyncTreeNode constructor. What happens when you run the code? :)
As Aaron said, you shouldn't use renderTo when you're nesting an item, and you need to wrap the root node in a constructor.
Tree's are actually one of the packages that changed the least between 1.x and 2.0. As evant suggested post your code and let us know what you are having problems with.
That all looks reasonably correct, what is the particular problem you're having?
The call to the server doesn't happen and there's no tree visible.
Well, there isn't much code to speak of:
Here the old code that worked fine:
var agencyTree = function(){
return{
mytree : null,
init : function(){
Tree = Ext.tree;
this.myTree = new Tree.TreePanel('agencyTree', { Sothink Tree Menu 2.3 free download:: High compatibility with browsers, Firefox 2.0 and Opera 9 included. text or replace image to build a new tree menu; for intuitive interface, tree panel, http://www.soft3k.com/Sothink-Tree-Menu-p13166.htmHOME | Phylo-mLogo Patch Log:: Add a close button on the logo info panel. - Add a new tree file filter "*.nwk" . Version 2.0 is downloaded 16 times. Version 1.1 is downloaded 45 times. http://cg1.iis.sinica.edu.tw/new/phylomlogo/patch.phpHOME |
animate:true,
loader: new Tree.TreeLoader({
dataUrl:'ajaxAdminRequest.php',
baseParams:{typeID:'getAgencies'}
}),
});
// set the root node
var root = new Tree.AsyncTreeNode({
text: 'Agencies',
draggable:false,
id:'source'
});
this.myTree.setRootNode(root);
this.myTree.render();
root.expand();
},
reloadTree : function(){
this.myTree.root.reload();
}
}
}();
Ext.onReady(agencyTree.init, agencyTree, true);
Here the 2.0 botch job I'm working on now:
function buildLayout(){
var viewport = new Ext.Viewport({
layout:'border',
items: [
new Ext.BoxComponent({
region:'north',
el: 'north',
height:65,
collapsible:false
}), {
region:'south',
contentEl:'south',
title:'System Information',
autoScroll: false,
closeable:false,
height:56,
margins: '0 0 0 0'
} , {
region:'west',
border:false,
id:'west-panel',
width:200,
split:true,
margins:'0 0 0 5',
collapsible: true,
minSize: 100,
maxSize: 400,
closeable:false,
autoScroll:false,
title:'Agencies',
items: [
new Ext.tree.TreePanel({
animate:true,
renderTo:'agencyTree',
loader: new Ext.tree.TreeLoader({
dataUrl:'ajaxAdminRequest.php',
baseParams:{typeID:'getAgencies'}
}),
root: {
text: 'Agencies',
draggable:false,
id:'source'
}
})
]
}, {
region:'center',
deferredRender:false,
title:"Agency Information"
}
]
});
};
Ext.EventManager.onDocumentReady(buildLayout);
Whoa!!! I worked!!!
Thanks, guys.
Last question. How do I reference this tree to reload it?
Also.... what is the purpose of ahving the additional nested panel in the west region? When nesting panels you need to make sure you explicitly set layout managers or you will run into cross-browser issues.
Basically, if you specify a component as a child component, you don't give it an element to render to, this is automatically handled by the container.
When he says wrap it in a constructor, instead of using:
root:
{
//config
}
You should use:
root: new Ext.tree.AsyncTreeNode(
{
//config
}
);
To keep a reference to it, give the TreePanel an id, then use
Ext.getCmp('myid');
Well you don't need to use renderTo since you are creating it with the Layout Manager...
OK...
rap your root node in an AsyncTreeNode constructor. What happens when you run the code? :)
pzinggg. right over my head on that one. Can you show an example? The call never gets made to the server.
Also, how do I reference this tree when I need to reload it? It's no longer a var.
Nice! OK. Thanks.
As before, please post your code, we can't really help without it.
Red Hat's Rough Recovery From CFO Exit
Windows Live Finds a New, Pre-installed Home |