Question

我有一个使用Extjs 4的Check Tree，我有一个问题：我的树每30秒重新加载一次，只重新加载一个特定的节点。

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

My Check Tree grid

当我选中树中的复选框时，重新加载存储检查后取消选中。如何在重新加载存储后记住所选节点？

查看：

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);
    }
});

商店：

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);
                });
            }
        }
    }
});

谢谢你们！

Answer 1

如果一次仅从一个节点加载，则仅在此一个节点中恢复状态是有意义的。这就是为什么我会在知道加载节点的函数中执行此操作。那将是那样的事情：

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);
                    }
                });
            }
        }
    });
}

重新加载存储后重新选择已检查节点Tree Grid

1 个答案: