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

[Condor]

Ext 2.2 introduced a themed checkbox component, but unfortunately the new checkbox theme wasn't used for trees and fieldsets.

So I started out making a TreeNodeUI that would use checkbox images instead of checkbox inputs.
After I finished I couldn't resist making a TreeNodeUI descendant that would do what many of you have asked for: support checkboxes with a grayed/partial state and automatic cascading.

Include TreeCheckbox.css and TreeCheckbox.js to get themed checkboxes in your grid.

Include TriStateNodeUI.css and TriStateNodeUI.js and set the uiProvider to TriStateNodeUI to get automatic update of parent/child checked states.
If your tree is very large or if you are using asynchronous node loading (AsynchTreeNode) you should use AsynchTriStateNodeUI instead of TriStateNodeUI (because children that aren't loaded yet can't be checked/unchecked).

Check out example.html to see how to use the new components.

Version 1.1:
- Removed CSS margin.
- Added getChecked method to return correct checked state, even with AsynchTriStateNodeUI.
- Changed TriStateNodeUI to do a real check cascade and moved the original virtual cascading code to AsynchTriStateNodeUI, to be used when a real cascade is to slow (large tree) or impossible (asynchronous node loading).

New version 1.2:
- Fixed bug when in mixing nodes with and without checkboxes.
- Only fire checkchange if checked stated actually changed.

[wm003]

Great Stuff! Thanks for sharing and hopefully this will be included in ext 2.3

[Condor]

After working with my new tree a few days I noticed a few problems:

1. The margin:0 1px should be removed from the CSS (it causes cursor flickering).

2. In the example:
- Click 'Column Tree Example' (now 'Abstract rendering in TreeNodeUI', 'Create TreePanel to render and lock headers' and 'Test and make sure it works' look unchecked (but aren't).
- Click 'Test and make sure it works'. Now 'Test and make sure it works' is unchecked and 'Abstract rendering in TreeNodeUI' and 'Create TreePanel to render and lock headers' show their checked state again.

I would like your input in this one: Is this really a problem? Because fixing it would require to actually update the checked state of children which could be slow and doesn't even work correctly in an AsyncTreeNode.

[wm003]

2. In the example:
...
I would like your input in this one: Is this really a problem? Because fixing it would require to actually update the checked state of children which could be slow and doesn't even work correctly in an AsyncTreeNode.

I would keep it this way and rather let the developer react on check/uncheck-events to handle the "partly-checked" checkbox on the parent node (at least this is needed when using async treenodes..i always have to do this in my trees to update the parent node text (becaus it displays the amount of checked childs, so it could also handle the change of the checkbox)

[fermo111]

Very nice!!!

Just one minor problem. I had to delete the line (file test.html)

preloadChildren:true,

because that would give me the following error

R is undefined

and the tree would not load. This is in FF 3 on Linux.

Thanks

Luca

[Condor]

I had to delete the line (file test.html)

preloadChildren:true,

because that would give me the following error

R is undefined

and the tree would not load. This is in FF 3 on Linux.

That is strange...
I have no problems with the file (tested IE 6, IE 7, FF 3.0.0.1, Opera 9.51 and Safari 3.1.2 on Windows XP SP3).

[fermo111]

Sorry, my fault. I wasn't using Ext v2.2.

[rtconner]

2. In the example:
- Click 'Column Tree Example' (now 'Abstract rendering in TreeNodeUI', 'Create TreePanel to render and lock headers' and 'Test and make sure it works' look unchecked (but aren't).
- Click 'Test and make sure it works'. Now 'Test and make sure it works' is unchecked and 'Abstract rendering in TreeNodeUI' and 'Create TreePanel to render and lock headers' show their checked state again.

It's kind of cool the way it is. Like a "remember the checkboxes I had checked" kind of feature. I mean that requires that the developer is a bit smarter on the server side when saving, but outside of the extra effort there, it's fine.

Btw, I don't know if you meant to or not, but double-clicking the checkbox still expands and collapses the tree. To me that is a bit of an unexpected behavior.

[rtconner]

Also do you know, why this type of usage does not work?

new Ext.tree.TreePanel({
	        rootVisible	: false,
	        root		: new Ext.tree.TreeNode({text:'Types', id:'root', 
	        	children: data,
				uiProvider:Ext.tree.TriStateNodeUI
	       	}),
	       	loader: new Ext.tree.TreeLoader({preloadChildren:true}) 
		})

When I run that, the root is visible, and the children do not get loaded ever.

(sorry for the complaints. this tree is just want I was looking for and really is very nice)

[fermo111]

How many branch levels does it support? I have tried adding a third level but the checkboxes are not updated correctly. This is the data I have tried:

var data = [{
	text: 'New Top Node',
	checked: null,
	expanded: true,
	children: [{
		text:'ColumnTree Example',
		checked:null,
		expanded:true,
		children:[{
			text:'Abstract rendering in TreeNodeUI',
			checked:true,
                        ...         
                        ...         
                        ...         
		},{
			text:'Test and make sure it works',
			checked:false,
			disabled:true,
			leaf:true
		}]
	}]
}];