Ext.ux.grid.TriStateTree

[lfs2008]

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.

[scottmartin]

Nice job .. thank you for the contribution.

Scott.

[razvanioan]

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).....

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

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

    unsetThirdState: function (node) {
      //node.set('cls', '');
      node.getOwnerTree().getView().removeRowCls(node, this.disabledCls);
      node.isThirdState = false;
    } 

[lfs2008]

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

[razvanioan]

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 !

[razvanioan]

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.

if(leafs_only == undefined){
    leafs_only = me.returnLeafsOnly;
} 

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

Cheers

[razvanioan]

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

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 !

[razvanioan]

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

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);
      }
    } 

[razvanioan]

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 !

[lfs2008]

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!