PDA

View Full Version : Extend TreeNodeUI problem



zaragon
29 Sep 2009, 2:00 AM
I want extend TreeNodeUI. i searched in forum some solution and then i wrote same test code but the code don't work.

In new js file called "tree-custom-render.js", i wrote this:


Ext.extend(Ext.tree.customNodeUI, Ext.tree.TreeNodeUI, {
renderElements: function(n, a, targetNode, bulkRender){

this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';

var cb = typeof a.checked == 'boolean';

var href = a.href ? a.href : Ext.isGecko ? "" : "#";
var buf = ['<li class="x-tree-node">',
cb ? ('<input class="x-tree-node-cb" type="checkbox" ' + (a.checked ? 'checked="checked" />' : '/>')) : '',
'<div ext:tree-node-id="',n.id,'" class="x-tree-node-el x-tree-node-leaf x-unselectable ', a.cls,'" unselectable="on">',
'<span class="x-tree-node-indent">',this.indentMarkup,"</span>",
'<img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow" />',
'<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" : ""),(a.iconCls ? " "+a.iconCls : ""),'" unselectable="on" />',
'<a hidefocus="on" class="x-tree-node-anchor" href="',href,'" tabIndex="1" ',
a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '><span unselectable="on">',n.text,"</span></a></div>",
'<ul class="x-tree-node-ct" style="display:none;"></ul>',
"</li>"].join('');

var nel;
if(bulkRender !== true && n.nextSibling && (nel = n.nextSibling.ui.getEl())){
this.wrap = Ext.DomHelper.insertHtml("beforeBegin", nel, buf);
}else{
this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf);
}

this.elNode = this.wrap.childNodes[0];
this.ctNode = this.wrap.childNodes[1];
var cs = this.elNode.childNodes;
this.indentNode = cs[0];
this.ecNode = cs[1];
this.iconNode = cs[2];
var index = 3;
if(cb){
this.checkbox = cs[3];
// fix for IE6
this.checkbox.defaultChecked = this.checkbox.checked;
index++;
}
this.anchor = cs[index];
this.textNode = cs[index].firstChild;
}
});


in my treePanel i wrote:


TreePanel.superclass.constructor.call(this, {
id:'indice',
border: false,
useArrows: true,
animate: false,
containerScroll: true,
autoScroll: true,
rootVisible: true,
root: {
nodeType: 'async',
text: 'Argomento'
, uiProvider: Ext.tree.customNodeUI
},
listeners:{
click:function(node, e){
if(node.isLeaf())
{
//alert('todo');
}
}
}

});


in HTML file i included:
1) ext-base.js
2) ext-all.js
3) tree-custom-render.js
4) my-tree-panel.js

When run the application, firebug return this error:


K is undefined
anonymous(Object name=K, function(), Object)ext-base.js (riga 7)
tree-custom-render.js()tree-cus...render.js (riga 2)
[Break on this error] window.undefined=window.undefined;Ext={v...)}window.attachEvent("onunload",a)}})();ext-base.js (riga 7)


i don't understand what is the error. Help me please.