1. #1
    Sencha User lfs2008's Avatar
    Join Date
    Oct 2010
    Location
    Russia
    Posts
    64
    Vote Rating
    6
    lfs2008 is on a distinguished road

      3  

    Default Ext.ux.grid.TriStateTree

    Ext.ux.grid.TriStateTree


    Features:
    1. Extends Ext.tree.Panel
    2. If a parent node is checked / unchecked, all its child nodes are automatically checked / unchecked too.
    3. If only some children of a node are selected, its checkbox remains checked, but with a third visual state, using a darkened background.
      * A single file (checkboxes.gif) defines all the three images.
    4. getSelections method returns list of checked data as objects for simple backend serialization as [{id: 123}, {id: 345} ...]
      * If called with parameter id_only (bool) - it returns list of checked data as [123, 345]
      * If ALL_ID value found, only ALL_ID returned. as [{id: 1}]
      * By default only leaf nodes id`s returned. You can configure it via 'returnLeafsOnly' property.
    5. setSelections method consumes list of IDS [123,456,789] or objects [{id: 123}, {id: 345}]
      * Pass ALL_ID value in input list to check all.

      DEMO AND SOURCES http://wap7.ru/folio/ext-tri-state-tree/

      Ext.ux.grid.TriStateTree extension.png
    Please share any thoughts. if it is a duplicated extension - please comment.

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,235
    Vote Rating
    484
    scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute

      0  

    Default


    Nice job .. thank you for the contribution.

    Scott.

  3. #3
    Sencha User razvanioan's Avatar
    Join Date
    Feb 2008
    Location
    Romania
    Posts
    128
    Vote Rating
    51
    razvanioan has a spectacular aura about razvanioan has a spectacular aura about razvanioan has a spectacular aura about

      0  

    Default


    Awesome man,

    This works even on ExtJS 5 !

    Thx

    Later edit:

    It seems that on the ExtJS 5 while hovering the mouse over the arrow expander, the disabledCls vanishes, and I think that's maybe they use set('cls') for that which overrides ours.....

    I was trying to use addCls to the view of the record like in the example bellow, but this has more issues because they are removed by the framework on collapse / expand of the nodes.....

    I'll keep trying to find THE solution, but I also think that this shouldn't happen and I've reported this as bug here (fiddle included).....

    PHP Code:
    isThirdState: function (node) {
          return 
    node.isThirdState;
          
    //return  node.get('cls') == this.disabledCls;
        
    },

        
    setThirdState: function (node) {    
          
    //node.set('cls', this.disabledCls);
          
    node.getOwnerTree().getView().addRowCls(nodethis.disabledCls);
          
    node.set('checked'false);
          
    node.isThirdState true;
        },

        
    unsetThirdState: function (node) {
          
    //node.set('cls', '');
          
    node.getOwnerTree().getView().removeRowCls(nodethis.disabledCls);
          
    node.isThirdState false;
        } 
    Last edited by razvanioan; 14 Sep 2014 at 9:01 AM. Reason: Small issue found although
    ---
    Razvan Ioan ANASTASESCU
    Senior WEB Developer

  4. #4
    Sencha User lfs2008's Avatar
    Join Date
    Oct 2010
    Location
    Russia
    Posts
    64
    Vote Rating
    6
    lfs2008 is on a distinguished road

      0  

    Default


    Hi! Please keep us informed about extjs5 bug status so i can update plugin if it is not a bug

  5. #5
    Sencha User razvanioan's Avatar
    Join Date
    Feb 2008
    Location
    Romania
    Posts
    128
    Vote Rating
    51
    razvanioan has a spectacular aura about razvanioan has a spectacular aura about razvanioan has a spectacular aura about

      0  

    Default


    It seems that indeed was a bug the will be corrected in 5.0.2.

    Here it is: http://www.sencha.com/forum/showthre...49#post1066349

    Thanks once again !
    ---
    Razvan Ioan ANASTASESCU
    Senior WEB Developer

  6. #6
    Sencha User razvanioan's Avatar
    Join Date
    Feb 2008
    Location
    Romania
    Posts
    128
    Vote Rating
    51
    razvanioan has a spectacular aura about razvanioan has a spectacular aura about razvanioan has a spectacular aura about

      0  

    Default option

    option


    I have a situation when I might set returnLeafsOnly to some default, but sometimes on the same tree I'd like to be able to getSelections using some other option than the one set by default with the config parameter.

    So, I've added a secondary parameter called leafs_only to getSelections method (after id_only).
    Then I've checked if it's passed it or not when the method is called, if not stick to parameter default.

    PHP Code:
    if(leafs_only == undefined){
        
    leafs_only me.returnLeafsOnly;

    and then use this variable when checking in the code bellow, instead config option directly.

    Cheers
    ---
    Razvan Ioan ANASTASESCU
    Senior WEB Developer

  7. #7
    Sencha User razvanioan's Avatar
    Join Date
    Feb 2008
    Location
    Romania
    Posts
    128
    Vote Rating
    51
    razvanioan has a spectacular aura about razvanioan has a spectacular aura about razvanioan has a spectacular aura about

      0  

    Default clearThirdState - entire tree

    clearThirdState - entire tree


    I also needed a way to clear thirdState of entire tree after removing (previously selected) nodes (in successfull delete sync event of the proxy).

    PHP Code:
    clearThirdState: function(){
          var 
    me this;
          
          
    me.getRootNode().cascadeBy(function(){
            if (
    me.isThirdState(this)) {
              
    me.unsetThirdState(this);
            }
          });
        }, 
    Maybe somebody else needs this

    [edit]: I think this is smarter instead

    after removing all checked nodes or unchecking them from code (controller) it's easier to call the following in order to clear thirdState of the tree nodes:

    tree.fireEvent('checkchange', tree.getRootNode());

    That's it !
    Last edited by razvanioan; 13 Jan 2015 at 11:04 PM. Reason: even better idea (for clearing thirdState for entire tree)
    ---
    Razvan Ioan ANASTASESCU
    Senior WEB Developer

  8. #8
    Sencha User razvanioan's Avatar
    Join Date
    Feb 2008
    Location
    Romania
    Posts
    128
    Vote Rating
    51
    razvanioan has a spectacular aura about razvanioan has a spectacular aura about razvanioan has a spectacular aura about

      0  

    Default


    Hm,

    Another two things:

    - I also had a situation when I needed to retrieve individual nodes when rootNode was clicked (instead of ALL_ID value). For this i had a quick fix by adding a new config parameter (called allJustRootID) which designates if default behaviour (ALL_ID) or individual IDs should be returned;

    - but more nasty one was when I had the treeStore filtered....something I needed as well. Non-visible nodes (filtered out) where being selected too and thus returned by getSelections(). So for this I've added one more check (actually twice) in setChildrenCheckedStatus function, to see if the current node is visible or not, like this (I check for node visibility on recursion as well just for improved performance):

    PHP Code:
    setChildrenCheckedStatus: function (current) {
          
    // if not root checked
          
    if (current.data.visible && current.parentNode) {
            var 
    parent current.parentNode;
            
    current.set('checked'parent.get('checked'));
          }

          if (
    current.data.visible && current.hasChildNodes()) {
            
    current.eachChild(arguments.callee);
          }
        } 
    ---
    Razvan Ioan ANASTASESCU
    Senior WEB Developer

  9. #9
    Sencha User razvanioan's Avatar
    Join Date
    Feb 2008
    Location
    Romania
    Posts
    128
    Vote Rating
    51
    razvanioan has a spectacular aura about razvanioan has a spectacular aura about razvanioan has a spectacular aura about

      0  

    Default


    I've found another bug, that I will try later to find a solution for and I will post the solution then (including with JS file with all changes above + this one).

    Try this on your demo page:

    - select node with id 3 (book report)
    - select node with id 6 (meat)
    - deselect any of them -> rootNode will loose thirdState, which is not correct as there is still one checked !
    ---
    Razvan Ioan ANASTASESCU
    Senior WEB Developer

  10. #10
    Sencha User lfs2008's Avatar
    Join Date
    Oct 2010
    Location
    Russia
    Posts
    64
    Vote Rating
    6
    lfs2008 is on a distinguished road

      0  

    Default


    thanks for your help

    see updated demo http://wap7.ru/folio/ext-tri-state-tree/

    DEPRECATED
    returnLeafsOnly

    ADDED
    codepen embedded demo
    method clearThirdState
    parameter 'leafs_only' in getSelections: function (id_only, leafs_only)

    BUGS
    • store filtering issue (hidden were selected)
      see current.data.visible line
    • no raising checkbox after 3rd level check (milk for example) DONE!