dijit
Version:
Dijit provides a complete collection of user interface controls based on Dojo, giving you the power to create web applications that are highly optimized for usability, performance, internationalization, accessibility, but above all deliver an incredible u
96 lines (82 loc) • 2.52 kB
HTML
<html lang="en">
<head>
<title>Custom TreeNode Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="../boilerplate.js" type="text/javascript"></script>
<script type="text/javascript">
require([
"dojo/_base/declare", "dojo/data/ItemFileReadStore", "dojo/dom-construct",
"dijit/_WidgetBase", "dijit/Tree", "dijit/tree/ForestStoreModel",
"dojo/domReady!"
], function(declare, ItemFileReadStore, domConstruct,
_WidgetBase, Tree, ForestStoreModel){
declare("SuperSmartLink", _WidgetBase, {
buildRendering: function(){
this.domNode = document.createElement("A");
this.domNode.href = "http://ibm.com";
this.inherited(arguments);
}
});
declare("SuperSmartTreeNode", Tree._TreeNode, {
postCreate: function(){
this.inherited(arguments);
this._smartLink = new SuperSmartLink();
this.contentNode.appendChild(this._smartLink.domNode);
// in real application this is done by template modification tree node class
domConstruct.place(this.labelNode, this._smartLink.domNode, "first");
}
});
declare("SuperSmartTree", Tree, {
focusNode: function(node){
this.inherited(arguments);
this.dndController.setSelection([node]);
},
_createTreeNode: function(args){
return new SuperSmartTreeNode(args);
}
});
var getChildren = function(depth, parent){
var classChildren = [];
for (var i = 0; i < 3; i++){
var child = {
id: parent+"_" + i,
name: parent+"_" + i
};
if (depth < 2 && i === 0){
child.children = getChildren(depth+1, child.id);
}
classChildren.push(child);
}
return classChildren;
};
var store = new ItemFileReadStore({
data: {
identifier: 'id',
label: 'name',
items: [
{id:"rrroot", name:"The Root", type:"", children: getChildren(0, "Child")}
]
}
});
var model = new ForestStoreModel({
store: store,
query:{type:'*'},
childrenAttrs: ["children"]
});
tree = new SuperSmartTree({
"model": model,
showRoot: false,
persist: false
}).placeAt("AAA");
tree.startup();
});
</script>
</head>
<body class="claro" role="main">
<h1 class="title">Please expand Continent node</h1>
<div id="AAA" style="overflow: auto; height: 1000px">
</div>
Footer is here
</body>
</html>