1. #1
    Sencha User
    Join Date
    Nov 2007
    Location
    London, UK
    Posts
    583
    Vote Rating
    0
    mabello is on a distinguished road

      0  

    Default TreePanelFilter Plugin

    TreePanelFilter Plugin


    I keep updating this first post with the updated version of the extension and examples (see attachment)

    Extension goal:
    Adding a filter to a TreePanel (API Doc style), so that you can have a TextField in the toolbar (bottom or top, depending on the cfg object passed to the TreePanelFilter ) and use it to filter the nodes in the tree.

    This extension make use of the extension of the prototype of the native javascript array you can find here:
    http://extjs.com/forum/showthread.php?t=37697
    It has been included in the attachment.

    Besides, in the example (attachment) I'm using another extension for the creation of the TreePanel (http://extjs.com/forum/showthread.ph...8#post124458);
    However, the plugin works with a normal TreePanel.


    Development history:

    Version 1.2 alfa
    ****************
    ADDED CLASS:
    Ext.ux.SearchField as a nice clearer text field.

    ADDED IN
    TreePanelFilterPlugin cfg object: textFieldType, support 2 value
    1) 'auto' means that the search start with the keydown event of the text field (after the buffering time)
    2) 'manual' means that you need to click in the search button next to the text field or press enter when the text field has focus to start searching; default to 'manual'

    ADDED FILE:
    Ext.us.TreeFilterPluginAllInOne.js as a all in one solution to use the extension

    Version 1.1 alfa
    ****************

    ADDED: Ext.ux.StartWithTreeFilter class; it has the responsability to filter the nodes.
    Must honour this contract interface
    PHP Code:
    //@Public function called before filter is applied(before the execution of the filterFn;); return true to cancel the execution of the operation.
        
    this.beforeFilterFn = function(texttreePaneltreeFilter){
            return 
    false;
        }
        
        
    //@Public function called for each node on the tree starting from the root. Return  true if you want to keep the node; all the nodes are processed starting from the root
        
    this.filterFn = function(nodetexttreePaneltreeFilter){
        }
        
        
    //@Public function called after the execution of the filterFn.
        
    this.afterFilterFn = function(texttreePaneltreeFilter){
        } 
    CHANGED: cfg object to pass to an instance of Ext.ux.TreeFilterPlugin (see the example)
    PHP Code:
    var cfg = {
            
    toolbarPosition//OPTIONAL @String: 'top', 'bottom', the toolbar position in which you want to add the TextField used to filter. If does not exit it will be created.
            
    ,insertAt//OPTIONAL @Integer: the position in which you want to add the TextField filter in the toolbar.
            
    ,width//OPTIONAL @String: TextField width.
            
    ,emptyText//OPTIONAL @String: TextField empty text.
            
    ,label//OPTIONAL@String: label before the text field; null or '' if you do not want to show any label.
            
    ,treeFilterCfg//OPTIONAL @Object: TreeFilter cfg object (see API TreeFilter)
            
    ,filterInstance://OPTIONAL @Object: need to honour the contract described by Ext.ux.StartWithTreeFilter 
            
    ,nodeAttribute://OPTIONAL @Object: the neame of the attribute that will be passed to the filterInstance in the filterFn
    }; 
    ATTACHMENT: in the example I'm using another extension for the creation of the TreePanel (http://extjs.com/forum/showthread.ph...8#post124458);
    However, the plugin works with a normal TreePanel


    Version 1.0alfa
    ****************

    -Initial release

    By default, the plugin executes a "start with" filter on the text attribute of the node (it will be configurble).
    You can pass a cfg object to an instance of TreeFilterPlugin:
    PHP Code:
    var cfg = {
            
    toolbarPosition//OPTIONAL @String: 'top', 'bottom', the toolbar position in which you want to add the TextField used to filter. If does not exit it will be created.
            
    ,insertAt//OPTIONAL @Integer: the position in which you want to add the filter.
            
    ,width//OPTIONAL @String: TextField width.
            
    ,emptyText//OPTIONAL @String: TextField empty text.
            
    ,label//OPTIONAL@String: label before the text field; null or '' if you do not want to show any label.
            
    ,treeFilterCfg//OPTIONAL @Object: TreeFilter cfg object (see API TreeFilter)
            
    ,beforeFilterFn(texttreePaneltreeFilter): //OPTIONAL @Function called before filter is applied(before the execution of the filterFn;); return true to cancel the execution of the operation.
            
    ,filterFn(nodetexttreePaneltreeFilter): //OPTIONAL  @Function called for each node on the tree starting from the root.
            
    ,aftetFilterFn(texttreePaneltreeFilter): //OPTIONAL@Function called after filter after the execution of the filterFn.
            
    ,filterFnScope//OPTIONAL @Object: the scope of the filterFn function, default the current node.
        
    }; 
    Public methods:

    PHP Code:
    //@Return the inner TreeFilter instance.
    getTreeFilter()

    //@Return the inner TextField instance.
    getTextField()

    //@clear the filter and the value of the TextField
    clearFilter(): 
    ****************

    Examples and explanations:

    Simply, add the plugin to a TreePanel:
    PHP Code:

        
    var treeFilterPlugin = new Ext.ux.TreeFilterPlugin({
            
    toolbarPosition:'top'
            
    ,width'170'
            
    ,label'Start with: '
        
    });

    treePanel = new Ext.tree.TreePanel({
                
    title'Users',
                ...
                
    plugins: [treeFilterPlugin]
            }); 
    Cheers
    Attached Files

  2. #2
    Ext JS Premium Member NoahK17's Avatar
    Join Date
    Apr 2008
    Location
    Atlanta, GA
    Posts
    518
    Vote Rating
    1
    NoahK17 is on a distinguished road

      0  

    Default


    Code:
    tbar.insertAt is not a function
    Is the error I get. Not sure what's going on with this line: tbar.insertAt(textField, defaultCfg.insertAt);
    Noah
    Senior Web Developer
    NBA.com

  3. #3
    Sencha User
    Join Date
    Nov 2007
    Location
    London, UK
    Posts
    583
    Vote Rating
    0
    mabello is on a distinguished road

      0  

    Default Fixed upload(hopefully)

    Fixed upload(hopefully)


    Dear NoahK17,

    Sorry about that.

    I'm using also this extension (I've forgotten to include it!)

    http://extjs.com/forum/showthread.php?t=37697

    Now I have included it in the .zip and I have uploaded the right attachment (hopefully)

    The plugin is also changed, check out the first post.

    Sorry again and thank you very much for your help.

    Marco

  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


    Live example for test please!!

    Thanks in advance,

  5. #5
    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,

    Live demo in: http://www.galdaka.es/

    1) Is posible that not appears vertical scroolbar?

    2) The search not work for me

    3) Is posible put config text like "no itens found" in tree when the search resturn nothing.

    4) Use Clearable textfield for erase the text.


    Thanks in advance,

  6. #6
    Sencha User
    Join Date
    Nov 2007
    Location
    London, UK
    Posts
    583
    Vote Rating
    0
    mabello is on a distinguished road

      0  

    Default


    Dear galdaka,
    Thanks for your help and for the live demo.
    I will upload an example asap, and probably I have also to change a little the TreeFilterPlugin class (I will update my first post).

    1)Scrollbars depends on the TreePanel config, TreePaanelFilter is completely independent from the configuration of the TreePanel, so I don't think it could be the problem.

    2)About the search, I need to upload the next version of TreeFilterPanel Plugin: in the current release, the search is done as a "start as filter" using the text attribute of the node. Anyway,I will upload an example and a small enhanchment to the plugin to fix it.

    3)I think it is easy to achieve, but I still need to make up my mind about different things, this is a very alpha release, so thanks fo the suggestion.

    4)Yes, this is another funcionality that could be easly be achievable, so I will do that asap, thanks again

    So for now, I will update the first post with an example.

    Thanks again and sorry for the problems.

  7. #7
    Sencha User
    Join Date
    Nov 2007
    Location
    London, UK
    Posts
    583
    Vote Rating
    0
    mabello is on a distinguished road

      0  

    Default


    I have added an example in my attachment and I have also changed the architecture of the plugin.
    Thanks
    @Galdaka: let me know if it works for you please and sorry again.

  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


    Is posible put all .js in one UX?

    Or put two version of your plugin: separately version (Your architecture and All-in-one)

    I think is much easy for use All-in-one,


    Thanks in advance,

  9. #9
    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 mabello View Post
    I have added an example in my attachment and I have also changed the architecture of the plugin.
    Thanks
    @Galdaka: let me know if it works for you please and sorry again.
    Hi,

    Not work properly in www.galdaka.es.

    1) The search field not appears correctly (Without empty text, etc...) and in some case (View 'Proyectos' treepanel not appears!!)

    2) I make a mistake, the search work fine; But only work in parent childs. Not work in childnodes...

    3) Is posible auto-adjust the searchfield in toolbar? Or make a config option for auto-adjust?

    Thanks in advance,
    Attached Images

  10. #10
    Sencha User
    Join Date
    Nov 2007
    Location
    London, UK
    Posts
    583
    Vote Rating
    0
    mabello is on a distinguished road

      0  

    Default


    Dear Galdaka,

    Yes, I've seen that in your nodes the text was starting with an empty character " Ext" so the problem for the search was that.

    1.
    I have also fixed the emptyText for the TextField, not it works right for me and I have add as you suggested the Ext.ux.TreeFilterPluginAllInOne file as a nice solution to use the plugin using only this "all in one" file. Please check out my first post, I have upload it with the last changes.

    About the error that the search field does not appear, I have to try and play with it, but I have made a small hack to create dinamically the toolbar, so I will fix it asap, thanks for pointing out the bug.

    2.
    The search works according to the implementation of the TreeFilter class of ext: when you filter a node, also the children are filtered no matter what (see function filter and filterBy of Ext.tree.TreeFilter); however, if you check out my example, yuo can easly implement your StartWithTreeFilter that do not cut leaves or whatever; this is really more "business dependent" I mean it depends on your application needs. I'm sure it will be simple to implement your own filter following the Ext.ux.StartWithTreeFilter interface.

    3.
    What do you mean with auto-adjust? In this moment you can specify the width of the TextField and the position in the toolbar (if your toolbar has already buttons etc, you can use the cfg property insertAt to insert the textField in the position you like). Can you explain me what do you mean with that, so I can check if I can easly implement it

    Thanks

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