1. #1
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    86
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

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

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


    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.
    Attached Images
    Attached Files
    Last edited by Condor; 17 Dec 2008 at 7:47 AM. Reason: Updated to version 1.2

  2. #2

  3. #3
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    86
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Question


    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.

  4. #4
    Sencha User
    Join Date
    Oct 2007
    Location
    Berlin, Germany
    Posts
    889
    Vote Rating
    9
    wm003 will become famous soon enough

      0  

    Default


    Quote Originally Posted by Condor View Post
    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)

  5. #5
    Sencha User
    Join Date
    Jul 2007
    Location
    Italy
    Posts
    134
    Vote Rating
    0
    fermo111 is on a distinguished road

      0  

    Default


    Very nice!!!

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

    Code:
    preloadChildren:true,
    because that would give me the following error

    Code:
    R is undefined
    and the tree would not load. This is in FF 3 on Linux.

    Thanks

    Luca

  6. #6
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    86
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Quote Originally Posted by fermo111 View Post
    I had to delete the line (file test.html)
    Code:
    preloadChildren:true,
    because that would give me the following error
    Code:
    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).

  7. #7
    Sencha User
    Join Date
    Jul 2007
    Location
    Italy
    Posts
    134
    Vote Rating
    0
    fermo111 is on a distinguished road

      0  

    Default


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

  8. #8
    Ext User
    Join Date
    Oct 2007
    Posts
    63
    Vote Rating
    0
    rtconner is on a distinguished road

      0  

    Default


    Quote Originally Posted by Condor View Post
    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.

  9. #9
    Ext User
    Join Date
    Oct 2007
    Posts
    63
    Vote Rating
    0
    rtconner is on a distinguished road

      0  

    Default


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

    Code:
    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)

  10. #10
    Sencha User
    Join Date
    Jul 2007
    Location
    Italy
    Posts
    134
    Vote Rating
    0
    fermo111 is on a distinguished road

      0  

    Default


    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:

    Code:
    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
    		}]
    	}]
    }];

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi