I'm trying to load a form from a record selected in a combo.

The store is loaded properly and the combo is populated, but, when I select a value from combo, form fields remain empty.

Any help will be appreciated.

This is the code:

Model:

Ext.define('AA.model.proc.Process', {
    extend: 'Ext.data.Model',
    fields: [
     { name: 'name', type: 'string' },
     { name: 'owner', type: 'string' },
     { name: 'mail_dest', type: 'string' }
    ],
    proxy: {
     type: 'rest',
     url : 'data/camp.json',
     reader: {
        type: 'json',
        root: 'camp',
        totalProperty: 'count'
    }
}
});

Store:

Ext.define('AA.store.proc.Process', {
    extend: 'Ext.data.Store',
    model: 'AA.model.proc.Process',
    requires: 'AA.model.proc.Process'
});

Class:

Ext.define('AA.view.proc.IM', {
    extend: 'Ext.window.Window',
    alias: 'widget.im',
    title: 'IM',
    layout: 'fit',
    height: 500,
    width: 400,
    autoShow: true,
    plain: true,
    modal: true,
    headerPosition: 'right',
    closable: false,
    initComponent: function () {
        this.items = [{
            xtype: 'form',
            fileUpload: true,
            width: 550,
            autoHeight: true,
            border: false,
            bodyStyle: 'padding:5px 5px 0',
            frame: true,
            labelWidth: 100,
            defaults: {
                anchor: '95%',
                allowBlank: false,
          开发者_如何学C      msgTarget: 'side'
            },
            items: [{
                xtype: 'combo',
                name: 'name',
                store: 'procstore',
                fieldLabel: 'Name',
                valueField: 'name',
                displayField: 'name',
                width: 150,
                allowBlank: true,
                listeners: {
                    scope: this,
                        'select': this.loadForm
                }
            }, {
                xtype: 'textfield',
                fieldLabel: 'Name',
                name: 'name'
            }, {
                xtype: 'textfield',
                fieldLabel: 'Owner',
                name: 'owner'
            }, {
                xtype: 'textfield',
                fieldLabel: 'E-mail owner',
                name: 'mail_dest'
            }]
        }];
        this.buttons = [{
            text: 'Save',
            action: 'save'
        }, {
            text: 'Cancel',
            scope: this,
            handler: this.close
        }];
        this.callParent(arguments);
    },
    loadForm: function (field, record, option) {
        console.log(record)
        // firebug returns 
        //  $className "AA.model.proc.Process"
        //  $alternateClassName     "Ext.data.Record"
        console.log(this.down('form'))
        // firebug returns the right form panel
        this.down('form').loadRecord(record);
    }
});

---

This is from the documentation for the select event:

select( Ext.form.field.ComboBox combo, Array records, Object eOpts )

Notice that the second parameter is an Array. But in your example the second parameter is an Ext.data.Record. You are treating array as a record. Modify your loadForm to make it process arrays of records:

loadForm: function (field,records,option) {
    this.down('form').loadRecord(records[0]);
}

P.S. By the way you have two fields with name: 'name'.