Ext.form.ComboBox: Utiliser le modèle pour displayField

Question

Est-il possible d'appliquer un modèle à la valeur sélectionnée d'un ComboBox? J'utilise un modèle pour afficher les valeurs déroulantes de la zone de liste déroulante, mais dès que j'en sélectionne une, la valeur simple du magasin de données est affichée.

{ 
    id:    'requestStatusCombo', 
    hiddenName:  'requestStatus', 
    tpl:    '<tpl for="."><div class="x-combo-list-item">{statusCode:requestStatus}</div></tpl>', 
    fieldLabel:  'Status', 
    xtype:    'combo', 
    mode:   'local', 
    triggerAction:  'all', 
    store:    new Ext.data.ArrayStore({ 
     fields:  ['statusCode'], 
     data:  [['unassigned'],['assigned'],['closed']] 
    }), 
    valueField:  'statusCode', 
    displayField: 'statusCode' 
} 

Je veux utiliser ma fonction de format requestStatus pour traduire le statusCodes en noms d'état spesific de paramètres régionaux, et cela fonctionne bien pour la liste déroulante, mais dès que je choisis quelque chose, le statusCode est représentée.

Alors est-il possible d'assigner un template à displayField, ou peut-être de faire une simple modification par lot sur le datastore? En traitant l'entrée à travers un lecteur peut-être? Y at-il un autre mot-clé <tpl for="?"> qui va rendre cela possible?

Je cherche une méthode simple utilisant la bibliothèque Ext. Si la seule solution est de pré-traiter les données, je suis capable de le faire moi-même.

Answer 1

J'ai trouvé une solution!

J'ai changé datastore, et a ajouté un lecteur de pré-traiter l'état à l'aide d'une fonction de conversion:

{ 
    id:    'requestStatusCombo', 
    hiddenName:  'requestStatus', 
    fieldLabel:  'Status', 
    xtype:    'combo', 
    mode:   'local', 
    triggerAction:  'all', 
    store:    new Ext.data.Store({ 
     data:  [['unassigned'],['assigned'],['closed']], 
     reader:  new Ext.data.ArrayReader({},[ 
      {name: 'statusCode', mapping: 0}, 
      {name: 'displayname', mapping: 0, convert: function(statusCode) { 
       return Ext.util.Format.requestStatus(statusCode); 
      }} 
     ]) 
    }), 
    valueField:  'statusCode', 
    displayField: 'displayname' 
} 

Answer 2

Examinig généré DOM, vous remarquerez que tandis que les éléments de la liste sont DIVs, le champ lui-même est l'élément INPUT html. Vous ne pouvez pas avoir de code HTML dans l'élément INPUT ... donc non ... pas d'xtemplate ici.

Cela ne signifie pas qu'il ne peut pas être fait par l'extension Ext.form.ComboBox (ou peut-être Ext.Component)