【ExtJS】修复tree重复加载Bug

最新推荐文章于 2021-02-23 12:24:55 发布

原创最新推荐文章于 2021-02-23 12:24:55 发布 · 4k 阅读

3 ·

CC 4.0 BY-SA版权

ExtJS 专栏收录该内容

12 篇文章

订阅专栏

本文介绍ExtJS TreePanel组件存在的加载问题，并提供了解决方案。通过设置autoLoad为false并使用beforeload监听器阻止由expand触发的重复加载，确保只加载一次数据。

treepanel，不管autoLoad什么值，都会先加载。

若再设置autoLoad为true，则再加载一遍。

属bug，官方v4版本有人提，v5中仍未解决。

解决方法：设置autoLoad为false，增加beforeload阻止由expand触发的load，自己调用load，可放在panel#afterRender中触发。

//viewModel stores
stores : {
	dataList : {
		model : 'My.model.UserModel',
		remoteFilter : true,
		autoLoad : false,
		autoFilter : false,
		type : 'tree',
		nodeParam : 'id',
		root : { expanded : true },
		listeners : {
			beforeload : function(store, operation, opts) {
				//阻止加载
				if(!store._can_load_){
					return false;
				}
				return true;
			}
		}
	}
}

var cfg={...};
if (store.type == 'tree') {
	/**
	 * 【fix extjs bug】
	 * 结合viewModel.dataList.listeners.beforeload方法，防止tree重复加载。
	 */
	if (store.root && !store._can_load_) {
		// 第一次，执行expand，触发load。
		store._can_load_ = true;
		store.root.expand(true);
	} else {
		store._can_load_ = true;
		store.load(cfg);
	}
} else {
	store.load(cfg);
}

以下提到在beforeLoad中判断，如果store.isLoading()则返回false(阻止加载)。

这个在某些场合会有问题，首次加载由node#expand触发的，如果我们初始化此界面加入了一些过滤条件，需要再refresh(load)数据，就被阻止了。

http://www.sencha.com/forum/showthread.php?260052
http://www.sencha.com/forum/showthread.php?287930