Dojo Dijit and HTML5 in Real world applications/Dijit/dijit.Tree: Difference between revisions
Line 72: | Line 72: | ||
</script> | </script> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Play with the working example found here: [http://pmis.biz/rwa/dijit.tree_1.php dijit.tree example 1]. There is also a tab showing the Json file used in the example. | Play with the working example found here: [http://pmis.biz/rwa/dijit.tree_1.php dijit.tree example 1]. There is also a tab showing the Json file used in the example. It is possible to test the code in various dojo versions. | ||
==AccordionContainer== | ==AccordionContainer== |
Latest revision as of 18:13, 3 March 2012
dijit.Tree
This article show how to implement a dijit.Tree.
Dijit.Tree populated from a relational database
This tree is populated from a relational database where the children refer to the parents. (The normal example is where the parents hold a list of children).
The getChildren function is overwritten with a custom function. First the root is loaded (all top level items) then the children is loaded. In this implementation the server is only asked on time to get the file. Use the Firefox bugtrace to see how the children is loaded.
<script>
dojo.ready(function(){
var store = new dojo.data.ItemFileWriteStore({
url: "data/ProjectList.php"
});
var treeModel = new dijit.tree.ForestStoreModel({ //ForestStoreModel
store: store,
query: {"main": "0"}, // Call all parents (Not used: Implemented in getChildren)
rootId: "project",
rootLabel: "Projects",
mayHaveChildren : function(item) {
return true;
},
var getChildren: function(parentItem, callback, onError) {
if( parentItem.root == true ){
console.debug("Root onLoad here!");
if(this.root.children){
console.debug("--already loaded, just return!");
callback(this.root.children);
}else{
this.store.fetch({
query: this.query, // Call all parents
queryOptions: {cache:false},
onComplete: dojo.hitch(this, function(items){
this.root.children = items;
callback(items);
}),
onError: onError
});
}
} else {
console.debug("Tree child onLoad here: "+parentItem.id);
//console.debug(toString(parentItem.id);
var sx = parseInt(parentItem.id);
this.store.fetch({
query: { main: sx }, //Find all children based on parentItem.id parentItem.id
queryOptions: {cache:false},
onComplete: dojo.hitch(this, function(items){
this.root.children = items;
callback(items);
}),
onError: onError
});
} // if( parentItem.root == true )
} // getChildren
}); // treeModel
var myTree = new dijit.Tree({
model: treeModel,
openOnClick:true,
showRoot: false
}, "treeThree");
}); //dojo.ready
</script>
Play with the working example found here: dijit.tree example 1. There is also a tab showing the Json file used in the example. It is possible to test the code in various dojo versions.
AccordionContainer
The tree is implemented in a dijit.layout.AccordionContainer in the working example found here: dijit.tree example 1.
Verified in
IE 8, Firefox 3.6.22, Dojo 1.6.1
References
Document History
Version | Date | Author | Status | Purpose of update |
---|---|---|---|---|
1 | 1 Mar 2012 | PSA | Draft | Not released. |