Re-selecting checked nodes Tree Grid after reload store

Question

I have a Check Tree using Extjs 4, and I have a problem: My Tree be reload each 30s, and only reload a specific node expaned.

var node = this.getMyDeviceTree().store.getNodeById('myTree/107');
this.getMyDeviceTree().store.load({ node: node });

When I check to checkbox in tree, after reload Store checked was be uncheck. How can i remember the selected node after reload store??

View:

Ext.define('App.view.TreeDeviceStatus', {
    extend: 'Ext.tree.Panel',
    store: 'TreeDeviceStore',
    rootVisible: false,
    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            columns: [{
                    //treecolumn xtype tells the Grid which column will show the tree
                    xtype: 'treecolumn',
                    text: 'Biển số',
                    width: 140,
                    sortable: true,
                    dataIndex: 'text'
                }, {
                    text: 'Trạng thái',
                    width: 80,
                    sortable: true,
                    dataIndex: 'Status',
                }, {
                    text: 'Địa chỉ',
                    width: 250,
                    sortable: true,
                    dataIndex: 'Addr'
                }]
        });
        me.callParent(arguments);
    }
});

Store:

Ext.define('App.store.TreeDeviceStore', {
    extend: 'Ext.data.TreeStore',
    model: 'App.model.DeviceStatusModel',
    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            proxy: {
                type: 'ajax',
                url: '/Service/GetData',
                extraParams: {
                    serviceName: 'DeviceService',
                    func: 'getStatus',
                    variable: '{"_UserID":"' + _USERID + '","_RoleID":"' + _ROLEID + '"}'
                },
            }
        }, cfg)]);
    },
    root: {
        id: 'myTree',
        //expanded: true
    },
    listeners: {
        load: function(tree, node, records) {
            if (node.get('checked')) {
                node.eachChild(function(childNode) {
                    childNode.set('checked', true);
                });
            }
        }
    }
});

Thanks guys!

Answer 1

If you load from only one node at a time, it would make sense to only restore state in this one node. That's why I would do it in the function that knows the node that is loaded. That will be something like that then:

function() {
    var store = tree.getStore(),
        node = store.getNodeById('myTree/107'), // that's up to you here
        ids = [];

    function pluckCheckedIds(node) {
        if (node.get('checked')) {
            ids.push(node.getId());
        }
        node.eachChild(function(node) {
            pluckCheckedIds(node);
        });
    }

    // EDIT: forgot this line:
    pluckCheckedIds(node);

    // EDIT2: in order to save and restore the checked state for the whole 
    // tree (in order to load multiple nodes at once), you could use this
    // line instead:
    pluckCheckedIds(store.getRootNode());

    store.load({
        node: node,
        callback: function(records, operation) {
            if (operation.wasSuccessful) {
                Ext.each(ids, function(id) {
                    var node = store.getNodeById(id);
                    if (node) {
                        node.set('checked', true);
                    }
                });
            }
        }
    });
}