[Dojo-interest] Help: dijit.Tree

Peter Ansell ansell.peter at gmail.com
Mon Dec 10 20:45:29 UTC 2007


The following code works for me with a two level tree including a
destroy and recreate refresh as I couldn't be bothered figuring out
what changed and where to put things and resort them each time using
the store api. For some strange and unknown reason 'type' had to be in
an array or it gave me errors.... who knows! (don't ask me how many
hours my employer let me work on just that code for!)

	var treeName = "ELP_tree_static_container_node";
	
	var jsonTreeObject = {
		identifier: 'treeNodeId',
		label: 'name',
		items: []
	}
		
	for(var i = 0; i < exerciseObject.files.length; i++)
	{
		// we use currentExercisePosition to note down where this exercise
is on the overall items array,
		// as it is a referenced array with both files and gaps on the top level
		var currentExercisePosition = jsonTreeObject.items.push({
				name: [exerciseObject.files[i].name],
				treeNodeId: FILE_NAME + "_" + i,
				type: [FILE_NAME]
		}) - 1; // NOTE: -1 is necessary to change from 1->n notation to
0->n-1, as the returned value from push is the new number of elements,
with this element being the last one
				
			// initialise the children array
			jsonTreeObject.items[currentExercisePosition].children = [];
			
			for(var j = 0; j < exerciseObject.files[i].gaps.length; j++)
			{
				jsonTreeObject.items[currentExercisePosition].children.push({
						name: [exerciseObject.files[i].gaps[j].gapName],
						treeNodeId: GAP_NAME + "_" + i + "_" + exerciseObject.files[i].gaps[j].id,
						type: [GAP_NAME]
				});
			}
	} // end for(var i = 0; i < exerciseObject.files.length; i++)

	var treeObject = dijit.byId(treeName);

	console.debug("ELP_AJAX.populateTree: treeObject");
	console.debug(treeObject);
	
	// check to see whether we have done something with the tree before
	if(treeObject)
	{
		treeObject.destroy();
		
		// recreate ELP_tree_static_container_node
		var newContainerElement = dojo.doc.createElement("div");
		
		newContainerElement.id = treeName;
		
		// attach the new element to its container
		// it is a dijit.layout.ContentPane but hopefully that does not
change things... it seems to work
		dojo.byId("ELP_tree_content_pane_node").appendChild(newContainerElement);
	}
	
	ELP_OBJ.jsonTreeObject = jsonTreeObject;

	var treeStore = new dojo.data.ItemFileWriteStore({
			data: ELP_OBJ.jsonTreeObject
	});
	
	ELP_OBJ.jsonTreeStore = treeStore;
	
        // NOTE: comment the label out to hide the root node
	treeObject = new dijit.Tree({
		id: treeName,
		label: "Files",
		store: ELP_OBJ.jsonTreeStore,
		query: {type: FILE_NAME},
		onClick: ELP_AJAX.treeClick
	},
	dojo.byId(treeName));

On 11/12/2007, Daniel <daniel.carrera at zmsl.com> wrote:
> I swear, I'm going to go insane...
>
>
> I can't figure out how to get a dijit tree working. I have read the
> following:
>
> * Creating a widget programatically
> http://www.dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dijit-and-dojo/manipulating-widgets-through-code/displaying-w
> * Tree widget:
> http://www.dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/advanced-editing-and-display/tree
> * A Simple Tree
> http://www.dojotoolkit.org/book/book-dojo/part-2-dijit-dojo-widget-library/advanced-editing-and-display/tree/simple-tree
>
> You would think that would be enough to make a dumb tree, but apparently
> it isn't.
>
> * Why do I need dojo.data.ItemFileReadStore to make a tree? What if I
> don't want to get the data from a file? Why is that there?
>
> * How *do* I create a tree from a variable? Why does the following code:
>
> var TreeData = { label: 'name',
>                 identifier: 'name',
>                 items: [
>                         { name:'Fruit', type:'category'},
>                         { name:'Cinammon', type: 'category'},
>                         { name:'Chocolate', type: 'category'}
>                 ]
>         }
> var tree = new dijit.Tree( TreeData, dojo.byId('Groups'));
>
>
> Which is taken directly from the book with only the tiniest modification
> give me the error "this.store has no properties". What is a store and
> why do I need one to make a tree? I gave it the data, what more does it
> want?
>
> Help please! :-(
>
> _______________________________________________
> FAQ: http://dojotoolkit.org/support/faq
> Book: http://dojotoolkit.org/docs/book
> Forums: http://dojotoolkit.org/forum
> Dojo-interest at dojotoolkit.org
> http://dojotoolkit.org/mailman/listinfo/dojo-interest
>


More information about the Dojo-interest mailing list