PDA

View Full Version : update layout on ajax request



leksodav
3 Jun 2013, 1:50 AM
Hi All
I have a Panel and some fields on it.
To fill the fields with data I am making ajax request to the json webservice on beforeRender event of Panel and then assigning values on fields. it takes 2 seconds, which I think is very slow.
Does anybody have a good idea how to make it faster? maybe I should use different event or somehow prefetch data before panel render?

Malro
3 Jun 2013, 2:36 AM
ajax request needs what time?

leksodav
3 Jun 2013, 2:53 AM
I log time in beforeRender event on the beginning of ajax request and in the end and it is too long around 2 seconds.
and this is on development environment where site and database is in same network, in production it will be worse

evant
3 Jun 2013, 2:59 AM
Are you saying the ajax request takes 2s, or the time to render?

What happens inside your ajax callback? What state is the component in by the time the callback fires?

leksodav
3 Jun 2013, 3:04 AM
service is fast, just render in extjs takes so long, any ideas how to make it fast?
because panels renders firstly than it waits to ajax request and renders different values in fileds after around 2 seconds.

evant
3 Jun 2013, 3:10 AM
No point talking about performance without posting code.

Post a runnable test case that simulates what you're doing.

leksodav
3 Jun 2013, 3:50 AM
onPanelBeforeRender: function(component, eOpts) {
var url = 'service URL';




var d = new Date();
var n = d.getTime();
console.log( n);

Ext.Ajax.request({
url: url,


success: function(response){
/*
here assigning values to labels and display fields
something like this
cardReaderTotoalImage.setSrc('resources/atm_ststus_images/red.png');
cardReaderTotalColor[0].setText('not active');
myImageComp.setPartColor('cardreader', 'red');
*/
var d = new Date();
var n = d.getTime();
console.log( n);
}
}

}

leksodav
3 Jun 2013, 3:53 AM
onPanelBeforeRender: function(component, eOpts) {
var url = 'service URL';




var d = new Date();
var n = d.getTime();
console.log( n);

Ext.Ajax.request({
url: url,


success: function(response){
/*
here assigning values to labels and display fields
something like this
cardReaderTotoalImage.setSrc('resources/atm_ststus_images/red.png');
cardReaderTotalColor[0].setText('not active');
myImageComp.setPartColor('cardreader', 'red');
*/
var d = new Date();
var n = d.getTime();
console.log( n);
}
}

}

and the difference between logged times is almost 2000, 2 secs

evant
3 Jun 2013, 4:54 AM
Those metrics are off. There's no point including how long it takes to run the request, since Ext has no control over that.

leksodav
3 Jun 2013, 6:03 AM
I don"t know why do you think that it is off but that ajax request there takes 2 seconds and it happens after everything is rendered on page, so all code inside ajax success handler happens with 2 secs delay

evant
3 Jun 2013, 6:43 AM
Ok, your metrics are correct, but not useful.

There's little point measuring both things together:



var start1 = new Date();
Ext.Ajax.request({
success: function(){
var start2 = new Date();
console.log('Ajax time', start2 - start1);
// do rendering
console.log(new Date() - start);
}
});


If a majority of the time is spent doing the Ajax request, the problem is on your server side, so it's well outside the scope of this forum.