Saturday, September 10, 2011

Extjs tree filter [filtering tree items in extjs 4 ]

Download  source code from here:  treeDemp.html, treeDemo1.js  [Note: you will need extjs 4]
Click the image to see demo
The main idea is for each keyup in the text box i do following:

  1. tree.getRootNode().cascadeBy(function() { // descends into child nodes
  2.    if(!(this.data.qtip.indexOf(txt.getValue())>-1)) {//Now do the actual filtering
  3.         console.log("remove");
  4.         removeArray[i] = this;//cannot call this.remove() here as cascadeBy() tends to traverse all the nodes and if node is removed it gives error
  5.         i++;
  6.    }
  7.    
  8. });
  9. for(var j=0;j<i;j++) {
  10.         removeArray[j].remove();//do actual removing, but unforunately once //removed,,there is not a easy way to add back to same location so , here i //simply regenrate whole tree again at line 53 : setnode(tree)
  11. }
Detail code given below:

  1. Ext.application({
  2.     name: 'treeFilterDemo',
  3.     appFolder: 'app',
  4.     requires: [  'Ext.form.Panel','Ext.container.Viewport',
  5.                  'Ext.tab.Panel','Ext.tree.Panel','Ext.data.TreeStore','Ext.layout.container.Border'
  6.              ],
  7.      setnode:function(tree){
  8.                 var node = {text:'', qtip:'',expanded:true, leaf:false, children:[]};
  9.                
  10.                 var node1_1 = {text:'apple_1', qtip:'apple_1',expanded:true, leaf:true, children:[]};
  11.                 var node1_2 = {text:'apple_2', qtip:'apple_2',expanded:true, leaf:true, children:[]};
  12.                 var node1 = {text:'apple', qtip:'apple,apple_1,apple_2',expanded:true, leaf:false, children:[node1_1,node1_2]};
  13.                 var node2_1 = {text:'apricoat_1', qtip:'apricoat_1',expanded:true, leaf:true, children:[]};
  14.                 var node2_2 = {text:'apricoat_2', qtip:'apricoat_2',expanded:true, leaf:true, children:[]};
  15.                 var node2 = {text:'apricoat', qtip:'apricoat,apricoat_1,apricoat_2',expanded:true, leaf:false, children:[node2_1,node2_2]};
  16.                 node.children = [node1,node2];
  17.                 tree.setRootNode(node);
  18.         },
  19.     launch: function() {
  20.                 var setNodeFn = this.setnode;
  21.                 var tree =  Ext.create('Ext.tree.Panel', {
  22.                 myRootNodes:[],
  23.                 region:'center',
  24.                 hideHeaders: true,
  25.                 rootVisible: false,
  26.                 expandedNodes:[],
  27.                  viewConfig: {
  28.                     plugins: {
  29.                         ptype: 'treeviewdragdrop',
  30.                         appendOnly: true
  31.                     }
  32.                 },
  33.                 height: 350,
  34.                 width: 400,
  35.                 });
  36.                 var textField = {xtype:'textfield',
  37.                 prompt:'serach',
  38.                 name: 'name',
  39.                 region:'north',
  40.                 value:'Type filter text',
  41.                 enableKeyEvents:true,
  42.                 listeners:{
  43.                     focus:{fn:function (view, record, item, index, even) {
  44.                    this.setValue("");
  45.            
  46.                     }},
  47.                     keyup:{
  48.                                 fn:function(view, record, item, index, even){
  49.                                 var txt= this;
  50.                                 setNodeFn(tree);
  51.                                 var removeArray = [];
  52.                                 var i=0;
  53.                                                         tree.getRootNode().cascadeBy(function() { // descends into child nodes
  54.                                                            if(!(this.data.qtip.indexOf(txt.getValue())>-1)) {//Now do the actual filtering
  55.                                                                 console.log("remove");
  56.                                                                 removeArray[i] = this;//cannot call this.remove() here as cascadeBy() tens to traverse all the nodes and if node is removed it gives error
  57.                                                                 i++;
  58.                                                            }
  59.                                                            
  60.                                                         });
  61.                                                         for(var j=0;j<i;j++) {
  62.                                                                 removeArray[j].remove();//do actual removing, but unforunately once removed,,there is not a easy way to add back to same location so , here i simply regenrate whole tree again at line 53 : setnode(tree)
  63.                                                        
  64.                                                         }
  65.                         }
  66.                     }
  67.                                
  68.                  }
  69.                };
  70.                 this.setnode(tree);
  71.         Ext.create('Ext.container.Viewport', {
  72.             items: [
  73. textField,tree
  74.             ]
  75.         });
  76.     }
  77. });

1 comment:

  1. I had the same problem and after a long time searching I decided to implement something by myself, this works for a full search in nodes and leafs, automatically expands found nodes, is pretty generic you can see it in: http://victorbarzana.blogspot.de/2012/11/recursively-search-in-extjs-tree.html

    Best regards,
    Victor

    ReplyDelete