Cannot populate fields from Ext.data.store

Question

Here is my model:

Ext.define('Email', {
    extend: 'Ext.data.Model',
    idProperty: 'emailid',
    fields: [
        { name: 'emailid', type: 'int' },
        { name: 'emailsubject', type: 'string', useNull: true },
        { name: 'emailbody', type: 'string', useNull: true },
        { name: 'emailto', type: 'string', useNull: true },
        { name: 'emailfrom', type: 'string', useNull: true },
    ]
});

and DataStore:

var EmailDataStore = {

    getDetailStore: function(aid) {    

        var options =  {
            autoLoad: true,
            autoSync: true,
            pageSize: 1,
            remoteFilter: true,
            remoteGroup: true,
            remoteSort: true,
            model: 'Email',
            proxy: {
                type: 'ajax',
                url: 'datastores/datastore-email.asp?action=details&auditid=' + aid,
                reader: {
                    type: 'json',
                    root: 'emailDetails'
                }
            }
        };

        if (typeof (options2) != 'undefined') {
            options = Ext.merge(options, options2);
        }

        var detailStore = Ext.create('Ext.data.Store', options);
        return detailStore;
    }
}

I won't include the ASP because the JSON is returning the data appropriately. But in this next bit of code,

...
PortalEmailGrid.prototype.detailStore = null;
PortalEmailGrid.prototype.showEmailDetails = function (id) {
    var self = this;
    //alert(id);
    self.detailStore = EmailDataStore.getDetailStore(id);
    //view store at this state - object appears to exist with the returned record in it
    console.log(self.detailStore);

    var firstItem = self.detailStore.first();
    //undefined here
    console.log(firstItem);
    //count is zero, but i can see the object in the console log above
    alert('detailStore count: ' + self.detailStore.count());

    var win = Ext.create('Ext.window.Window', {
        title: 'Email Details',
        store: self.detailStore,
        height: 400,
        width: 800,
        bodyPadding: 4,
        items: [
            {
                xtype: 'textfield',
                name: 'tofield',
                dataIndex: 'emailto',
                fieldLabel: 'To'
            },
                                {
                xtype: 'textfield',
                name: 'subjectfield',
                dataIndex: 'emailsubject',
                fieldLabel: 'Subject'
            }

        ]
    });

    win.show();
}

I cannot get the fields to populate with the detailStore 's data. But when I log self.detailStore , in Firebug, I can see the object and its details. self.detailStore.count() shows zero, but according to the console, the data should be there. I suspect because of this discrepancy, the fields are not being populated with the dataIndex information. Also the previous code block was called by:

var selected = self.grid.selModel.selected;
var id = selected.items[0].raw.emailid;
//var status = selected.items[0].raw.status;
PortalEmailGrid.prototype.showEmailDetails(id);

Can you see any reason why the data isn't loading from the datastore?

Answer 1

Store loading is asynchronous, by the time you're logging the count to the console, the store is yet to be loaded. Firebug always shows the "up to date" status of the object, which is why you can see the data. You need to listen to the load event on the store.

So if you remove the autoLoad config, you can do something like this:

self.detailStore = EmailDataStore.getDetailStore(id);
self.detailStore.load({
    callback: function(){
        console.log('loaded, do something');
    }
});