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(
    '<tpl for=".">', 

    '<tpl if="this.isThumbnailed(thumbnailed) == true">', 

     '<img src=this.getThumbUrl(rawThumbUrl)/>', //this call to function does not work, also tried variations of this. 

    '</tpl>', 

    '</tpl>', 

{ 
    isThumbnailed : function(thumbnailed) { 
    return ...; 
    }, 
    getThumbUrl : function(rawThumbUrl) { 
    //... //this function does not get called. 
    return ...; 
    } 

} 
) 

Answer 1

Jetez un coup d'œil aux documents API XTemplate constructor. Il y a beaucoup de bons exemples là-bas. Citant:

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

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

'<img src={[this.getThumbUrl(rawThumbUrl)]} />', 

Answer 2

a essayé de comprendre cela moi-même l'autre jour et est tombé sur une solution pour obtenir des événements de clic de travail. La réponse courte est que vous devez utiliser la fonction .defer pour configurer les écouteurs d'événement après que le modèle a été rendu.

Voici l'exemple que je trouve:

var resultTpl = new Ext.XTemplate(
    '<tpl for=".">', 
     '<div class="search-item">', 
      '<a id={[this.getLinkId()]} href="violation.aspx?violationid={slvha}">', 
       '<img src="images/icons/home.gif" style="float:left;padding-right:2px">{number}&nbsp;{street}', 
      '</a>', 
      '<p>Owners:&nbsp;{owners}', 
      '<br/>Flag Code:&nbsp;{flag}', 
      '<br/>Number of Violations:&nbsp;[{summary}]</p>', 
     '</div>', 
    '</tpl>', { 
    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('link ' + id + ' clicked');}) 
    } 
}); 

Source

Answer 3

Pour appeler des fonctions définies dans le champ, vous devez utiliser la syntaxe:

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

Dans votre cas, vous pouvez appelez:

'<img src="{[this.getThumbUrl(values.rawThumbUrl)]}"/>', 

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

Answer 4

Vous pouvez:

• la valeur de référence directement par exemple {myValue}
• Passez-la à une fonction, par ex. {[this.myFunction(values.myValue)]}.

Voici un exemple qui fonctionne avec toutes les versions d'ExtJS.

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

 
var tpl = new Ext.XTemplate([ 
 
    '<ul>', 
 
    '<tpl for=".">', 
 
     '<li>ID: <span class="raw">{id}</span> or ', 
 
      '<span class="fmt">{["#" + this.pad(values.id, 3, "0")]}</span></li>', 
 
     '<ul>', 
 
     '<tpl for="subdata">', 
 
      '<li>x: <span class="raw">{x}</span> or ', 
 
       '<span class="fmt">{[this.frmtUnits(values.x)]}</span></li>', 
 
      '<li>y: <span class="raw">{y}</span> or ', 
 
       '<span class="fmt">{[this.frmtUnits(values.y)]}</span></li>', 
 
     '</tpl>', 
 
     '</ul>', 
 
    '</tpl>', 
 
    '</ul>', 
 
    { 
 
    \t 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; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/ext-all-debug.js"></script>