I have a treegrid and I want to update just one node with its childs. So I have tried like this:
store.load({
node: store.getNodeById(1)
});
That updates childs, but not the node itself. So how can I update node and childs? It would be best if it would require just one request to the database.
There isn´t any way to do it by configuration, it just works as design. What you can do is a little trick after load the node's children in order to manipulate the tree nodes to update the node itself manually.
See the images. They show the behaviour you expect.
This is working okay in jsfiddle: http://jsfiddle.net/lontivero/jBTWn/3/
Basically, the idea is, as I just said, manipulate the tree after load the children. In my example this is done by:
var node = store.getNodeById(1);
store.load({
node: node,
callback: function(newRecord) {
var parent = node.parentNode;
parent.insertBefore(newRecord[0], node);
parent.removeChild(node);
},
params: {
json: Ext.JSON.encode(updated_data)
}
});
Good luck!
Related
I found the working example online and I can see check box adjacent to each node of the tree The fiddle link mentioned last section given below:
Dojo tree with checkbox not displaying
Now my requirement is when the parent node is checked, all the child node should also gets checked and it should work in DOJO 1.3 release
Can help someone help fix the fiddle code
Within the checkbox listener you can put code to find the children and check them also:
The tree has to bexpanded before adding the other checkmarks because the children nodes are not created till the parent is expanded the first time.
dojo.connect(cb, "onChange", function() {
var treeNode = dijit.getEnclosingWidget(this.domNode.parentNode);
//treeNode.expand();
treeNode.tree._expandNode(treeNode);
dojo.publish("/checkbox/clicked", [{
"checkbox": this,
"item": treeNode
}]);
var parentcb = this;
console.log(parentcb.checked)
treeNode.getChildren().forEach(function(item) {
var checkbox = dijit.getEnclosingWidget(item.labelNode.children[0]);
checkbox.set('checked', parentcb.checked)
});
});
Fiddle:http://jsfiddle.net/mcfskLop/8/
I want to know how to insert items into a treestore sorted, if there is a way within extjs to do this. I then want to have the items appear in a treepanel sorted, although there may already be some nodes in the treepanel;
So, that question may be, how do I have a treepanel reload what it is displaying based on what is within my store. Let me be clear, I do not want to reload the store from some datasource. I want to reload the panel to reflect what is contained within the store. What is the best way to go about this?
There is no real default way to do this. What your going to have to do is create an empty store on the page that uses the same model as the tree, something really simple like this:
var mySortStore = Ext.create("Ext.data.Store", {
model: "MyTreeStore",
data: []
});
Then when you go to add the node to the tree, use this function instead:
function addNodeSorted(node, childToBeAdded){
//clear the store from previous additions
mySortStore.removeAll();
//remove old sorters if they are dynamically changing
mySortStore.sort();
//add the node into the tree
node.appendChild(childToBeAdded);
var cn = node.childNodes,
n;
//remove all nodes from their parent and add them to the store
while ((n = cn[0])) {
mySortStore.add(node.removeChild(n));
}
//then sort the store like you would normally do in extjs, what kind of sorting you want is up to you
mySortStore.sort('height', 'ASC');//this is just an example
//now add them back into the tree in correct order
mySortStore.each(function(record){
node.appendChild(record);
});
}
I have a Tree Panel which I expand programmatically.
When I expand a node, I would like to "jump to" this node, I mean to scroll to it.
How to scroll a tree panel to a specific node ?
UPDATE:
I use Ext 4.1
Try using selectPath() http://docs.sencha.com/ext-js/4-0/#!/api/Ext.tree.Panel-method-selectPath
In extjs 3.x you can try calling focus() on the TreeNodeUI (myNode.ui.focus())
The tree is asynchronously loading every node, and you need to call to focus only after all the nodes have been loaded. What you are going to need to do is to set autoLoad to false on your root node, then later in the code manually load the root node for the first time using:
rootNode.expand(true, function(){
myTreePanel.getView().focusRow(nodeyouwanttofocus);
});
doing it this way allows you to use the first parameter of the expand function that makes the expand fully recursive and also assures that the second parameter that is a function only executes after all the nodes are loaded, guarenteeing that the view is the correct height and that the node exists visually.
Another option that allows more flexability is to hook into the expand event:
var myTreeStore = Ext.create("Ext.data.TreeStore", {
listeners: {
expand: function(theParentNode){
theParentNode.eachChild(function(node){
if(nodeIWantSelected == node)
myTreePanel.getView().focusRow(node);
}
}
}
});
and you can use the .select of the selection model to hook in to select the node (and I think it may focus the node too).
I haven't tried 'selectPath' as suggested by Sha before, which seems a lot easier to use, but you can hook in the focusRow function as the callback and I think that would work too.
You can use tree.getView().focusRow(), like it:
tree.expandPath(
'/root/1/2/3',
'id',
'/',
function() {
tree.getView().focusRow(tree.getStore().getNodeById('3'));
}
});
But, if your tree use animate: true and load every node asynchronously and any node in the path not loaded yet this approach doesnt work (tree is not scrolled to the selected node because of multiple layout updates).
As workaround you can:
set animate: false for tree;
add 'afterlayout' listener, like this:
tree.on('afterlayout', function() {
tree.getView().focusRow(tree.getSelectionModel().getSelection()[0]);
}
I guess you can add this handler when needed and remove it when everything is done.
If I write:
rootNode.expand()
I can only get access to the children nodes of this rootNode, but can't get access to the grandchildren nodes of this rootNode. I have to write:
rootNode.expandChildNodes()
in order to acheive it.
Is there another way to obtain the grandchildren or further children nodes even if the tree is collapsed? other than using node.eachChild() function?
I tried:
rootChildNode.firstChild
but it doesn't work.
ExtJS 4x has expandAll() method on the Tree Panel component. This will expand every node recursively.
if you want to expand to a partcular level then in that case:
expandTo:function(level){
treePanel.collapseAll();
treePanel.getRootNode().cascadeBy(function (node) {
if (node.getDepth() < level) { node.expand(); }
if (node.getDepth() == level) { return false; }
});
}
Another way to get to the descendants is to use node.expand(true), where node is the root node. Similarly, you can take any node within the tree and expand all of its descendant nodes using this same code. A common usage is for the selected node.
I would like to create a Treepanel, which is updated once a second.
So I took a store with a proxy for data acquistion:
store = new Ext.data.TreeStore({
model: 'TaskState',
proxy: {
type: 'ajax',
url : '/getTaskList'
},
root: {
expanded: true
}});
The store seems to work, the data is displayed in my TreePanel.
I tried to update the Treepanel with this function:
function refresh(){
store.load();
window.setTimeout("refresh()", 1000);
}
The update seems to work as well. Unfortunately the update causes some kind of "blinking" effekt on every update, because the whole tree is reloaded. I'm searching for a way to only refresh the nodes, which have changed.
Is there some way to do this?
greetings
There is one way:
You can load your nodes to some temp store and change your main tree's store node by node
If you want to add any new node and do not want to reload the whole store then you can add like this
//overModel is Ext.data.Model
overModel.appendChild({
id: responseJson.data['id'],
text:responseJson.data['text'],
children:responseJson.data['children'],//array of childern
parent_id:responseJson.data['parent_id']
});
overModel.expand();
and if you want to load the whole store the you can do something like this
Ext.data.StoreManager.lookup('StoreName').load({ params: {"p1": p1}});
to load the store.
To update the store periodically you can use DelatedTask Class.
check out the Documentation API of EXTJS will give you more details.
Store is bind Treepanel like grid and store ,so you can get Store from tree panel with
var store=treepanel.getStore()
and you can reload the store with branch that you need update with
store.load({node:selectedNode})
You could use TaskManager for that:
Ext.TaskManager.start({
run: reloadStoreFunction,
interval: 1000
});
This would execute reloadStoreFunction every second.