PDA

View Full Version : newbie Ext.onReady question



kashim
16 Nov 2011, 7:20 AM
I created a simple test taken from the documentation (which shows how to create a store and grid) and wrapped it in a onReady function.
One thing I noticed is, its taking a minimum 5 seconds before the onReady function is triggered.....and therefore slowing down the appearance of my grid.
Is there any other way I can improve the speed of grid rendering?
thanks

//code in my js file
console.log("top " + (new Date).toLocaleTimeString());
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
]);

Ext.onReady(function(){
console.log("start " + (new Date).toLocaleTimeString());
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"[email protected]", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"[email protected]", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"[email protected]", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"[email protected]", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
console.log("middle " + (new Date).toLocaleTimeString());
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
console.log("end " + (new Date).toLocaleTimeString());
});

friend
16 Nov 2011, 7:28 AM
You're most likely experiencing the delay associated with dynamic class loading (assuming you're using ext-debug.js). You can confirm this by using Firefox/Firebug and examining the output of the 'Net' tab, which will show you every network call made during the load of your test page.

A production app should use Sencha's build tool, which will produce a compact, single class library which contains only the pieces of the API required by your app.

16 Nov 2011, 7:17 PM
you should use ext-all-debug.js, and enable loader for your own code via:




Ext.Loader.setConfig({
enabled : true,
paths : {
MyApp : 'path/to/MyApp'
}
});


You can look at this training video for more information on loader: http://vimeo.com/25124588

kashim
17 Nov 2011, 1:39 AM
Thanks freind.
I compiled it and ran it in production mode and it there was no slowness.

Jay
Your answer was also spot on. I'm now using references ext-all-debug.js and Ext.Loader.setConfig() and there's no more slowness in testing.

kashim

btw. Both answers are correct (shame I can't mark both as best answer).