PDA

View Full Version : Problem with Ext.tree.TreeFilter, and "firing event" question



seek
30 Sep 2009, 7:50 AM
Hi people,
I have two problems in the same context...

The tree container


....
var menuPanel = new Ext.Panel({ region: 'west',
id: 'west-panel',
title: 'Mený',
split: true,
width: 200,
minSize: 175,
maxSize: 400,
layout: 'fit',
contentEl: 'region_position_02',
collapsible: true,
autoScroll:true,
collapseMode:'mini'
});
....

The tree code


....
var treeR19254010415416176 = [
{id:"L6270307828090821","isFolder":true,"text":"Sistema","href":"","leaf":false,"children":
[{"id":"L6270517871093683","isFolder":true,"text":"Configurazione","href":"","leaf":false,"children":
[{"id":"L6270702764098775","isVoice":true,"text":"Impostazioni journal, tracing e visualizzazioni campi","href":"javascript:openAppInFrame('f?p=UTE_LOG:1:3633428031667636');","leaf":true},{"id":"L6270912461101587","isVoice":true,"text":"Utenti e ruoli","href":"javascript:openAppInFrame('f?p=GESTIONE_UTENTI_SIL:1:3633428031667636');","leaf":true},{"id":"L6271121811104347","isVoice":true,"text":"Gestione Help","href":"javascript:openAppInFrame('f?p=HELP:1:3633428031667636');","leaf":true},{"id":"L6119106689413053","isVoice":true,"text":"Parametri generali","href":"javascript:openAppInFrame('f?p=CONFPARAMSIL:HOME:3633428031667636');","leaf":true},{"id":"L6947807022140379","isVoice":true,"text":"Parametri utente","href":"javascript:openAppInFrame('f?p=CONFPARAMSIL:HOMEUSER:3633428031667636');","leaf":true},{"id":"L14223726171779245","isVoice":true,"text":"Modifica password","href":"javascript:openAppInFrame('f?p=CONFPARAMSIL:CAMBIA_PASSWORD:3633428031667636');","leaf":true}]},{"id":"L7288218613626846","isFolder":true,"text":"Tabelle di base ","href":"","leaf":false,"children":
[{"id":"L11018705388025443","isVoice":true,"text":"Amministrazione","href":"javascript:openAppInFrame('f?p=TABBASEAMMIN:9:3633428031667636');","leaf":true},{"id":"L11018915084028253","isVoice":true,"text":"Generali","href":"javascript:openAppInFrame('f?p=TABBASEAMMIN:1:3633428031667636');","leaf":true}]},{"id":"L21227422294235633","isVoice":true,"text":"Bug","href":"javascript:openAppInFrame('f?p=107:1:3633428031667636');","leaf":true}]},{id:"L7126323293455682","isFolder":true,"text":"Amministrazione","href":"","leaf":false,"children":
[{"id":"L7382518949251317","isVoice":true,"text":"Tabelle P.D.C.","href":"javascript:openAppInFrame('f?p=ANAGAMMIN:1:3633428031667636');","leaf":true},{"id":"L7383700426283804","isVoice":true,"text":"Tabelle esercizio","href":"javascript:openAppInFrame('f?p=ANAGAMMIN:10:3633428031667636');","leaf":true},{"id":"L23407014784541810","isVoice":true,"text":"Tabelle finanziarie","href":"javascript:openAppInFrame('f?p=ANAGAMMIN:60:3633428031667636');","leaf":true},{"id":"L23407224135544576","isVoice":true,"text":"Tabelle varie","href":"javascript:openAppInFrame('f?p=ANAGAMMIN:40:3633428031667636');","leaf":true},{"id":"L9622722824735545","isFolder":true,"text":"Movimenti mensili","href":"","leaf":false,"children":
[{"id":"L17021208039987544","isVoice":true,"text":"Prima nota","href":"javascript:openAppInFrame('f?p=ANAGAMMIN:100:3633428031667636');","leaf":true},{"id":"L17021405745996350","isFolder":true,"text":"Stampe","href":"","leaf":false,"children":
[{"id":"L17021609209997399","isVoice":true,"text":"Bilancio","href":"javascript:openAppInFrame('f?p=ANAGAMMIN:STAMPA_BILANCIO:3633428031667636');","leaf":true},{"id":"L17021813710998656","isVoice":true,"text":"Scheda contabile","href":"javascript:openAppInFrame('f?p=ANAGAMMIN:SCHEDA_CONT:3633428031667636');","leaf":true},{"id":"L17022017520999755","isVoice":true,"text":"Registri IVA","href":"javascript:openAppInFrame('f?p=ANAGAMMIN:STAMPA_REG_IVA:3633428031667636');","leaf":true},{"id":"L17022221329000888","isVoice":true,"text":"Giornale","href":"javascript:openAppInFrame('f?p=ANAGAMMIN:STP_GIORNALE:3633428031667636::::P202_FLAG:1');","leaf":true}]}]},{"id":"L17023031503013318","isFolder":true,"text":"Distinte","href":"","leaf":false,"children":
[{"id":"L3579830617868025","isVoice":true,"text":"Pagamenti","href":"javascript:openAppInFrame('f?p=ANAGAMMIN:140:3633428031667636');","leaf":true},{"id":"L7991731182815601","isVoice":true,"text":"Anticipi","href":"javascript:openAppInFrame('f?p=ANAGAMMIN:150:3633428031667636');","leaf":true},{"id":"L15538823307607747","isVoice":true,"text":"Ri.Ba.","href":"javascript:openAppInFrame('f?p=ANAGAMMIN:160:3633428031667636');","leaf":true}]}]},{id:"L7126519961464228","isFolder":true,"text":"Commerciale","href":"","leaf":false,"children":
[{"id":"L12309100420120262","isVoice":true,"text":"Tabelle","href":"javascript:openAppInFrame('f?p=COMM:1:3633428031667636');","leaf":true},{"id":"L11415327741301932","isVoice":true,"text":"Anagrafiche","href":"javascript:openAppInFrame('f?p=COMM:11:3633428031667636');","leaf":true}]},{id:"L7126725848465886","isVoice":true,"text":"Produzione","href":"","leaf":true},{id:"L7127218061501517","isVoice":true,"text":"Acquisti","href":"","leaf":true},{id:"L7126930696467314","isFolder":true,"text":"Magazzino","href":"","leaf":false,"children":
[{"id":"L17741231367528093","isVoice":true,"text":"Gestione magazzino","href":"javascript:openAppInFrame('f?p=MAGAZ:HOME:3633428031667636');","leaf":true},{"id":"L17978421385853874","isVoice":true,"text":"Causali","href":"javascript:openAppInFrame('f?p=MAGAZ:CAUSALI:3633428031667636');","leaf":true},{"id":"L18074031090350071","isVoice":true,"text":"Movimenti","href":"javascript:openAppInFrame('f?p=MAGAZ:MOV:3633428031667636');","leaf":true}]} ];

Ext.onReady(function(){
treepln = new Ext.tree.TreePanel({
loader: new Ext.tree.TreeLoader(),
animCollapse:true,
animate: true,
useArrows: true,
rootVisible: false,
border: false,
layout: 'fit',
id: 'treepnl',
autoScroll: true,
preloadChildren: true,
collapseFirst:false,
clearOnLoad: false,
root: new Ext.tree.AsyncTreeNode({
leaf: false,
draggable:false,
singleClickExpand: true,
expanded: true,
id: 'root-node',
text: '',
children: treeR19254010415416176
}),
tbar: {
hideBorders: true,
id: 'treeBtn',
cls:'top-toolbar',
autoShow: true,
autoWidth: true,
items: [getTreeTlbBtn()]
}
});
Ext.getCmp('west-panel').add(treepln).doLayout();
})
....
function filterTree(e){
var Tree = Ext.getCmp('treepnl');
var text = e.target.value;
var filtro = new Ext.tree.TreeFilter(Tree, {
clearBlank: true,
autoClear: true
});

Tree.root.cascade(function(n){
n.ui.show();
});
if (!text) {
filtro.clear();
Tree.collapseAll();
Tree.root.cascade(function(n){
n.ui.show();
});
return;
};

var re = new RegExp(Ext.escapeRe(text), 'i');
Tree.expandAll();
filtro.filterBy(function(n){
return n.attributes.isFolder || re.test(n.text);
});

};

function getTreeTlbBtn(){
var fldRicerca = new Ext.form.TextField({
width: 100,
emptyText: 'Search',
id: 'txt-search',
listeners: {
render: function(f){
f.el.on('keydown', filterTree, f, {buffer: 350});
}
}
});
var toolBar = [fldRicerca, {
iconCls: 'icon-expand-all',
tooltip: 'Expand all',
handler: function(){
Ext.getCmp('treepnl').root.expand(true, false);
}
}, {
iconCls: 'icon-collapse-all',
tooltip: 'Collapse',
handler: function(){
Ext.getCmp('treepnl').root.collapse(true, false);
}
}, {
iconCls: 'icon-cancel',
tooltip: 'Cancel filter',
handler: function(){
var elem = Ext.getCmp('txt-search');
elem.setValue('');
elem.keydown; //how can work someting like this?
}
}];
return toolBar;
};
....
If I put a filter, as soon as the page is loaded, that produce a strange effect: it shows some node that had nothing to that to see with filter inserted.
http://img25.imageshack.us/img25/641/firstzu.jpg (http://img25.imageshack.us/i/firstzu.jpg/)
But from next "key down" event, that's work correctly.
http://img97.imageshack.us/img97/2277/secondh.jpg


The next question is: how can I cancel all filter pressing the button with "iconCls: 'icon-cancel'"?


Thanks again

seek
4 Oct 2009, 11:00 PM
Someone can help me?