Appeler une fonction dans un ExtJS XTemplate

Question

Je suis familier avec l'utilisation d'une fonction pour déterminer une condition spécifique en utilisant xtemplate mais je ne sais pas comment appeler directement une fonction sans l'instruction conditionnelle if.

Mon code, par exemple, veut ajouter certains caractères à une chaîne que j'utilise dans mon xtemplate. Je pense que la meilleure façon de le faire est d'ajouter les caractères lorsque le xtemplate est rendu.

var myTpl = new Ext.XTemplate(
  '',

    '',

      '', //cet appel à la fonction ne fonctionne pas, j'ai aussi essayé des variations de cela.

    '',

  '',

 {
  isThumbnailed : function(thumbnailed) {
    return ...;
  },
  getThumbUrl : function(rawThumbUrl) {
    //... //cette fonction n'est pas appelée.
    return ...;
  }

 }
)

Answer 1

Jetez un œil à la XTemplate constructeur API docs. Il y a beaucoup d'exemples intéressants là-bas. Citant:

Tout ce qui se trouve entre {[ ... ]} est considéré comme du code à exécuter dans le cadre du modèle.

Donc, vous devriez être capable de faire quelque chose comme :

'',

Answer 2

Pour appeler les fonctions définies dans la portée, vous devez utiliser la syntaxe :

{[this.functionName(values.valueName)]}

Dans votre cas, vous pouvez appeler :

'',

Si vous voulez utiliser une fonction définie en dehors du contexte du modèle, alors supprimez this. de l'appel de fonction.

Answer 3

Essayais de résoudre ça tout(e) seul(e) l'autre jour et suis tombé(e) sur une solution pour faire fonctionner les événements de clic. La réponse courte est que vous devez utiliser la fonction .defer pour configurer des écouteurs d'événements après le rendu du modèle.

Voici l'exemple que j'ai trouvé :

var resultTpl = new Ext.XTemplate(
    '',
        '',
            '',
                '{number} {street}',
            '',
            'Propriétaires : {owners}',
            'Code de drapeau : {flag}',
            'Nombre de violations : [{summary}]',
        '',
    '', {
    getLinkId: function(values) {
        var result = Ext.id();
        this.addListener.defer(1, this, [result]);
        return result;
    },
    addListener: function(id) {
        Ext.get(id).on('click', function(e){e.stopEvent(); alert('lien ' + id + ' cliqué');})
    }
});

Source

Answer 4

Vous pouvez soit:

• Référencer la valeur directement par exemple {myValue}
• La passer à une fonction par exemple {[this.myFunction(values.myValue)]}.

Voici un exemple qui fonctionne avec toutes les versions de ExtJS.

var data = [{
    id: 1,
    subdata: { x: 10, y: 20 }
}, {
    id: 2,
    subdata: { x: 20, y: 30 }
}];

var tpl = new Ext.XTemplate([
    '',
    '',
        'ID: {id} ou ',
            '{["#" + this.pad(values.id, 3, "0")]}',
        '',
        '',
            'x: {x} ou ',
                '{[this.frmtUnits(values.x)]}',
            'y: {y} ou ',
                '{[this.frmtUnits(values.y)]}',
        '',
        '',
    '',
    '',
    {
        pad : function(s, n, c) {
            if (typeof s !== 'string') s = '' + s;
            return Math.abs(n) <= s.length ? s : this.pad(n > 0 ? c + s : s + c, n, c);
        },
        frmtUnits : function(v) {
            return v + 'px';
        }
    }
]);

Ext.onReady(function () {
    new Ext.Panel({
        autoHeight: true,
        html: tpl.apply(data),
        layout: 'fit',
        style: { padding: '2px', margin: '2px' },
        renderTo: Ext.getBody()
    });
});

ul li {
    line-height: 1.67em;
}
li span {
    font-weight: bold;
}
li span.raw {
    color: #D44;
}
li span.fmt {
    color: #44D;
}