Hybrid View

  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
    Ext JS Premium Member
    Join Date
    May 2007
    Location
    Sydney, Australia
    Posts
    178
    Vote Rating
    0
    badgerd is on a distinguished road

      0  

    Default


    I am successfully using this Plugin with many "correct" results returned in the tree.

    However, when the tree has lots of results it appears that the tree "freezes" and does not show that it is working. After a while the results show up.

    I have tried using a loading mask in the code, but it does not display/hide at the right time.

    I wish to display a "searching..." mask when the user hits the enter key and then removes the mask once all the results are filtered/displayed.

    Where in the code would be the best place to put the mask function in? I have tried beforeFilterFn, afterFilterFn, but it does not work correctly there.

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

      0  

    Default


    So something like this:

    PHP Code:
    this.beforeFilterFn = function(texttreePaneltreeFilter){
            
    treePanel.body.mask("Loading data...");//<------
            
    return startTreeFilter.beforeFilterFn(texttreePaneltreeFilter);
        }
        
    //@Public function called for each node on the tree starting from the root.
        
    this.filterFn = function(nodenodeAttributetexttreePaneltreeFilter){
            
    //Do not filter the lives if the node is to keep
            
    return (startTreeFilter.filterFn(nodenodeAttributetexttreePaneltreeFilter) || node.attributes['leaf'] == true);    
        }
        
    //@Public function called after filter after the execution of the filterFn.
        
    this.afterFilterFn = function(texttreePaneltreeFilter){
            
    treePanel.body.unmask();//<------
            
    return startTreeFilter.beforeFilterFn(texttreePaneltreeFilter);
        } 
    does not work?
    I guess because to display the mask takes time and if the rendering of the tree start strightaway after treePanel.body.mask("Loading data...") the mask does not show up since the browser freezes before displaying it...

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar