web-dev-qa-db-fra.com

Appeler une fonction dans un ExtJS XTemplate

Je connais bien l'utilisation d'une fonction pour déterminer une condition spécifique à l'aide de xtemplate, mais je ne sais pas comment appeler directement une fonction sans l'instruction if conditionnelle.

Mon code, par exemple, souhaite ajouter des 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 ...;
  }

 }
)
javascriptextjs
32
Snowright

Regardez le constructeur XTemplate API docs. Il y a beaucoup de bons exemples ici. Citant: 

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

Vous devriez donc pouvoir faire quelque chose comme:

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

Pour appeler des fonctions définies dans l'étendue, vous devez utiliser la syntaxe:

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

Dans votre cas, vous pouvez appeler:

'<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.

29
Matt

J'essayais de comprendre cela moi-même l'autre jour et j'ai trouvé une solution pour que les clics soient efficaces. La réponse courte est que vous devez utiliser la fonction .defer pour configurer les écouteurs d’événements après le rendu du modèle.

Voici l'exemple que j'ai trouvé:

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');})
    }
});

La source

14
CoreyLoose

Tu peux soit:

  • Référencez directement la valeur, par ex. {myValue}
  • Transmettez-le à une fonction, par exemple. {[this.myFunction(values.myValue)]}.

Vous trouverez ci-dessous un exemple fonctionnant 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>',
    {
    	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>

0
Mr. Polywhirl