I'm using dijit.Tree, I need to set a node selected by default (after the data loaded) ? I have tried to search it in dojo documentation, but I didn't find it.
You can select a tree node programmatically by setting the tree's 'path' property. A path is an array of string item id’s, starting with the root node and going down to the leaf node which you want selected.
example:
tree.set('path', ['parent', 'child', 'grandchild'])
In this example grandchild is the node you want selected.
Documentation and examples for this can be found on the Dojo website here
Related
I have a tree panel whose nodes are loaded dynamically from the server. When the user expands a node, it will load the children for that node from the server and add them to that node. This part is working.
When the user collapses a node, I'd like to remove all the children from that node and "reset" the node so that it can be exanded again.
So far, I have the following in the collapse event handler:
function(node){
node.removeAll(); // remove all child nodes
// this causes the expand arrow to disappear
node.expandable = true;
// ... now what?
}
How do I "reset" the node (the "... now what?") so that the view knows to add the expand arrow back again?
Essentially I'd like the process of collapsing and then re-expanding a node to reload all of the children under that node.
The solution is to set the loaded field to false. The "expanded" attribute does not need to be changed.
The final solution is:
function(node){
node.removeAll(); // remove all child nodes
node.set('loaded', false); // tell node it can be expanded again
}
I am trying to add children tree nodes to a non-Root node dynamically when it's selected.
This is how I implemented it:
First, I populate my tree with a TreeStore then to dynamically add children tree nodes, I handle it on the itemexpand event in tree Controller.
//pThis is a NodeInterface obj of the selected node
itemexpand: function (pThis, pEOpts) {
//type is an attribute that I added so that I know what type of node that got selected
if (pThis.raw.type === 'Staff' && !pThis.hasChildNodes()) {
var staffNodeAry = [{text:"Teachers", type:"ChildStaff", leaf: false},
{text:"Principals", type:"ChildStaff", leaf: false}];
pThis.appendChild(staffNodeAry);
}
}
This worked quite good because I am able to see both "Teachers" and "Principals" node under "Staff" type but there are 2 issues that I found so far:
1) There's this error on the console:
Uncaught TypeError: Cannot read property 'internalId' of undefined
I don't know why but if anyone could enlighten that would be great.
2) When I expand either "Teachers" and "Principals", the NodeInterface obj that's returned by itemexpand has an undefined raw object.
So I couldn't do this: pThis.raw.type
From my understanding, I don't need to create a new TreeStore to add any new children nodes, I thought that by creating an array of objects that adhere to NodeInterface should be enough but I might be wrong.
If anyone could point me to the right direction, that would be great.
Handi
More info:
What I did was actually following the ExtJs 4 documentation so I believe this is a bug on ExtJs 4 framework.
I also tested this with Extjs-4.1.0-rc3 and it also produced the same error.
I have resolved this issue changing the event itemexpand with the event afteritemexpand. I have no documentation to justify this. The debugger says to me that the view listen for the itemexpand event and do something that goes wrong if add a node manually...
For the question number 2: you have no raw object because it is created by the reader of the store after the load operation. So if you add a node by hand the raw object does not exists.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Model-property-raw
The documentation for .appendChild() functions says:
node : Ext.data.NodeInterface/Ext.data.NodeInterface[]
The node or Array of nodes to append
And you are trying to append an array of 2 objects, but they are not "NodeInterface" instances. So you should create them properly like so:
var nodeToAppend1 = pThis.createNode({text:"Teachers", type:"ChildStaff", leaf: false});
pThis.appendChild(nodeToAppend1);
I remember making the same mistake a year ago, so I hope this helps.
I think it happens because your Ext.TreePanel working asyncroniously. So add process is:
Append Child, add virtual child leaf to your tree, with red mark in corner
Call store's create api
Receive response, if it success=true, change with virtual
The goal of changing is set internakId property, so you can add new child only after this change happens. I think better is write some recursive function and bind it to store's added event
tree.getStore().on('update', addChild);
or
tree.getStore().load({
success: function() {
addChild()
});
In this component
http://wwwendt.de/tech/dynatree/index.html
under 5.4 Loading child nodes on demand ('lazy loading')
it seems that the only way to load the tree nodes in a lazy manner is to grab them from web service. What if I want to grab the nodes from a data structure?
such as:
onLazyRead: function(dtnode){
dtnode.appendAjax({
//url: "sample-data2.json"
//grab the nodes here from array
});
}
Any advice?
Another question: when onLazyRead is executed, does the whole tree get re-rendered again?
You could use
dtnode.addChild(dict);
instead of
.appendAjax(...)
In either case, only the changed nodes should get rendered.
dict must be formatted like the JSON response. You can als generate dict from a given tree or node using the toDict() method.
I want to add a new node to a dijit.ree as a sibling of the currently selected node. I've found sample code (I'm new to dojo) that adds a new item to the tree using the newItem method of ItemFileWriteStore, but the new item always appears at the bottom of the tree. How would I add to the store at a specified position, in particular the position corresponding to the current selection? Pointers to sample code would be welcome :)
Thanks,
Larry
You need to find the parent item of current selected node and use that item as the parent of the newly created item.
store.newItem(itemObj, {parent : parentItem, attribute : children});
Normally an item in the store doesn't have a back pointer points to its parent. So you may need to maintain that yourself. For example, you can store the parent item's id in the child item and use fetchItemByIdentity to get the parent item.
I figured it out; here's the answer for future searchers. Use newItem as Alex suggested. Then use model.pasteItem to reposition the new item. pasteItem takes a parent (selectedNode.item.parent[0]) and a position (selectedNode.getIndexInParent()+1)
Larry
store.newItem is giving an error (Uncaught Error: dojo.data.ItemFileReadStore: Invalid attribute argument. ). Could not really find a fix for this so far and my store does not have duplicate id's.
Hence i tried using model.newItem(newItem, parentItem).
This works perfectly alright.
Thanks,
Srilatha.
I get an XML file From a web service. Now I want to get one of those elements out of the file.
I think I should go use XPath - any good starter reference?
I've just been recovering my XPath skills- this Xslt and XPath Quick Reference sheet is quite a useful reference - it doesn't go into depth but it does list what is available and what you might want to search for more information on.
The w3schools tutorial linked previously isn't that great - it takes a long time to not cover a lot of ground - but it is still worth reading.
Not VB specific, but try this: http://www.w3schools.com/xsl/xpath_intro.asp
One way would be to only extract the needed informations with an xslt file into a new xml and use this new xml as data basis for further processing
If I need to do some XPath, I just tweak one of these examples.
child::node() selects all the children of the context node, whatever their node type
attribute::name selects the name attribute of the context node
attribute::* selects all the attributes of the context node
descendant::para selects the para element descendants of the context node
ancestor::div selects all div ancestors of the context node
ancestor-or-self::div selects the div ancestors of the context node and, if the context node is a div element, the context node as well
descendant-or-self::para selects the para element descendants of the context node and, if the context node is a para element, the context node as well
self::para selects the context node if it is a para element, and otherwise selects nothing
child::chapter/descendant::para selects the para element descendants of the chapter element children of the context node
child::*/child::para selects all para grandchildren of the context node
/ selects the document root (which is always the parent of the document element)
/descendant::para selects all the para elements in the same document as the context node
/descendant::olist/child::item selects all the item elements that have an olist parent and that are in the same document as the context node
child::para[position()=1] selects the first para child of the context node
child::para[position()=last()] selects the last para child of the context node
child::para[position()=last()-1] selects the last but one para child of the context node
child::para[position()>1] selects all the para children of the context node other than the first para child of the context node
following-sibling::chapter[position()=1] selects the next chapter sibling of the context node
preceding-sibling::chapter[position()=1] selects the previous chapter sibling of the context node
/descendant::figure[position()=42] selects the forty-second figure element in the document
/child::doc/child::chapter[position()=5]/child::section[position()=2] selects the second section of the fifth chapter of the doc document element
child::para[attribute::type="warning"] selects all para children of the context node that have a type attribute with value warning
child::para[attribute::type='warning'][position()=5] selects the fifth para child of the context node that has a type attribute with value warning
child::para[position()=5][attribute::type="warning"] selects the fifth para child of the context node if that child has a type attribute with value warning
child::chapter[child::title='Introduction'] selects the chapter children of the context node that have one or more title children with string-value equal to Introduction
child::chapter[child::title] selects the chapter children of the context node that have one or more title children
child::*[self::chapter or self::appendix] selects the chapter and appendix children of the context node
child::*[self::chapter or self::appendix][position()=last()] selects the last chapter or appendix child of the context node
An in depth documentation can be found here. Also these example are taken from there.