现状:一个tree,两组,由于tree的节点从数据的两个表取出,id有可能会重复,但ext的tree同样是通过ID区分,导至焦点不能正确定位。
解决办法 :
第一步:重写treeloader类的createNode方法
第二步:重写Ext.tree.TreePanel类的registerNode方法,记tree注册treeid为真实ID
第三步:重写Ext.tree.TreeNode类的ensureVisible 方法,使其调用的getNodeByTreeId为treeid
第四步:重写Ext.tree.TreeEventModel类getNode方法,使其调getNodeByTreeId方法
第五步:重写Ext.tree.TreeNodeUI类,我这里采用的是继承,覆盖renderElements方法,主要是这句:
<div ext:tree-node-id="',n.attributes.treeid,'"
第六步:如果此tree支持拖拽,需要重写Ext.tree.TreeDropZone的onNodeOver
加上(加这句的原因不太清楚,只是加上就好使了)
第七步:新建节点时,加上下面(treeid)
此时,业务中引用的依然是node.id属性
解决办法 :
第一步:重写treeloader类的createNode方法
createNode : function(attr){
if(this.baseAttrs){
Ext.applyIf(attr, this.baseAttrs);
}
if(this.applyLoader !== false){
attr.loader = this;
}
attr.text = attr.dirname;
attr.id = attr.dirid;
attr.treeid = attr.type+attr.dirid;//主要是这句
if(typeof attr.uiProvider == 'string'){
attr.uiProvider = this.uiProviders[attr.uiProvider] || eval(attr.uiProvider);
}
return(attr.leaf ?
new Ext.tree.TreeNode(attr) :
new Ext.tree.AsyncTreeNode(attr));
}
第二步:重写Ext.tree.TreePanel类的registerNode方法,记tree注册treeid为真实ID
Ext.override(Ext.tree.TreePanel,{
getNodeByTreeId : function(treeid){
return this.nodeHash[treeid];
},
registerNode : function(node){
this.nodeHash[node.attributes.treeid] = node;
},
unregisterNode : function(node){
delete this.nodeHash[node.attributes.treeid];
}
})
第三步:重写Ext.tree.TreeNode类的ensureVisible 方法,使其调用的getNodeByTreeId为treeid
Ext.override(Ext.tree.TreeNode,{
ensureVisible : function(callback){
var tree = this.getOwnerTree();
tree.expandPath(this.parentNode.getPath(), false, function(){
var node = tree.getNodeByTreeId(this.attributes.treeid); // Somehow if we don't do this, we lose changes that happened to node in the meantime
tree.getTreeEl().scrollChildIntoView(node.ui.anchor);
Ext.callback(callback);
}.createDelegate(this));
}
})
第四步:重写Ext.tree.TreeEventModel类getNode方法,使其调getNodeByTreeId方法
Ext.override(Ext.tree.TreeEventModel,{
getNode : function(e){
var t;
if(t = e.getTarget('.x-tree-node-el', 10)){
var id = Ext.fly(t, '_treeEvents').getAttributeNS('ext', 'tree-node-id');
if(id){
return this.tree.getNodeByTreeId(id);
}
}
return null;
}
})
第五步:重写Ext.tree.TreeNodeUI类,我这里采用的是继承,覆盖renderElements方法,主要是这句:
<div ext:tree-node-id="',n.attributes.treeid,'"
第六步:如果此tree支持拖拽,需要重写Ext.tree.TreeDropZone的onNodeOver
加上(加这句的原因不太清楚,只是加上就好使了)
onNodeOver : function(n, dd, e, data){
if(n.node == undefined){
return;
}
*****
}
第七步:新建节点时,加上下面(treeid)
var attr = {
text: '新建分类',
type: node.attributes.type,
treeid: Ext.id(null, node.attributes.type),
uiProvider: BufTreeSpecUI
}
var n = new Ext.tree.TreeNode(attr);
此时,业务中引用的依然是node.id属性