这几天遇到个问题。就是在用extjs4的TreeStore的时候，不想让他自动加载，但是发现设置了autoload为false也没有用，被逼急了，用firebug一步步的更进去看重要找到原因了，下面我们将通过Extjs自带的例子 来解释. 我是用的extjs4.0.7.
例子的TreeStore的代码如下：
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(''), icon: Ext.MessageBox.INFO }); } } }] });}); 上面的代码首先是创建了个Ext.data.TreeStore. 这样我们就可以定位到Ext.data.TreeStore,这个类中有1个方法要特别注意，是setRootNode: function(root),下面是方法的主要内容
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不久成了，好了，下面是我们改过的代码:
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方法，而这个方法有个很重要的代码如下：
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看一下大概的代码如下。
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方法。代码如下
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);} 终于找到罪魁祸首了就是
if (me.node) { me.setRootNode(me.node);} 因为上面我们说了node不是null所以会调用setRootNode，看下setRootNode方法：
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方法：
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的时候配置如下内容：
autoLoad : false，root: { expanded : false} 定义TreePanel的时候配置rootVisible: true。
方案2 重写TreeStore的setRootNode方法
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是为了实现动态加载数据设置的这些属性。