The Ext.ux.grid.TriStateTree

See readme and source at github

See whole Portfolio

See the Pen Ggmmxp by Lev (@lev-savranskiy) on CodePen.


  1. TriState Tree Extends Ext.tree.Panel
  2. If a node is changed, all its child/parent nodes updated accordingly.
  3. If only some children of a node are selected, its checkbox remains checked, but with a third visual state, using a darkened background.


  1. Download files github
  2. Fill with own data or via setRootNode()
  3. Place checkbox.gif in images folder
  4. checkbox.gif defines all the three images.
  5. Change css url path accordingly
  6. See code snippets in Codepen


  1. ALL_ID (rootId) value to match your backend logic for SELECT ALL (1 by default)
  2. clearThirdState: function
    method clears ThirdState of entire tree
  3. getSelections: function (id_only, leafs_only)
    by default id_only, leafs_only are false, which means - method returns list of ALL checked data as objects for simple backend serialization as [{id: 123}, {id: 345} ...]

    * Nodes in third state not returned
    * If called with parameter id_only=true - it returns list of checked data as [123, 345]
    * If called with parameter leafs_only=true - it returns checked leafs_only, without parent nodes
    * If ALL_ID value found, only ALL_ID returned. as [{id: 1}]

  4. setSelections: function
    method consumes list of IDS [123,456,789] or objects [{id: 123}, {id: 345}]

    * Pass ALL_ID value in input list to check all.


  1. Discuss at sencha forum
  2. See author`s portfolio