Extjs 4: Render store data into Ext.form.Panel without using MVC framework

Question

Below you will find an Ext.form.Panel that has two fields. I chose two random fields in my model that have data. They are not rendering in the form. Note that I am not using MVC in the Extjs framework in this code. How can I get these fields to render? I've pasted the relevant output from the store.data.toSource() to show that I do in fact have data in my store, and only a single record. To view the image with a little larger resolution, right click it and view in another tab.

NOTE: .toSource() only works in Mozilla Firefox

I've tried executing this after creating the form, but it didn't work:

taskForm.getForm().loadRecord(store.getAt(0));

Code:

    var taskForm = Ext.create('Ext.form.Panel', {
        title: 'Task',
        id: 'form1',
        width: 600,
        height: 200,
        bodyPadding: 10,
        renderTo: 'TaskEditForm',
        store: store,
        style: {
            'position': 'fixed',
            'top': '100px',
            'left': '10px'
        },

        items: [{
            xtype: 'label',
            labelAlign: 'right',
            name: 'project_id',
            fieldLabel: 'Project ID',
            width: 100
        }, {
            xtype: 'label',
            labelAlign: 'right',
            name: 'user_responsible',
            fieldLabel: 'User',
            width: 100
        }],

        buttons: [{
            text: 'Save Task Detail',
            handler: function (btn) {

                alert(store.data.toSource());

            }

        }]
    });

enter image description here

========

Edit: @Evan

This code gives the error below:

taskForm.getForm().loadRecord(store.getAt(0));

Error:

TypeError: record is undefined

...

return this.setValues(record.data);  // ext-all-debug.js (line 109529)

Line 109529:

loadRecord: function(record) {
  this._record = record;
  return this.setValues(record.data);
},

Evan Trimboli Evan Trimboli · Accepted Answer · 2013-06-04T22:59:20

Have you read the documentation? store.data is a MixedCollection that holds a bunch of records. The documentation for the load method says:

A class which handles loading of data from a server into the Fields of an Ext.form.Basic.

You can't just throw in random parameters and expect stuff to work.

What you probably want is:

form.getForm().loadRecord(store.getAt(0)); // Load the first store record into the form

Extjs 4: Render store data into Ext.form.Panel without using MVC framework

Edit: @Evan

1 Answers