目前,不知道为什么,TreeStore只支持按节点异步加载数据。2.0的时候,可以根据配置选择是异步加载还是一次性加载。


当然,数据可以一次请求(root)的时候都传递给前台,但是TreeStore只解析第一层节点。所以,面临两个问题:


1. 非根节点的expand事件,会去触发load方法,从后台加载数据解析,也就是异步。

2. root请求,只解析一层,其他层的JSON数据,不能被解析成NodeInterface。


解决方案

1. 重写TreeStore的fillNode()方法,一次性把所有的节点都解析出来。关键代码如下:

if (newNodes.length) {
            node.appendChild(newNodes, undefined, true);
            root = this.getRootNode();
            if (root.raw.loadOnce) { // 一次性加载、解析,注意:只支持二级
                for (var k = 0; k < newNodes.length; k++) {
                    var chirldren = newNodes[k].data.children;
                    if (chirldren.length) {
                        newNodes[k].appendChild(chirldren, undefined, true);
                    }
                }
            }
        }

此处只为表意,如果需要支持无限级解析,只需抽象成递归方法即可。


2. 在自定义的Store中,禁止非root节点的load事件,拦截beforeload事件。代码如下:

listeners: {
        'beforeload': function (store, operation) {
            if (operation.id !== 'root') {
                return false;
            }
        }
    }


3. 添加配置参数

root: {
        expanded: true,
        loadOnce: true,
        checked: false
    },


搞定!