ExtJs: Attacher des champs de formulaire à des objets en mémoire

Question

Je ne comprends pas certains éléments clés de l'idiome ExtJs, donc cette question est de me guider vers cela. Je pense que j'essaie d'utiliser ExtJs de la mauvaise façon.

J'écris une application qui permet à l'utilisateur d'ajouter un nombre dynamique d'enregistrements enfants. Faisons semblant de décrire une pièce et l'utilisateur peut cliquer sur le bouton Ajouter une porte et obtenir une porte FormPanel ajoutée à une liste de FormPanels où ils peuvent spécifier les détails de la porte. Je tiens les détails d'une porte comme objet en mémoire et je veux pouvoir relier les résultats de la sélection d'une valeur dans une combobox, un champ de texte, etc. avec un champ sur l'objet correct. Mon plan est alors d'envoyer l'objet au serveur en utilisant JSON/XHR/REST et de le conserver. J'ai d'autres traitements qui vont sur l'objet de la porte (par exemple spatial) et qui veulent donc avoir les miens.

Jusqu'à présent, rien que j'ai essayé n'a fonctionné. Je peux accrocher l'événement select, mais soit mon champ est le champ de contrôle (auquel cas je ne peux pas accéder à l'objet porte) ou la portée est l'objet porte et je ne peux pas accéder à la valeur du champ de contrôle.

Je suis un peu confus parce que ExtJs parle de la liaison aux champs cachés. Cependant, il semble vouloir un et un seul champ avec un identifiant donné pour un contrôle donné. Cela signifie que je ne peux pas avoir plus d'une porte sauf si la portée de cet identifiant est limitée au FormPanel. Enfin, idéalement, j'aurais un magasin commun qui a été mis à jour avec de nouvelles entrées dans la liste déroulante des couleurs afin qu'il puisse être partagé par plusieurs portes. Si quelqu'un connaît des exemples de ce travail, je serais reconnaissant.

var doorDataEditor = new Ext.form.FormPanel({ 
    labelWidth: 75, 
    width: 350, 
    defaultType: 'textfield', 
    items: [{ 
      fieldLabel: 'colour', 
      name: 'colour', 
      xtype: 'combo', 
      store: colourStore, 
      displayField: 'name', 
      typeAhead: true, 
      mode: 'local', 
      triggerAction: 'all', 
      emptyText: 'Select the colour for this door...', 
      selectOnFocus:true, 
      value: door.colour, 
      listeners:{ 
       scope: door, 
       'select': function(ev, target) { 

        alert(target.findField('name')); this.colour = target.value; 
       } 
      } 
     }]}); 

Merci d'avance pour votre aide.

Answer 1

Vous utilisez le format de gestionnaire d'événements DOM générique (ev, target), mais il ne s'agit pas d'un événement DOM générique. Pour les composants, vous devez rechercher dans la API docs la signature d'événement spécifique au composant. Dans ce cas, pour ComboBox est (Ext.form.ComboBox combo, Ext.data.Record record, Number index) Vous devriez être en mesure de saisir la valeur de record.data.colour (en supposant que c'est ainsi que vos enregistrements sont mappés).