TreePanel树形节点不收缩刷新

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。