PDA

View Full Version : Problem in Order of checkbox and custom Icon in Treenode



livinglegends
17 Aug 2012, 4:58 AM
Hi,

In application, I have used Checkbox TreePanel and set Custom icon if each node.
My problem is, in each node checkbox comes after custom Icon. I want checkbox first then custom Icon.

So how to do it? Is there any config I am missing?

Thanks

sword-it
17 Aug 2012, 10:53 PM
Hi livinglegends,

If you want to change order, You'll have to create your own TreeNodeUI descendant that renders the node with change order (overwrite the renderElements method (http://docs.sencha.com/ext-js/3-4/source/TreeNodeUI.html)) and use this class as the UI for your treenodes.


Ext.ns('Ext.ux.tree');
Ext.ux.tree.MyTreeNodeUI = Ext.extend(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"><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" />',
cb ? ('<input class="x-tree-node-cb" type="checkbox" ' + (a.checked ? 'checked="checked" />' : '/>')) : '',
'<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];
var index = 2;
if(cb){
this.checkbox = cs[index++];
this.checkbox.defaultChecked = this.checkbox.checked;
}
this.iconNode = cs[index++];
this.anchor = cs[index];
this.textNode = cs[index].firstChild;
}
});


See - http://docs.sencha.com/ext-js/3-4/source/TreeNodeUI.html
a (http://docs.sencha.com/ext-js/3-4/source/TreeNodeUI.html)lso read - http://www.sencha.com/forum/showthread.php?65442-How-to-change-the-node-UI-for-treepanel

livinglegends
19 Aug 2012, 10:42 PM
Thanks for your reply.

But in the Checkbox TreePanel example of Sencha, they are not using any custom TreeNodeUI but still get order of icon and checkbox as per my expectation i.e first checkbox and then icon.

sword-it
19 Aug 2012, 11:42 PM
Which frame work are you use, it is Ext 4.x ? if yes then don't need to override TreeNodeUI.
It is enabled on leaf nodes by simply setting checked: true/false at the node level.

Here is working sample example - http://jsfiddle.net/a2934/

livinglegends
20 Aug 2012, 1:49 AM
Yes..I am using 3.4 so have to create custom node UI and I did but facing issues.

1. In Treepanel, I have kept root node invisible by setting rootVisible:false. If am not applying Custom treenode UI then it works fine but if I applied it, it shows root node though property is still set (rootVisible: false).

2. Due to applying Custom tree node, lazy loading feature is also not working. It is not firing query on server to get details but if I remove it fires. It means it stop to load nodes if apply custom treenode UI.

Any idea?

livinglegends
21 Aug 2012, 9:45 PM
Any comment on my above post?

livinglegends
23 Aug 2012, 2:39 AM
Which frame work are you use, it is Ext 4.x ? if yes then don't need to override TreeNodeUI.
It is enabled on leaf nodes by simply setting checked: true/false at the node level.

Here is working sample example - http://jsfiddle.net/a2934/

Yes..I am using 3.4 so have to create custom node UI and I did but facing issues.

1. In Treepanel, I have kept root node invisible by setting rootVisible:false. If am not applying Custom treenode UI then it works fine but if I applied it, it shows root node though property is still set (rootVisible: false).

2. Due to applying Custom tree node, lazy loading feature is also not working. It is not firing query on server to get details but if I remove it fires. It means it stop to load nodes if apply custom treenode UI.

Any idea?

livinglegends
27 Aug 2012, 12:52 AM
No one to light on this issue?
Please let me know if anybody have any solution or workaround to achieve.

Thanks in advance
Livinglegends

Manmohan
25 May 2013, 9:28 AM
Hi ,

I am new to EXTJS, using EXTJS 4.1.3. try to customized the

Ext.tree.TreeNodeUI, but that not exist there, So please help me how can i do it.

to change the show order of text, and icon at node level.

Thanks
Manmohan