1. #1
    Sencha User kashim's Avatar
    Join Date
    Nov 2011
    Posts
    33
    Answers
    2
    Vote Rating
    0
    kashim is on a distinguished road

      0  

    Default Answered: newbie Ext.onReady question

    Answered: newbie Ext.onReady question


    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":"lisa@simpsons.com", "phone":"555-111-1224" },
    { 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" },
    { 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" },
    { 'name': 'Marge', "email":"marge@simpsons.com", "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());
    });

  2. 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.

  3. #2
    Sencha - Community Support Team friend's Avatar
    Join Date
    Apr 2011
    Posts
    895
    Answers
    106
    Vote Rating
    27
    friend has a spectacular aura about friend has a spectacular aura about

      0  

    Default


    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.

  4. #3
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Answers
    102
    Vote Rating
    78
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    you should use ext-all-debug.js, and enable loader for your own code via:

    Code:
    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

  5. #4
    Sencha User kashim's Avatar
    Join Date
    Nov 2011
    Posts
    33
    Answers
    2
    Vote Rating
    0
    kashim is on a distinguished road

      0  

    Default


    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).

Thread Participants: 2