Question

I have the following code. I’m trying to create the store via json. I can see that firebug calls the json but this data is not loading the form. This is working with a local instance of the of model. So i confident that the panel that contains “formJobSummary” is working. The issue is somewhere on the store.

Ext.define('user', {
    extend: 'Ext.data.Model'
    fields: ['quotedPrice']
});

var store = Ext.create('Ext.data.Store', {
    model: 'user',
    proxy: {
        type: 'ajax',
        url: '/data/users.js',
        reader: {
            type: 'json',
            root: 'user'
        }
    },
    autoLoad: true
});


Ext.define('MyApp.view.MyPanel', {
    extend: 'MyApp.view.ui.MyPanel',
    initComponent: function () {
        var me = this;
        me.callParent(arguments);
        var form = Ext.getCmp('formJobSummary'); 
        form.loadRecord(store);
    }
});

Json ‘/data/users.js’

{
    "success":"true",
    "user": [{
        "quotedPrice":"12345"
    }]
}

for completeness, here is view.ui

Ext.define('MyApp.view.ui.MyPanel', {
    extend: 'Ext.panel.Panel',

    height: 600,
    width: 950,
    layout: {
        align: 'stretch',
        type: 'vbox'
    },
    title: 'JobPanel',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'tabpanel',
                    activeTab: 0,
                    flex: 1,
                    items: [
                        {
                            xtype: 'panel',
                            layout: {
                                align: 'stretch',
                                type: 'hbox'
                            },
                            title: 'Job Summary',
                            items: [
                                {
                                    xtype: 'form',
                                    id: 'formJobSummary',
                                    layout: {
                                        align: 'stretch',
                                        type: 'hbox'
                                    },
                                    bodyPadding: 10,
                                    title: '',
                                    url: '/submit.html',
                                    flex: 1,
                                    dockedItems: [
                                        {
                                            xtype: 'toolbar',
                                            flex: 1,
                                            dock: 'bottom',
                                            items: [
                                                {
                                                    xtype: 'button',
                                                    text: 'Submit'
                                                },
                                                {
                                                    xtype: 'button',
                                                    text: 'Cancel'
                                                }
                                            ]
                                        }
                                    ],
                                    items: [
                                        {
                                            xtype: 'panel',
                                            flex: 1,
                                            items: [
                                                {
                                                    xtype: 'radiogroup',
                                                    width: 400,
                                                    fieldLabel: 'Job Type',
                                                    items: [
                                                        {
                                                            xtype: 'radiofield',
                                                            boxLabel: 'Fix Price'
                                                        },
                                                        {
                                                            xtype: 'radiofield',
                                                            boxLabel: 'Production'
                                                        }
                                                    ]
                                                },
                                                {
                                                    xtype: 'textfield',
                                                    id: 'quotedPrice',
                                                    name: 'quotedPrice',
                                                    fieldLabel: 'Quoted Price'
                                                },
                                                {
                                                    xtype: 'textfield',
                                                    id: 'clientPO',
                                                    name: 'clientPO',
                                                    fieldLabel: 'Client PO'
                                                },
                                                {
                                                    xtype: 'textfield',
                                                    id: 'jobQuantity',
                                                    name: 'jobQuantity',
                                                    fieldLabel: 'Job Quatity'
                                                },
                                                {
                                                    xtype: 'textfield',
                                                    id: 'filesOver',
                                                    name: 'filesOver',
                                                    fieldLabel: 'Files Over'
                                                },
                                                {
                                                    xtype: 'textfield',
                                                    id: 'previousJobId',
                                                    name: 'previousJobId',
                                                    fieldLabel: 'Previous JobId'
                                                },
                                                {
                                                    xtype: 'textfield',
                                                    id: 'estimate',
                                                    name: 'estimate',
                                                    fieldLabel: 'Estimate'
                                                }
                                            ]
                                        },
                                        {
                                            xtype: 'panel',
                                            flex: 1
                                        },
                                        {
                                            xtype: 'panel',
                                            layout: {
                                                align: 'stretch',
                                                type: 'hbox'
                                            },
                                            flex: 1
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            xtype: 'panel',
                            title: 'Parts'
                        },
                        {
                            xtype: 'panel',
                            title: 'Process'
                        },
                        {
                            xtype: 'panel',
                            title: 'Invoice'
                        }
                    ]
                },
                {
                    xtype: 'panel',
                    layout: {
                        align: 'stretch',
                        type: 'vbox'
                    },
                    title: 'FooterPanel',
                    flex: 1
                }
            ]
        });

        me.callParent(arguments);
    }
});

Answer 1

The problem is in setting record to form. First of all, loadRecord accepts record, not store. Next problem is that, the store is not loaded when you call loadRecord. Below is modified store definition which solves problem. Basically you should bind to load event of the store, to be sure that records have been loaded.

var store = Ext.create('Ext.data.Store', {
    model: 'user',
    proxy: {
        type: 'ajax',
        url: 'data2.json',
        reader: {
            type: 'json',
            root: 'user'
        }
    },
    autoLoad: true,
    listeners: {
        load: function() {
            var form = Ext.getCmp('formJobSummary'); 
            form.loadRecord(store.data.first());
        }
    }
});