TreePanelFilter Plugin

[mabello]

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

//@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(text, treePanel, treeFilter){
        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(node, text, treePanel, treeFilter){
    }
    
    //@Public function called after the execution of the filterFn.
    this.afterFilterFn = function(text, treePanel, treeFilter){
    } 

CHANGED: cfg object to pass to an instance of Ext.ux.TreeFilterPlugin (see the example)

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:

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(text, treePanel, treeFilter): //OPTIONAL @Function called before filter is applied(before the execution of the filterFn;); return true to cancel the execution of the operation.
        ,filterFn(node, text, treePanel, treeFilter): //OPTIONAL  @Function called for each node on the tree starting from the root.
        ,aftetFilterFn(text, treePanel, treeFilter): //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:

//@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:

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

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

Cheers

[NoahK17]

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);

[mabello]

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

[galdaka]

Live example for test please!!

Thanks in advance,

[galdaka]

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,

[mabello]

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.

[mabello]

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.

[galdaka]

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,

[galdaka]

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,

[mabello]

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