ExtJS populate Ext.FormPanel with data from database (JSON)

Question

I am using ExtJS (v3) and I have a form built that I want to populate so that a user can edit the data and then submit it back.

The form is built properly and the data is being pulled from the database properly, but where I am having a difficult time is populating the form with the data from the database.

Anyone have suggestions?

This is my data being pulled from the database:

var workflow_projects = new Ext.data.JsonStore({
        autoLoad: true,
        autoDestroy: true,
        url: '<% $jsonURL %>',
        storeId: 'workflow_projects',
        idProperty: 'ProjectID',
        fields: [ 'ProjectID', 'ProjectName' ]
});

and then my form:

var simpleForm = new Ext.FormPanel ({
labelWidth: 175,
id: 'simpleForm',
    url:'./edit',
method: 'POST',
    frame:true,
    title: 'Edit',
    bodyStyle:'padding:5px 5px 0',
    width: 850,
    defaultType: 'textfield',

    items: [
        {
            fieldLabel: 'Project Name',
            name: 'ProjectName',
            allowBlank:true,
            anchor:'100%'
        }

    ]
});

Answer 1

I'd use load record in the load event handler for the store. your field names have to match the record in the store, which it looks like you're doing for ProjectName.

http://docs.sencha.com/ext-js/3-4/#!/api/Ext.form.BasicForm-method-loadRecord

(Code is not tested in actual browser.)

var workflow_projects = new Ext.data.JsonStore({
            autoLoad: true,
            autoDestroy: true,
            url: '<% $jsonURL %>',
            storeId: 'workflow_projects',
            idProperty: 'ProjectID',
            fields: [ 'ProjectID', 'ProjectName' ],

        events : {
           load: function(store, records, options){
           if(records[0]){
           simpleForm.getForm().loadRecord(records[0]);
           } else{
             console.log("no data!");
            }
        }
    });