Ajouter plus d'un champ dans la valeur d'affichage du champ de sélection (Sencha Touch 2)

Question

J'ai le champ de sélection suivant :

{
    xtype: 'selectfield',
    name: 'sourcecurrency',
    label: 'Source Currency',
    valueField: 'name',
    displayField: '{name} - {description}',
    store: 'Countries',
    placeHolder: 'Select your source currency'
},

Les données renvoient deux champs 'nom' et 'description' ; je veux afficher les deux champs dans la zone de sélection, en définissant le displayField comme indiqué, mais j'ai toujours le '{}' qui les entoure.

Je dois être vraiment stupide mais je n'arrive pas à comprendre.

Answer 1

Il n'y a pas de moyen direct d'afficher plus d'un champ dans le champ selectfield's displayField .

Vous devrez donc créer une extension basée sur l'élément selectfield .

Answer 2

Je sais que c'est vieux, mais voici une autre façon de procéder pour être complet :

Créez un champ comme DisplayName dans votre modèle et faites en sorte qu'il soit la combinaison de champs et d'informations que vous souhaitez afficher.

Il suffit alors d'avoir displayField : '{displayName}'.

La création d'un champ personnalisé est plus efficace, mais cette méthode est plus facile. Tout dépend de ce que vous avez besoin d'afficher, de l'efficacité de votre application et du temps que vous souhaitez investir dans cette solution.

Answer 3

Si cela peut aider quelqu'un, vous pouvez simplement remplacer getTabletPicker ou getPhonePicker (testé dans sencha 6).

Par exemple, dans getTabletPicker, tout ce que vous devez changer est la ligne

 itemTpl: '<span class="x-list-label">{' + me.getDisplayField() + ':htmlEncode}</span>',

à quelque chose d'autre comme

  itemTpl : me.getTpl()

Votre champ de sélection serait donc

        xtype        : 'selectfield',
        displayField : 'YOURDISPLAY',
        valueField   : 'YOURVALUE',            
        tpl          : new Ext.XTemplate(
                        '<tpl for=".">',
                            '{YOURDISPLAY}',
                            '{YOURDISPLAY2}',
                            '{YOURDISPLAY3}',
                        '</tpl>'
                       )