PDA

View Full Version : Ext Panel loading large component has low efficient and synchronize its loadMask



goodlook
9 Feb 2010, 3:11 AM
I have a TabPanel which content is lazy load. when a tab is actived,it loads content from server


listeners:{
activate:function(p){
Ext.Ajax.request({
//some other param
callback:function(options,success,response){
if(s){
var newComp=eval(response.responseText);
p.remove(p.ctlComp);
p.add(comp);
p.doLayout();
p.ctlComp=newComp
}
});
}
}


this is the code get from the ajax request:

new Ext.form.FormPanel({
//some code...
});
The code above works well, but when the form panel is complex enough,like many different layout,many cascades,many components embeded in the formPanel.In my code there is more than 100 components in the form panel.Then the browser seems to frozon,like the computer breaking down.I guess because the render process wastes a long time, any action on the screen will be no use.I don't know how to descript it, sorry for my english.
I try to fix this by creating a loadmask in global:

listeners:{
activate:function(p){
// show the global loadmask that has been created
var mask=window.top.app.mask;
mask.show();
Ext.Ajax.request({
//some other param
callback:function(options,success,response){
if(s){
var newComp=eval(response.responseText);
p.remove(p.ctlComp);
p.add(comp);
p.doLayout();
p.ctlComp=newComp;
mask.hide();
}
});
}
}
Unluckily, this method fails.Even the mask has hidden,the form panel render seem to have not been finished and the browser screen is still locked for a short while;
so I try this:

new Ext.form.FormPanel({
//some code...
listeners:{
render:function(){
window.top.app.mask.hide();
}
}
});
Dispointing, the result is the same as before...

Is any idea to fix this?

I really think when the form panel too heavy to load, and it is exhausting when layout the form field(the form field must be wrapped in the container which layout is 'form', and this make that the response from the server is numerous)