Extjs4源码解释TreeStore的autoLoad无效

本文主要是介绍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 functionif (!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 instanceview = 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;
}
});