PDA

View Full Version : How to set a treeFilter on a treePanel



flamant
9 Aug 2010, 4:35 AM
Hi,
I am a newbie in EXTJS, I try to build a treefilter on a treepanel
Here is my code


function filterTree(tree, txt, evt){
var text = txt.getValue();
Ext.each(this.hiddenPkgs, function(n){
n.ui.show();
});
if(!text){
tree.filter.clear();
return;
}
tree.expandAll();

var re = new RegExp('^' + Ext.escapeRe(text), 'i');
tree.filter.filterBy(function(n){
return !n.attributes.isClass || re.test(n.text);
});

// hide empty packages that weren't filtered
tree.hiddenPkgs = [];
var me = tree;
tree.root.cascade(function(n){
if(!n.attributes.isClass && n.ui.ctNode.offsetHeight < 3){
n.ui.hide();
me.hiddenPkgs.push(n);
}
}, tree);
}


and



items: [new Tree.TreePanel({
id: 'subjectTreeView',
name: 'subjectTreeView',
useArrows: true,
autoScroll: true,
containerScroll: true,
animate: true,
enableDD: true,
ddScroll: true,
border: false,
filter: new Ext.tree.TreeFilter(this, {
clearBlank: true,
autoClear: true
}),
loader: new Ext.tree.TreeLoader({
dataUrl: './getSubjectsTreeNodes.htm'
}),
root: {
nodeType: 'async',
text: '<spring:message code="application.tree.Subjects"/>',
draggable: false,
id: 'subjectRoot',
expand: true,
subEntityName: 'subject',
iconCls: 'subjectNode',
create: true,
allowedActions: {
"create": true
}
},
tbar:[ ' ',
new Ext.form.TextField({
id: 'findASubject',
name: 'findASubject',
width: 140,
emptyText:'<spring:message code="dataEntryMgmt.subjectEmptyText"/>',
enableKeyEvents: true,
listeners: {

keydown: function(txt, evt){
filterTree(Ext.getCmp("subjectTreeView"), txt, evt);
}
}
})]

})],


When I ran my application, I have a javascript error which is :



this.tree is undefined
[Break On This Error] startNode = startNode || this.tree.root; ( in the method filterBy )


There is something I have missing. Is the variable filter well defined ? Or anything else ? I am lost ! Thank you for your help.

Condor
9 Aug 2010, 4:39 AM
You have a scope problem. When you create the TreeFilter, 'this' won't be the treepanel.

Move you filter creation to the initComponent method, e.g.

initComponent: function(){
this.constructor.prototype.initComponent.call(this);
this.filter = new Ext.tree.TreeFilter(this, {...});
}

flamant
9 Aug 2010, 5:47 AM
I tried this :


MyCustomTreePanel = Ext.extend(Ext.tree.TreePanel,{
initComponent: function(){
this.constructor.prototype.initComponent.call(this);
this.filter = new Ext.tree.TreeFilter(this, {
clearBlank: true,
autoClear: true
});
/*MyCustomTreePanel.superclass.initComponent.apply(this, arguments);*/
}

});

Ext.reg('myTreePanel', MyCustomTreePanel);





and




{
xtype: 'myTreePanel',
id: 'subjectTreeView',
name: 'subjectTreeView',
useArrows: true,
autoScroll: true,
containerScroll: true,
animate: true,
enableDD: true,
ddScroll: true,
border: false,
loader: new Ext.tree.TreeLoader({
dataUrl: './getSubjectsTreeNodes.htm'
}),
root: {
nodeType: 'async',
text: '<spring:message code="application.tree.Subjects"/>',
draggable: false,
id: 'subjectRoot',
expand: true,
subEntityName: 'subject',
iconCls: 'subjectNode',
create: true,
allowedActions: {
"create": true
}
},

tbar:[ ' ',
new Ext.form.TextField({
id: 'findASubject',
name: 'findASubject',
width: 140,
emptyText:'<spring:message code="dataEntryMgmt.subjectEmptyText"/>',
enableKeyEvents: true,
listeners: {

keydown: function(txt, evt){
filterTree(Ext.getCmp("subjectTreeView"), txt, evt);
}
}
}), ' ', ' ',
{
iconCls: 'icon-expand-all',
tooltip: 'Expand All',
handler: function() {
this.root.expand(true);
},
scope: this
}, '-', {
iconCls: 'icon-collapse-all',
tooltip: 'Collapse All',
handler: function() {
this.root.collapse(true);
},
scope: this
}]

}


but it doesn't work

Condor
9 Aug 2010, 6:13 AM
That code was meant to be put into the tree config object, e.g.

{
xtype: 'treepanel',
initComponent: function(){
this.constructor.prototype.initComponent.call(this);
this.filter = new Ext.tree.TreeFilter(this, {
clearBlank: true,
autoClear: true
});
},
id: 'subjectTreeView',
name: 'subjectTreeView',
useArrows: true,
autoScroll: true,
...
}
If you want to create a custom treepanel component then you should indeed call the superclass initComponent instead of the current initComponent (using the code you comented out).

flamant
20 Aug 2010, 7:11 AM
Thank you for your answer, Now it is working

aleksa
2 Sep 2010, 1:44 PM
@flamant, can you, please put up a demo code, so users can see it in action?

flamant
12 Sep 2010, 1:35 AM
Hi aleksa
my code is very particular and fit only the scope of the application I work on
Anyway, here is the code

The textField where I enter the text that filter :


new Ext.form.TextField({
id: 'subjectFilter',
name: 'subjectFilter',
width: 140,
enableKeyEvents: true,
listeners:{
keydown: {
fn: function(t, e){
filterTree(t);
},
buffer: 350
}
}
})
The filter function :


function filterTree(t){
var tree = Ext.getCmp('subjectTreeView');
var text = t.getValue();
var re = new RegExp('^' + Ext.escapeRe(text), 'i');

Ext.each(tree.root.childNodes, function(n1){
Ext.each(this.childNodes, function(n2){
if (n2.id.substr(0,8) == "Subjects") {
Ext.each(this.childNodes, function(n3){
if(!text)
n3.ui.show();
else
if(re.test(n3.text))
n3.ui.show();
else
n3.ui.hide();
});
}
});
});
}