1. #1
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,521
    Vote Rating
    375
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default Ext.ux.tree.TreeFilterX

    Ext.ux.tree.TreeFilterX


    Inspired by http://extjs.com/forum/showthread.php?p=252709 I've just rolled out a preview version of the eXtended tree filter. The main problem with default tree filter that comes with Ext is that if a child matches filter expression but its parent doesn't, the parent is hidden hiding also the matching child.

    What I needed was to find all children in already loaded tree and show its parents regardless if they themselves match the filter expression or not. The code is below and the live demo at http://remotetree.extjs.eu

    Let me please know what do you think and report bugs and/or some ideas for improvement.

    Thanks.

    PHP Code:
    // vim: ts=4:sw=4:nu:fdc=4:nospell
    /*global Ext */
    /**
     * @class   Ext.ux.tree.TreeFilterX
     * @extends Ext.tree.TreeFilter
     *
     * <p>
     * Shows also parents of matching nodes as opposed to default TreeFilter. In other words
     * this filter works "deep way".
     * </p>
     *
     * @author   Ing. Jozef Sakáloš
     * @version  1.0
     * @date     17. December 2008
     * @revision $Id: Ext.ux.tree.TreeFilterX.js 752 2009-10-26 08:25:46Z jozo $
     * @see      <a href="http://extjs.com/forum/showthread.php?p=252709">http://extjs.com/forum/showthread.php?p=252709</a>
     *
     * @license Ext.ux.tree.CheckTreePanel is licensed under the terms of
     * the Open Source LGPL 3.0 license.  Commercial use is permitted to the extent
     * that the code/component(s) do NOT become part of another Open Source or Commercially
     * licensed development library or toolkit without explicit permission.
     * 
     * <p>License details: <a href="http://www.gnu.org/licenses/lgpl.html"
     * target="_blank">http://www.gnu.org/licenses/lgpl.html</a></p>
     *
     * @forum     55489
     * @demo      http://remotetree.extjs.eu
     *
     * @donate
     * <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
     * <input type="hidden" name="cmd" value="_s-xclick">
     * <input type="hidden" name="hosted_button_id" value="3430419">
     * <input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-butcc-donate.gif" 
     * border="0" name="submit" alt="PayPal - The safer, easier way to pay online.">
     * <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
     * </form>
     */

    Ext.ns('Ext.ux.tree');

    /**
     * Creates new TreeFilterX
     * @constructor
     * @param {Ext.tree.TreePanel} tree The tree panel to attach this filter to
     * @param {Object} config A config object of this filter
     */
    Ext.ux.tree.TreeFilterX Ext.extend(Ext.tree.TreeFilter, {

        
    // {{{
        /**
         * Filter the data by a specific attribute.
         *
         * @param {String/RegExp} value Either string that the attribute value 
         * should start with or a RegExp to test against the attribute
         * @param {String} attr (optional) The attribute passed in your node's attributes collection. Defaults to "text".
         */
         
    filter:function(valueattrstartNode) {

            var 
    animate this.tree.animate;
            
    this.tree.animate false;
            
    this.tree.expandAll();
            
    this.tree.animate animate;
            
    Ext.ux.tree.TreeFilterX.superclass.filter.apply(thisarguments);

        } 
    // eo function filter
        // }}}
        // {{{
        /**
         * Filter by a function. The passed function will be called with each 
         * node in the tree (or from the startNode). If the function returns true, the node is kept 
         * otherwise it is filtered. If a node is filtered, its children are also filtered.
         * Shows parents of matching nodes.
         *
         * @param {Function} fn The filter function
         * @param {Object} scope (optional) The scope of the function (defaults to the current node) 
         */
        
    ,filterBy:function(fnscopestartNode) {
            
    startNode startNode || this.tree.root;
            if(
    this.autoClear) {
                
    this.clear();
            }
            var 
    af this.filteredrv this.reverse;

            var 
    = function(n) {
                if(
    === startNode) {
                    return 
    true;
                }
                if(
    af[n.id]) {
                    return 
    false;
                }
                var 
    fn.call(scope || nn);
                if(!
    || rv) {
                    
    af[n.id] = n;
                    
    n.ui.hide();
                    return 
    true;
                }
                else {
                    
    n.ui.show();
                    var 
    n.parentNode;
                    while(
    && !== this.root) {
                        
    p.ui.show();
                        
    p.parentNode;
                    }
                    return 
    true;
                }
                return 
    true;
            };
            
    startNode.cascade(f);

            if(
    this.remove){
               for(var 
    id in af) {
                   if(
    typeof id != "function") {
                       var 
    af[id];
                       if(
    && n.parentNode) {
                           
    n.parentNode.removeChild(n);
                       }
                   }
               } 
            }
        } 
    // eo function filterBy
        // }}}

    }); // eo extend

    // eof 
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  2. #2
    Sencha User galdaka's Avatar
    Join Date
    Mar 2007
    Location
    Spain
    Posts
    1,166
    Vote Rating
    -1
    galdaka is an unknown quantity at this point

      0  

    Default


    Hi,

    Awesome!!

    I

  3. #3
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,521
    Vote Rating
    375
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Re 2 trees: Same id somewhere?
    Re textfield: It is not a part of tree filter, I can make example with clearable textfield though.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  4. #4
    Sencha User galdaka's Avatar
    Join Date
    Mar 2007
    Location
    Spain
    Posts
    1,166
    Vote Rating
    -1
    galdaka is an unknown quantity at this point

      0  

    Default


    Now works fine!

  5. #5
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,521
    Vote Rating
    375
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    I've changed textfield to triggerfield. Also Esc clears it.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  6. #6
    Sencha User galdaka's Avatar
    Join Date
    Mar 2007
    Location
    Spain
    Posts
    1,166
    Vote Rating
    -1
    galdaka is an unknown quantity at this point

      0  

    Default


    The plugin works fine!! Thanks again.

    Would be great, a specific textfield for search with this features:

    1) Auto-adjust or auto-resize to panel tbar.
    2) Two state of button: Initial state with "Search" icon and when you write in it change to "Clear" icon.

    P.D: In your example, context menu is wrong (see image)

    Greetings,
    Attached Images

  7. #7
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,521
    Vote Rating
    375
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Re Search field: This is not part of TreeFilterX so every user can implement its own field. The behavior you describe can be achieved quite easily.

    Re Context menu: Try to refresh cache - I cannot reproduce it.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  8. #8
    Sencha User galdaka's Avatar
    Join Date
    Mar 2007
    Location
    Spain
    Posts
    1,166
    Vote Rating
    -1
    galdaka is an unknown quantity at this point

      0  

    Default


    Quote Originally Posted by jsakalos View Post
    Re Context menu: Try to refresh cache - I cannot reproduce it.
    I use IE7. I refresh the cache. Not work.

    Thanks,

  9. #9
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,521
    Vote Rating
    375
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Oh yes, IE again... I don't have time to fix it now as I force my users to Firefox. Perhaps css needs some tweaking.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  10. #10
    Sencha User galdaka's Avatar
    Join Date
    Mar 2007
    Location
    Spain
    Posts
    1,166
    Vote Rating
    -1
    galdaka is an unknown quantity at this point

      0  

    Default


    Hi again,

    I quit textfield and I replace by 'Searchfield'. You can view the results in http://www.jadacosta.es/

    But I have a problem, in the second panel searhfield not appears! If I change he xtype by "textfield" works fine.

    Any suggestions?

    Thanks in advance,

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi