Extjs4源码解释TreeStore的autoLoad无效

这个是我转载网上的一位大牛的分析，很给力，特此转载

这几天遇到个问题。就是在用extjs4的TreeStore的时候，不想让他自动加载，但是发现设置了autoload为false也没有用，被逼急了，用firebug一步步的更进去看重要找到原因了，下面我们将通过Extjs自带的例子

来解释. 我是用的extjs4.0.7.
http://server/ext-4.0.7-gpl/examples/tree/check-tree.html

例子的TreeStore的代码如下：

<!-- lang: js -->
Ext.onReady(function() {
var store = Ext.create('Ext.data.TreeStore', {
    proxy: {
        type: 'ajax',
        url: 'check-nodes.json'
    },
    sorters: [{
        property: 'leaf',
        direction: 'ASC'
    }, {
        property: 'text',
        direction: 'ASC'
    }],
    autoLoad : false
});

var tree = Ext.create('Ext.tree.Panel', {
    store: store,
    rootVisible: false,
    useArrows: true,
    frame: true,
    title: 'Check Tree',
    renderTo: 'tree-div',
    width: 200,
    height: 250,
    dockedItems: [{
        xtype: 'toolbar',
        items: {
            text: 'Get checked nodes',
            handler: function(){
                var records = tree.getView().getChecked(),
                    names = [];

                Ext.Array.each(records, function(rec){
                    names.push(rec.get('text'));
                });

                Ext.MessageBox.show({
                    title: 'Selected Nodes',
                    msg: names.join('<br />'),
                    icon: Ext.MessageBox.INFO
                });
            }
        }
    }]
    });
});

上面的代码首先是创建了个Ext.data.TreeStore. 这样我们就可以定位到Ext.data.TreeStore,这个类中有1个方法要特别注意，是setRootNode: function(root),下面是方法的主要内容

<!-- lang: js -->
setRootNode: function(root) {
    ...
    Ext.data.NodeInterface.decorate(root);
    ...
    // If the user has set expanded: true on the root, we want to call the expand function
    if (!root.isLoaded() && (me.autoLoad === true || root.isExpanded())) {
        me.load({
            node: root
        });
    }

    return root;
}

从上面可以看出真正发出load方法是在setRootNode方法中，可以出发load的条件是!root.isLoaded() && (me.autoLoad === true || root.isExpanded()). 很显然root.isLoaded()是false，因为在构造store的时候还没有加载过数据；autoLoad肯定是false，这个是我们自己设置的；那么唯一有问题的就是isExpanded方法。这个好办我们在创建Ext.data.TreeStore加入root不久成了，好了，下面是我们改过的代码:

<!-- lang: js -->
var store = Ext.create('Ext.data.TreeStore', {
    proxy: {
        type: 'ajax',
        url: 'check-nodes.json'
    },
    sorters: [{
        property: 'leaf',
        direction: 'ASC'
    }, {
        property: 'text',
        direction: 'ASC'
    }],
autoLoad : false,
    root : {
        expanded : false
    }
});

然后满怀期待的运行，发现还是一样的。为什么呢。继续firebug。

根据上面的经验我们发现expanded是问题的关键。那么就分成三种情况.

设置Root，expanded设置成true
不设置Root。
设置Root，expanded不设置任何值
设置Root，expanded设置成false

第一种情况肯定会自动加载。那么我们先看第二种情况

不设置Root

这种情况下代码将会在在创建完成TreeStore之后进入TreePanel的initComponent方法，而这个方法有个很重要的代码如下：

<!-- lang: js -->
initComponent: function() {
    if (!me.getView().rootVisible && !me.getRootNode()) {
        me.setRootNode({
            expanded: true
        });
    }
}

上面可以看到如果没有设置，那么me.getRootNode(）为空，就会创建个默认的值{expanded: true}. 这样在expanded变成了true。所以自动加载

设置Root，expanded不设置任何值

这种情况其实是属于第四种的。因为在上面setRootNode方法中可以看到。Ext.data.NodeInterface.decorate(root);这句话，这个就是为没有分配的属性分配默认值。跟进去可以看到默认值是false。我们就直接进入下一个情况的分析

设置Root，expanded设置成false

这中情况比较复杂。前面都一样，第一步创建了TreeStore，然后进入TreePanel的constructor,再进入TreePanel的initComponent,在initComponent里面调用了me.callParent();。这句话就是调用父类的initComponent。这样我们进入父类Ext.panel.Table看一下大概的代码如下。

<!-- lang: js -->
initComponent: function(){
    ...
    // AbstractDataView will look up a Store configured as an object
    // getView converts viewConfig into a View instance
    view = me.getView();
    ....
},

/**
 * Gets the view for this panel.
 * @return {Ext.view.Table}
 */
getView: function() {
    var me = this,
        sm;

    if (!me.view) {
        sm = me.getSelectionModel();
        me.view = me.createComponent(Ext.apply({}, me.viewConfig, {
            deferInitialRefresh: me.deferRowRender,
            xtype: me.viewType,
            store: me.store,
            headerCt: me.headerCt,
            selModel: sm,
            features: me.features,
            panel: me
        }));
        me.mon(me.view, {
            uievent: me.processEvent,
            scope: me
        });
        sm.view = me.view;
        me.headerCt.view = me.view;
        me.relayEvents(me.view, ['cellclick', 'celldblclick']);
    }
    return me.view;
}

在initComponent里面调用了getView方法。在getView方法中先判断是否已经有view存在。没有的话新创建一个。通过me.createComponent创建，这里要注意下me.viewConfig，因为我们在定义TreeStore的时候定义了root属性，所以在viewConfig里的node属性不是null也不是undefined类型，这个很关键。创建了createComponent之后我们就进入了Ext.tree.View的initComponent方法。代码如下

<!-- lang: js -->
initComponent: function() {
    var me = this;

    if (me.initialConfig.animate === undefined) {
        me.animate = Ext.enableFx;
    }

    me.store = Ext.create('Ext.data.NodeStore', {
        recursive: true,
        rootVisible: me.rootVisible,
        listeners: {
            beforeexpand: me.onBeforeExpand,
            expand: me.onExpand,
            beforecollapse: me.onBeforeCollapse,
            collapse: me.onCollapse,
            scope: me
        }
    });

    if (me.node) {
        me.setRootNode(me.node);
    }
    me.animQueue = {};
    me.callParent(arguments);
}

终于找到罪魁祸首了就是

<!-- lang: js -->
if (me.node) {
        me.setRootNode(me.node);
}

因为上面我们说了node不是null所以会调用setRootNode，看下setRootNode方法：

<!-- lang: js -->
setRootNode: function(node) {
    var me = this;
    me.store.setNode(node);
    me.node = node;
    if (!me.rootVisible) {
        node.expand();
    }
}

这里会判断rootVisible。默认的是false的。所以会调用expand()方法。这个方法会出发一系列的事件。最终会到TreeStore的onBeforeNodeExpand方法了. 看下TreeStore的onBeforeNodeExpand方法：

<!-- lang: js -->
onBeforeNodeExpand: function(node, callback, scope) {
    if (node.isLoaded()) {
        Ext.callback(callback, scope || node, [node.childNodes]);
    }
    else if (node.isLoading()) {
        this.on('load', function() {
            Ext.callback(callback, scope || node, [node.childNodes]);
        }, this, {single: true});
    }
    else {
        this.read({
            node: node,
            callback: function() {
                Ext.callback(callback, scope || node, [node.childNodes]);
            }
        });
    }
},

好了看到了，最终会到最后一个else分支上。调用this.read. read方法内会调用ajax的请求。

经过上面的代码分析。所以给出的解决方案有两种

方案1
定义TreeStore的时候配置如下内容：

<!-- lang: js-->
autoLoad : false，
root: {
    expanded : false
}

定义TreePanel的时候配置rootVisible: true。

方案2
重写TreeStore的setRootNode方法

<!-- lang: js -->
Ext.override(Ext.data.TreeStore, {
setRootNode: function(root) {
    var me = this;

    root = root || {};
    if (!root.isNode) {
        Ext.applyIf(root, {
            id: me.defaultRootId,
            text: 'Root',
            allowDrag: false
        });
        root = Ext.ModelManager.create(root, me.model);
    }
    Ext.data.NodeInterface.decorate(root);

    me.getProxy().getReader().buildExtractors(true);

    me.tree.setRootNode(root);

    //主要修改
    //if(!root.isLoaded() && (me.autoLoad === true || root.isExpanded())){
    if (!root.isLoaded() && (me.autoLoad === true)) {
        me.load({
            node: root
        });
    }
    return root;
}
});

这种情况不能设置TreeStore的root属性。

当然还有其他的方法。基本都是重写原来的逻辑。现在想想。貌似extjs是为了实现动态加载数据设置的这些属性。

Extjs4源码解释TreeStore的autoLoad无效

猜你喜欢