Extjs4源码解释TreeStore的autoLoad无效

2024-03-24 14:18
文章标签 源码 解释 extjs4 无效 autoload treestore

本文主要是介绍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是问题的关键。那么就分成三种情况.

  1. 设置Root，expanded设置成true
  2. 不设置Root。
  3. 设置Root，expanded不设置任何值
  4. 设置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;
}
});

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

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

这篇关于Extjs4源码解释TreeStore的autoLoad无效的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/841843。

相关文章

wolfSSL参数设置或配置项解释

wolfSSL参数设置或配置项解释

1. wolfCrypt Only 解释：wolfCrypt是一个开源的、轻量级的、可移植的加密库，支持多种加密算法和协议。选择“wolfCrypt Only”意味着系统或应用将仅使用wolfCrypt库进行加密操作，而不依赖其他加密库。 2. DTLS Support 解释：DTLS（Datagram Transport Layer Security）是一种基于UDP的安全协议，提供类似于
阅读更多...
JAVA智听未来一站式有声阅读平台听书系统小程序源码

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来，一站式有声阅读平台听书系统 🌟&nbsp;开篇：遇见未来，从“智听”开始 在这个快节奏的时代，你是否渴望在忙碌的间隙，找到一片属于自己的宁静角落？是否梦想着能随时随地，沉浸在知识的海洋，或是故事的奇幻世界里？今天，就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统，它正悄悄改变着我们的阅读方式，让未来触手可及！ 📚&nbsp;第一站：海量资源，应有尽有 走进“智听
阅读更多...
Java ArrayList扩容机制 （源码解读）

Java ArrayList扩容机制 （源码解读）

结论：初始长度为10，若所需长度小于1.5倍原长度，则按照1.5倍扩容。若不够用则按照所需长度扩容。 一. 明确类内部重要变量含义         1：数组默认长度         2:这是一个共享的空数组实例，用于明确创建长度为0时的ArrayList ，比如通过 new ArrayList<>(0)，ArrayList 内部的数组 elementData 会指向这个 EMPTY_EL
阅读更多...
如何在Visual Studio中调试.NET源码

如何在Visual Studio中调试.NET源码

今天偶然在看别人代码时，发现在他的代码里使用了Any判断List<T>是否为空。 我一般的做法是先判断是否为null，再判断Count。 看了一下Count的源码如下： 1 [__DynamicallyInvokable]2 public int Count3 {4 [__DynamicallyInvokable]5 get
阅读更多...
工厂ERP管理系统实现源码（JAVA）

工厂ERP管理系统实现源码（JAVA）

工厂进销存管理系统是一个集采购管理、仓库管理、生产管理和销售管理于一体的综合解决方案。该系统旨在帮助企业优化流程、提高效率、降低成本，并实时掌握各环节的运营状况。 在采购管理方面，系统能够处理采购订单、供应商管理和采购入库等流程，确保采购过程的透明和高效。仓库管理方面，实现库存的精准管理，包括入库、出库、盘点等操作，确保库存数据的准确性和实时性。 生产管理模块则涵盖了生产计划制定、物料需求计划、
阅读更多...
Spring 源码解读：自定义实现Bean定义的注册与解析

Spring 源码解读：自定义实现Bean定义的注册与解析

引言 在Spring框架中，Bean的注册与解析是整个依赖注入流程的核心步骤。通过Bean定义，Spring容器知道如何创建、配置和管理每个Bean实例。本篇文章将通过实现一个简化版的Bean定义注册与解析机制，帮助你理解Spring框架背后的设计逻辑。我们还将对比Spring中的BeanDefinition和BeanDefinitionRegistry，以全面掌握Bean注册和解析的核心原理。
阅读更多...
音视频入门基础：WAV专题（10）——FFmpeg源码中计算WAV音频文件每个packet的pts、dts的实现

音视频入门基础：WAV专题（10）——FFmpeg源码中计算WAV音频文件每个packet的pts、dts的实现

一、引言 从文章《音视频入门基础：WAV专题（6）——通过FFprobe显示WAV音频文件每个数据包的信息》中我们可以知道，通过FFprobe命令可以打印WAV音频文件每个packet（也称为数据包或多媒体包）的信息，这些信息包含该packet的pts、dts： 打印出来的“pts”实际是AVPacket结构体中的成员变量pts，是以AVStream->time_base为单位的显
阅读更多...
kubelet组件的启动流程源码分析

kubelet组件的启动流程源码分析

概述 摘要: 本文将总结kubelet的作用以及原理，在有一定基础认识的前提下，通过阅读kubelet源码，对kubelet组件的启动流程进行分析。 正文 kubelet的作用 这里对kubelet的作用做一个简单总结。 节点管理 节点的注册 节点状态更新 容器管理(pod生命周期管理) 监听apiserver的容器事件 容器的创建、删除(CRI) 容器的网络的创建与删除
阅读更多...
red5-server源码

red5-server源码

red5-server源码：https://github.com/Red5/red5-server
阅读更多...
TL-Tomcat中长连接的底层源码原理实现

TL-Tomcat中长连接的底层源码原理实现

长连接：浏览器告诉tomcat不要将请求关掉。  如果不是长连接，tomcat响应后会告诉浏览器把这个连接关掉。    tomcat中有一个缓冲区  如果发送大批量数据后 又不处理  那么会堆积缓冲区 后面的请求会越来越慢。
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2