How to update model instance data in an ExtJS4 TreeStore

Question

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 only consists of two fields: "name" (string) and "value" (integer). My TreePanel has two columns: a treecolumn (which displays the "name" field of my model) and a gridcolumn (which displays the "value" field of my model).

My TreeStore is auto-loaded with JSON via an Ajax call. My JSON test data looks like this:

{
    "name": "Root",
    "children": [
        {
            "name": "apple",
            "value": 1
        },
        {
            "name": "banana",
            "value": 2
        },
        {
            "name": "coconut",
            "value": 3
        }
    ]
}

It's my understanding that by specifying a model for use with the TreeStore, it results in each model instance having NodeInterface properties/methods added to it so that it works with a tree structure.

In my controller, I've added an event handler for the TreePanel that fires when my user has clicks on a node in the TreePanel. 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);
}

Everything is working properly to this point and when I click on the "apple" node in the tree, I see the expected output in the console:

Node name: apple
Node value: 1

Let's say that anytime my user clicks on a node in my tree, I want to update the "value" field for that node (or, perhaps more correctly, the "value" field on the underlying model instance) in the store so that it contains a "value" of 100. To accomplish this, I've tried doing the following in my onTreePanelItemClick() function:

var selectedNode = myTreePanel.GetSelectionModel().getSelection();
selectedNode.data.value = 100;

Now, the first time I click on my "apple" node, I see the following in the console:

Node name: apple
Node value: 1

The second time I click on the "apple" node (after my onTreePanelItemClick() has updated the value to 100), I see this in the console:

Node name: apple
Node value: 100

Despite the console output, however, the "value" field that's displayed in the gridcolumn of my TreePanel still shows 1 (instead of 100). I suspect that I'm not actually updating the model instance that underlies the node in my treestore properly. But I'm not sure exactly how I'm supposed to update fields of existing nodes/models. All of the examples I've seen for the TreeStore seem to deal with adding and removing nodes but that's not what I want to do. Thanks for any advice!

Answer 1

Never access data of record via its (private) data property. Call record.get(), record.set() or record.getData().

In your case you would call record.set({value:100});