TreePanelFilter Plugin

**mabello** · 18 Dec 2008 4:11 AM

@paulyb263

Hi there.
Internally I was using Ext.tree.TreeFilter.
Instead of the Ext default implementation, you can use Ext.ux.tree.TreeFilterX from Saki's extension:

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

So you can:

1)Add Saki's extension.
2)Change my code Ext.ux.TreeFilterPlugin
to use Ext.ux.tree.TreeFilterX

PHP Code:


textField = new Ext.ux.SearchField(textFieldCfg);

        filter = new Ext.ux.tree.TreeFilterX (treePanel, defaultCfg.treeFilterCfg);   //<------ use TreeFilterX 
        
        tbar.insertAt(textField, defaultCfg.insertAt);

3)Create the contains filter and use it

PHP Code:



//Custom filter implementation; 
Ext.ux.ContainsTreeFilter = function(){
    //@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.
    this.filterFn = function(node, nodeAttribute, text, treePanel, treeFilter){
        var re = new RegExp('.*' + text + '.*', 'i');
        return re.test(node.attributes[nodeAttribute]);
    }
    //@Public function called after filter after the execution of the filterFn.
    this.afterFilterFn = function(text, treePanel, treeFilter){
        return;
    }
}

Hope this helps

**victorlrf** · 15 Jan 2009 10:30 AM

hi guys it's my first post and sorry about my english

so i'm try use this code but a don't
how implement this in my code

this my code
[html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>OS</title>
<link rel="stylesheet" type="text/css" href="/sig/FrameWorks/ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="/sig/FrameWorks/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/sig/FrameWorks/ext/ext-all.js"></script>

<style type="text/css">
html, body {font: normal 11px verdana;}
#main-panel td {padding:5px;}
.add-feed {background-image: url(feed-viewer/images/rss_add.gif) !important;}
.remove-feed {background-image: url(feed-viewer/images/rss_delete.gif) !important;}
.x-tree-node div.feeds-node{
background:#eee url(images/cmp-bg.gif) repeat-x;
margin-top:1px;border-top:1px solid #ddd;
border-bottom:1px solid #ccc;
padding-top:2px;padding-bottom:1px;}
.feeds-node .x-tree-node-icon {display:none;}
.feed {border:1px solid #fff;margin:3px;}
.feed .x-tree-ec-icon {display:none;}
.feed-icon {background-image:url(/sig/FrameWorks/ext/examples/layout-browser/images/page_attach.png) !important;}

#header { background: #7F99BE url(/sig/FrameWorks/ext/examples/layout-browser/images/layout-browser-hd-bg.gif) repeat-x center;}
#header h1 {font-size: 16px;color: #fff; font-weight: normal;padding: 5px 10px;}
</style>
<script type="text/javascript">

Ext.onReady(function() {

var titulo ={
xtype: 'box'
,title: 'Extend Ordem de Servi

**mabello** · 15 Jan 2009 10:40 AM

Dear victorlrf,
Welcome to the forum.
In my opinion you'd better off posting that in the help forum, in which you can have more help since in your code you are not using the extension as far as I can tell.

And another gold rule is to embed your code using the HTML or PHP tags, so that it is more readable and you have more chances to get help and fix your problems.

**victorlrf** · 15 Jan 2009 10:58 AM

[quote=mabello;274216]Dear victorlrf,
Welcome to the forum.
In my opinion you'd better off posting that in the help forum, in which you can have more help since in your code you are not using the extension as far as I can tell.

And another gold rule is to embed your code using the HTML or PHP tags, so that it is more readable and you have more chances to get help and fix your problems.
[html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>OS</title>
<link rel="stylesheet" type="text/css" href="/sig/FrameWorks/ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="/sig/FrameWorks/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/sig/FrameWorks/ext/ext-all.js"></script>

<style type="text/css">
html, body {font: normal 11px verdana;}
#main-panel td {padding:5px;}
.add-feed {background-image: url(feed-viewer/images/rss_add.gif) !important;}
.remove-feed {background-image: url(feed-viewer/images/rss_delete.gif) !important;}
.x-tree-node div.feeds-node{
background:#eee url(images/cmp-bg.gif) repeat-x;
margin-top:1px;border-top:1px solid #ddd;
border-bottom:1px solid #ccc;
padding-top:2px;padding-bottom:1px;}
.feeds-node .x-tree-node-icon {display:none;}
.feed {border:1px solid #fff;margin:3px;}
.feed .x-tree-ec-icon {display:none;}
.feed-icon {background-image:url(/sig/FrameWorks/ext/examples/layout-browser/images/page_attach.png) !important;}

#header { background: #7F99BE url(/sig/FrameWorks/ext/examples/layout-browser/images/layout-browser-hd-bg.gif) repeat-x center;}
#header h1 {font-size: 16px;color: #fff; font-weight: normal;padding: 5px 10px;}
</style>
<script type="text/javascript">

Ext.onReady(function() {

var titulo ={
xtype: 'box'
,title: 'Extend Ordem de Servi

**badgerd** · 22 Mar 2009 2:32 PM

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.

**mabello** · 23 Mar 2009 8:43 AM

So something like this:

PHP Code:


this.beforeFilterFn = function(text, treePanel, treeFilter){
        treePanel.body.mask("Loading data...");//<------
        return startTreeFilter.beforeFilterFn(text, treePanel, treeFilter);
    }
    //@Public function called for each node on the tree starting from the root.
    this.filterFn = function(node, nodeAttribute, text, treePanel, treeFilter){
        //Do not filter the lives if the node is to keep
        return (startTreeFilter.filterFn(node, nodeAttribute, text, treePanel, treeFilter) || node.attributes['leaf'] == true);    
    }
    //@Public function called after filter after the execution of the filterFn.
    this.afterFilterFn = function(text, treePanel, treeFilter){
        treePanel.body.unmask();//<------
        return startTreeFilter.beforeFilterFn(text, treePanel, treeFilter);
    }

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...

**asalee200** · 10 Dec 2010 2:00 PM

Hi mabello,

I need to make a panel, just like the Extjs API with a TreePanel and filter field.

Therefore, I am trying to use TreePanelFilter plugin, you have attached on this thread. I am using the AllinOne script but I am getting this error.
tbar.insertAt is not a function

I have gone the thru the script, it does contain the insertAt function.

I would really appreciate your help, it kind of urgent for me.

**asalee200** · 10 Dec 2010 2:43 PM

Hi,

I have fixed the tbar.insertAt is not a function error. But now, I have new error.

this.topToolbar.render is not a function.

I can't even find this function in the scripts.

Please help.

**ucoxk** · 3 Jul 2012 2:47 AM

i also have this error tbat.insertAt is not a function. how can i fix it?

TreePanelFilter Plugin

Thread Tools

Search Thread

Display

help

help

thanks

thanks

tbat.insertAt error

tbat.insertAt error