[2.2] Tri-state tree/Tree with themed checkbox [NEW v1.2]

[BrainDrain]

You could use:

.x-tree-node a span {white-space: normal;}

(but I don't think you'll like the result)

Yes, I've already tried - no good
OK, I will try by myself
something like that

   .x-tree-node a span
   {
       white-space: normal;
   }
   .x-tree-node td
   {
       vertical-align:top;
   }

    renderElements: function(n, a, targetNode, bulkRender) {
        this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
        var cb = a.checked !== undefined;
        var href = a.href ? a.href : Ext.isGecko ? "" : "#";
        var iconCls = a.iconCls || 'x-tree-node-icon';        
         var buf = ['<li class="x-tree-node"><table table border="0" cellpadding="0" cellspacing="0"><tbody><tr ext:tree-node-id="', n.id, '" class="x-tree-node-el x-tree-node-leaf x-unselectable ', a.cls, '" unselectable="off">',
             '<td><span class="x-tree-node-indent">', this.indentMarkup, "</span></td>",
             '<td><img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow" /></td>',
             '<td><img src="', a.icon || this.emptyIcon, '" class="' + iconCls, (a.icon ? " x-tree-node-inline-icon" : ""), (a.iconCls ? " " + a.iconCls : ""), '" unselectable="on" /></td>',
             cb ? ('<td style="padding-top:4px;"><img src="' + this.emptyIcon + '" class="x-tree-checkbox' + (a.checked === true ? ' x-tree-node-checked' : (a.checked !== false ? ' x-tree-node-grayed' : '')) + '" /></td>') : '',
             '<td><a hidefocus="on" class="x-tree-node-anchor" href="', href, '" tabIndex="1" ',
              a.hrefTarget ? ' target="' + a.hrefTarget + '"' : "", '><span unselectable="on">', n.text, "</span></a></td></tr></tbody></table>",
             '<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.firstChild.firstChild.firstChild;
        this.ctNode = this.wrap.childNodes[1];
          
         var cs = this.elNode.childNodes;
         this.indentNode = cs[0].firstChild;
         this.ecNode = cs[1].firstChild;
         this.iconNode = cs[2].firstChild;
         var index = 3;
         if (cb) {
             this.checkbox = cs[3].firstChild;
             index++;
         }
         this.anchor = cs[index].firstChild;
         this.textNode = cs[index].firstChild.firstChild;
    }

but I need correct lines displaying

[BrainDrain]

fixed here

[Rodolfo]

getChecked(); not work if you check or uncheck only a parent (folder) node ?

[Condor]

[QUOTE=Rodolfo;243020]getChecked(); not work if you check or uncheck only a parent (folder) node ?

[Rodolfo]

Thanks, works OK..

very useful, i hope this tris state tree will be include in the next extJS release,
(anyway i'm already using in my app )

[agalue]

[quote=Rodolfo;243020]getChecked(); not work if you check or uncheck only a parent (folder) node ?

[Condor]

Hello,

First of all... great plugin... thanks for that....

But, I'm confused. Can any body tell me where can I find the correct implementation of Ext.tree.TriStateNodeUI that don't have issues when you check or uncheck parent folders ?

I had tried with the original post (and suggested patch) but I still have problem with parent folders that affects treePanel.getChecked()


The problem:

1. Check a child node (parent node appears grayed... ok)
2. Uncheck parent node (this uncheck all children... ok)
3. Check other child node different of node checked on step 1 (The result is 2 children are checked .... wrong)

That was the whole point I was trying to make in this post.
Checking or unchecking a parent node does not actually check on uncheck all child nodes (I could do this, but it could be slow and it wouldn't work for AsychTreeNodes).
I added the getChecked methods, so you can at least reliably find which nodes are visually checked.

[agalue]

Hello Condor,

That was the whole point I was trying to make in this post.
Checking or unchecking a parent node does not actually check on uncheck all child nodes (I could do this, but it could be slow and it wouldn't work for AsychTreeNodes).
I added the getChecked methods, so you can at least reliably find which nodes are visually checked.

I'm not interersted in using AcyncTreeNodes with this feature, but I'm interested to see even if it's slow the code to correct the problem.

It's confused when you uncheck a parent node that was full checked, and then check only one child and all others childs appears checked!. But, the only node that I spect to be checked appers unchecked!

Can you share the "slow" code please ?

And thanks for your help.

[Condor]

It isn't even all that difficult:

Ext.override(Ext.tree.TriStateNodeUI, {
	onCheckChange :function(){
		Ext.tree.TriStateNodeUI.superclass.onCheckChange.apply(this, arguments);
		var p;
		if((p = this.node.parentNode) && p.getUI().updateParent && !p.getUI().isUpdating) {
			p.getUI().updateParent();
		}
	},
	updateChild:function(checked){
		if(typeof checked == 'boolean'){
			this.isUpdating = true;
			this.node.eachChild(function(n){
				n.getUI().toggleCheck(checked);
			}, this);
			delete this.isUpdating;
		}
	}
});

[agalue]

Condor,

I tried your code today and it works perfect. Thank you very much for your help.