How to refresh treelist layout?

Question

I have a treelist defined like so:

{
    xtype: "treelist",
    itemId: "MainMenu",
    store: {
        root: {
            expanded: true,
            children: [{
                 text: "One",
                 leaf: true,
                 iconCls: "x-fa fa-frown-o"
            }]
        }
    }
}

When I load a page, I see that this treelist is rendered ok. Then I click on a button, which executes this code:

mainmenu.getStore().add({
    text: "Two",
    leaf: true,
    iconCls: "x-fa fa-frown-o"
});
console.log(mainmenu.getStore().getCount()); // prints out correct value 2

The problem is that I still see only one item in the treelist. In other words, the treelist store is populated with new data, but does not show it. So, how can I fix it? I guess there should be some kind of refresh or update method, that will refresh the tree view.

Aurel Bílý Aurel Bílý · Accepted Answer · 2017-04-29T16:10:31

Your problem is probably using the TreeStore incorrectly. A tree store has one root and the children of that root get displayed by the TreeList recursively. To actually add to the tree store, however, you should use NodeInterface.

In your case:

mainmenu.getStore().getRootNode().appendChild({
    text: "Two",
    leaf: true,
    iconCls: "x-fa fa-frown-o"
});

How to refresh treelist layout?

1 Answers