After modifying tree data in beforeitemexpand event in ExtJs, why not show the latest tree?

Question

Demo
I create a treepanel using ExtJs.
Store:

var store = Ext.create('Ext.data.TreeStore', {
    root: {
        text: 'Root Node',
        expanded: false,
        children: [{
            text: 'Child 0',
            leaf: true
        }, {
            text: 'Child 1',
            leaf: true
        }, {
            text: 'Child 2',
            leaf: true
        }]
    }
});

JS:

Ext.onReady(function () {
    Ext.create('Ext.window.Window', {
        title: 'Our first tree',
        layout: 'fit',
        autoShow: true,
        height: 180,
        width: 220,
        items: {
            xtype: 'treepanel',
            border: false,
            store: store,
            rootVisible: true,
            listeners: {
                beforeitemexpand: function (p, eOpts ){
                    alert("current node:" + p.data.text);
                    var childNodes = p.childNodes;
                    $.each(childNodes,function(no, child){
                        alert(child.data.text);
                        child.data.text = no;
                        alert(child.data.text);
                    });
                }
            }
        }
        
    });
});

Question:
When I expand a node, it will trigger the beforeitemexpand event, which modifies the data of its children node. But the expanded children nodes do not show the modified texts but the original texts.

For the demo, after expanding Root Node firstly, you would find the tree text changed in fact, but not show in the window. After that, you expand Root Node again, it shows the modified text.

How can I do to show the latest data? maybe there is another event not beforeitemexpand for this situation, but I do not find after a long time searching.

Thanks for any help.

Answer 1

You are accessing private property data directly. Do it like this:

 child.set('text',no);
 child.commit();