Hello ExtJS experts,

My application contains a TreePanel with AsyncTreeNode. Each node represents a directory on my web server that contains jpg files.
The TreeLoader points to a ashx handler that returns the directory structure in the proper format.

Initially, the tree nodes load pretty fast (in about 2 seconds) since the handler returns every directory name that contains at least
one jpg file.

When I try to set a filter (date range of "photo date taken"), the handler spends very long time trying to read (almost) every file's meta data. This time can grow dramatically depends on the number of directories, photos, and how they are distributed.
I am wondering if there is a way where I can reduce the time spent by the handler by splitting the loader task to one request per folder at a time, and asynchronously add the nodes returned by the handler as they arrive to the tree.

Here is a code snippet:
  • TreePanel
Code:
 
var myTreePanel = new Ext.tree.TreePanel({
animate:true,
enableDD:false,
containerScroll: true,
rootVisible:false,
region:'west',
width:200,
split:true,
title:mediaType,
autoScroll:true,
iconCls:mediaType,
margins: '5 0 5 5',
root: new Ext.tree.AsyncTreeNode({
text:mediaType,
expanded : true
}),
loader: new Ext.tree.TreeLoader({
timeout:240000,
url:'getFolders.ashx?mediaType=' + mediaType
}),
listeners:{
click:function(node){

var mytpl;
var f;
while(f = panelThumbnails.items.first()){
panelThumbnails.remove(f);
}
store.proxy.conn.url = 'getFiles.ashx?mediaType=' + mediaType + '&dir=' + node.attributes.path;
store.reload();
mytpl = CreateDataView(tpl);
panelThumbnails.add(mytpl);
panelThumbnails.expand();
panelThumbnails.doLayout();
}
} 
});
  • Filter Form Action
Code:
 
buttons:[{ 
id:'apply',
text:'Apply',
formBind: true,
disabled:true, 
handler:function(){ 
daterangeform.getForm().submit({ 
method:'POST', 
url:'setSession.aspx',
success:function(form, action){ 
win.hide();
treePictures.body.mask("Loading...");
treePictures.root.reload(function() {
treePictures.expand();
treePictures.body.unmask();
});
},
failure:function(form, action){
win.hide();
obj = Ext.util.JSON.decode(action.response.responseText); 
Ext.Msg.alert("Failure", obj.errors.reason);
} 
});
} 
}]


Thanks in advance for your help!
AbulAwad