Charger le formulaire à partir de la liste déroulante

Question

J'essaie de charger un formulaire à partir d'un enregistrement sélectionné dans une liste déroulante.

Le magasin est chargé correctement et le combo est rempli, mais lorsque je sélectionne une valeur de combo, les champs de formulaire restent vides.

Toute aide sera appréciée.

Voici le code:

Modèle:

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' 
    } 
} 
}); 

magasin:

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

Classe:

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, 
       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); 
    } 
}); 

Answer 1

Ceci est du documentation pour la select événement:

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

Notez que le second paramètre est un tableau. Mais dans votre exemple, le deuxième paramètre est Ext.data.Record. Vous traitez un tableau comme un enregistrement. Modifier votre loadForm pour le faire traiter des tableaux d'enregistrements:

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

post-scriptum Par ailleurs, vous avez deux champs avec name: 'name'.