【原创】TreePanel树形节点不收缩刷新

遇到的问题

      在使用Ext树形组件的时候，下层节点的刷新，总是需要下层节点全部搜索然后再展开，如果需要实时的从后台获取数据，改变某些节点的text或者icon时，就显得不够优雅了。

 

解决方案

      负责树形组件TreePanle的TreeLoader是负责获取数据的，集成该类，然后在除第一次刷新之后的加载，将获取后的数据（比如节点的text、icon）更改到现有节点上，就可以很好的完成不收缩刷新

 

代码

/****************************************************
 * goal:为了让树的节点内容更新(目前包括text iconCls)
 * 而不让树形下层节点收缩带来的更好的用户体验
 * disadvantage:不能增删节点
 * createDate: 2009.09.24
 * author:	LXL
 *****************************************************/

Ext.namespace('SMN.ux.TreeLoader');


SMN.ux.TreeLoader = function(config) {
	config = config || {};
	SMN.ux.TreeLoader.prototype.processResponse = function(response, node, callback){
		var json = response.responseText;
		try {
            var o = response.responseData || Ext.util.JSON.decode(json);
			node.beginUpdate();
			var responseNodes = o;
			var treeNodes = node.childNodes;
			if (treeNodes.length == 0) {
				//	第一次加载
				for(var i = 0, len = responseNodes.length; i < len; i++){
	                var n = this.createNode(responseNodes[i]);
	                if(n){
	                    node.appendChild(n);
	                }
	            }
			} else {
				//	以后加载
				for (var i = 0; i < treeNodes.length; i++) {
					var treeNode = treeNodes[i];
					for (var j = 0; j < responseNodes.length; j++) {
						var responseNode = responseNodes[j];
						if (treeNode.attributes.id == responseNode.id) {
							//	同一个节点
							//	更新text
							treeNode.setText(responseNode.text);
							//	更新iconCls
							treeNode.getUI().getIconEl().className = 'x-tree-node-icon' + ' ' + responseNode.iconCls;
						}
					}
				}
			}
			node.endUpdate();
            if(typeof callback == "function"){
                callback(this, node);
            }
        }catch(e){
            this.handleFailure(response);
        }
	};
	SMN.ux.TreeLoader.prototype.load = function(node, callback){
//		Ext.log('into Ext.ux.TreeLoader.prototype.load');
		if(this.doPreload(node)){ // preloaded json children
            if(typeof callback == "function"){
                callback();
            }
        }else if(this.dataUrl||this.url){
            this.requestData(node, callback);
        }
	};
	SMN.ux.TreeLoader.superclass.constructor.call(this, config);
}
Ext.extend(SMN.ux.TreeLoader, Ext.tree.TreeLoader);

 缺点和解决方案

        当TreeLoader从后台获取的下层节点不再是目前的节点数量时，比如多了一个孩子节点或者少了一个孩子节点，以上代码是不能完成该功能的，所以可以增加if分支，从后台获取数据后，先比较下层孩子节点数据，遍历节点ID，将需要删除的孩子节点删除，多出来的孩子节点增加上，其他的更新text和icon。

 

注：本博客文章均已注明原创和转载，如转载本博客文章，需注明原文出处或征求原作者同意。