javascript - examples - extjs gpl

Llamar a una función en una ExtJS XTemplate

Question

Estoy familiarizado con el uso de una función para determinar una condición específica utilizando xtemplate pero no estoy seguro de cómo llamar directamente a una función sin la declaración if condicional.

Mi código, por ejemplo, quiere agregar algunos caracteres a una cadena que estoy usando dentro de mi xtemplate. Creo que la mejor manera de hacerlo es añadir los caracteres cuando se procesa xtemplate.

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

Eche un vistazo a los documentos de la API del constructor de XTemplate . Hay muchos buenos ejemplos allí. Citando:

Cualquier cosa entre {[...]} se considera código para ser ejecutado en el alcance de la plantilla.

Entonces deberías poder hacer algo como:

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

Answer 2

Estaba tratando de resolver esto el otro día y encontré una solución para hacer que los eventos de clic funcionen. La respuesta breve es que debe utilizar la función .defer para configurar los escuchas de eventos una vez que se haya procesado la plantilla.

Aquí está el ejemplo que encontré:

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

Para llamar a funciones definidas en el alcance, debe usar la sintaxis:

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

En tu caso, puedes llamar:

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

Si desea utilizar una función definida fuera del contexto de la plantilla, elimínela this. de la llamada de función.

Answer 4

Tu también puedes:

• {myValue} referencia al valor directamente, por ejemplo, {myValue}
• Pasarlo a una función, por ejemplo, {[this.myFunction(values.myValue)]} .

A continuación se muestra un ejemplo que funciona con todas las versiones de 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>