PDA

View Full Version : Modifying data in a treestore?



bmt22033
23 Apr 2014, 7:49 AM
I'm new to ExtJS and I'm using a TreePanel with a TreeStore which, in turn, uses a model that I've defined. The model is very simple and consists of two fields: "name" (string) and "value" (integer). My TreePanel contains two columns: a treecolumn (which displays the "name" field of my model) and a gridcolumn (which displays the "value" field of my model). In my controller, I've added an event handler for the TreePanel so that I can tell when my user has clicked on a node in the tree. That function looks like this:
onTreePanelItemClick: function(view, record, item, index, e) {console.log("Node name: " + record.data.name);console.log("Node value: " + record.data.value);}My TreeStore is auto-loaded with JSON (via an ajax call). Let's say that my test JSON looks like this:
{"name": "Root","children": [{"name": "apple", "value": 1},{"name": "banana","value": 2},{"name": "coconut","value": 3}]}As you can see, the model instances in my TreeStore look like this:
apple : 1

banana : 2

coconut : 3
Now let's say that when my user clicks on any node in the tree, I want to update the "value" field for that particular node so that it contains a "value" of 100. In my onTreePanelItemClick() function, I'm thinking that I could do the following:
get a reference to my treepanel (e.g., var myTree = Ext.ComponentQuery.query())
get the selected node from the tree (e.g., var selectedNode = myTree.GetSelectionModel().getSelection())
update the "value" for the selected node (e.g., selectedNode.data.value = 100)
But is this the right way to make a change to the underlying model instances in my TreeStore? I'm thinking probably not but I'm not sure how I should be doing it. Thanks for any advice.

mitchellsimoens
29 Apr 2014, 4:57 AM
In your onTreePanelItemClick method, you get the record as an argument so all you have to do is use the set method:


record.set('value', 100);