Hybrid View

  1. #1
    Sencha User
    Join Date
    May 2007
    Posts
    227
    Vote Rating
    16
    John Sourcer will become famous soon enough

      0  

    Default 1.1 Treefilter

    1.1 Treefilter


    Hi All,

    I have a tree of a +2000 nodes about 3 levels deep. It populates fine and quite quickly. I am testing treefilter before decding whether to round trip.

    My code:

    PHP Code:
    var root myTree.getRootNode();
    var 
    term txtFind.getValue();
    var 
    re = new RegExp(term,'i');
    myFilter.filter(re,'text',root); 
    works except that it only returns top level nodes matching the criteria and their children! So it doesn't find nodes that are below the 1st level.

    Am I being stupid and missing something?

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    AsyncTreeNodes that are not viewed are not loaded. You have to expand a node once for its children to be loaded.

  3. #3
    Sencha User
    Join Date
    May 2007
    Posts
    227
    Vote Rating
    16
    John Sourcer will become famous soon enough

      0  

    Default


    Ahhh, shot Animal!

    Is there a way around this or is it best to do this server side?

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    It's a browser side thing.

    You'll have to do a deep expand, with collapse as the callback (with animation turned off so that you don't see it happen).

    This will ensure that what you think is there, is really there!

  5. #5
    Sencha User
    Join Date
    May 2007
    Posts
    227
    Vote Rating
    16
    John Sourcer will become famous soon enough

      0  

    Default


    Looks like something to get my teeth into. Ta very much, Sir!

  6. #6
    Sencha User Saeven's Avatar
    Join Date
    Mar 2007
    Location
    Ottawa, Canada
    Posts
    419
    Vote Rating
    1
    Saeven is on a distinguished road

      0  

    Default TreeFilter for 2.0

    TreeFilter for 2.0


    Searching about for a 2.0 treefilter, I found this thread. The 2.0 TreeFilter however, wasn't behaving in the manner in which I expected...so I baked this code up. It works pretty rapidly, on the principle of marking used paths from the leaves.

    Code:
    var hiddenPkgs  = [];
    var markCount	= [];
    
    // filter the kb tree for hits
    function filterTree(e){
    	var text = e.target.value;
    	Ext.each(hiddenPkgs, function(n){
    		n.ui.show();
    	});
    	
    	markCount  = [];	
    	hiddenPkgs = [];
    	
    	if( text.trim().length > 0 ){
    		kb_tree.expandAll();
    		
    		var re = new RegExp( Ext.escapeRe(text), 'i');
    		kb_tree.root.cascade( function( n ){
    			if( re.test(n.text) )
    				markToRoot( n, kb_tree.root );
    		});
    		
    		// hide empty packages that weren't filtered		
    		kb_tree.root.cascade(function(n){
    			if( ( !markCount[n.id] || markCount[n.id] == 0 ) && n != kb_tree.root ){
    				n.ui.hide();
    				hiddenPkgs.push(n);
    			}
    		});
    	}
    }
    
    function markToRoot( n, root ){
    	
    	if( markCount[n.id] )
    		return;
    		
    	markCount[n.id] = 1;
    	
    	if( n.parentNode != null )
    		markToRoot( n.parentNode, root );
    }
    Use this on a text field with something like:

    Code:
    new Ext.form.TextField({
    										emptyText:'Find a subject',
    										listeners:{
    											render: function(f){
    												f.el.on('keydown', filterTree, f, {buffer: 350});
    											}
    										}
    									})
    Hope this saves someone some time! It will display all paths that lead to hits.