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。