Accessing data from a Store in ExtJS?

Question

So I have the following code:

The Model:

Ext.define('Sandbox.model.User', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'Name', type: 'string' },
        { name: 'Email', type: 'string' },
        { name: 'TelNumber', type: 'string' },
        { name: 'Role', type: 'string' }
    ]
});

The Store

Ext.define("Sandbox.store.Users", {
    extend : 'Ext.data.Store',
    model : 'Sandbox.model.User'
});

And I have the following Application.js which loads the data onto to the Store:

Ext.define('Sandbox.Application', {
    extend: 'Ext.app.Application',

    name: 'Sandbox',

    stores: [
        'Users'
    ],

    launch: function () {

        var userStore = Ext.getStore('Users');
        userStore.add(
            [
                {
                    Name : 'John',
                    Email: 'john@gmail.com',
                    TelNumber : ' 0330 122 2800',
                    Role : 'Administrator'
                },
                {
                    Name : 'Sarah',
                    Email : 'sarah@hotmail.com',
                    TelNumber: ' 0330 122 2800',
                    Role : 'Customer'
                },
                {
                    Name : 'Brian',
                    Email : 'brian@aol.com',
                    TelNumber: ' 0330 122 2800',
                    Role : 'Supplier'
                },
                {
                    Name : 'Karen',
                    Email : 'karen@gmail.com',
                    TelNumber: ' 0330 122 2800',
                    Role : 'Administrator'
                }
           ]
         );

         var userStore = Ext.getStore('Users');
         console.log("Store size " + userStore.getCount());

         console.log("Person #1: " + userStore.getAt(0).Name);
    }
});

When the application is started, the correct store size(4) is logged. But the second log for a specific data at index 0 returns the value undefined. I understand that ExtJS is asynchronus but the data is hard coded; why would there be a delay in loading the data into the store ? How can I fix this code so that when I first navigate to the application on the browser, the above two logs display the correct information ?

Answer 1

You cannot directly access to the property. You should use:

userStore.getAt(0).get("Name")

EDIT: There is nothing else wrong in your code, the problem is just the syntax. "ExtJS is asynchronus" is a big misunderstanding as it is just a js library, it can't be async. The way you code it can be, and you dont in your example. You manually add data to your store.