32 votos

Llamar a una función en un ExtJS XTemplate

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

Mi código, por ejemplo, quiere anexar algunos caracteres en una cadena que estoy utilizando en mi xtemplate. Creo que la mejor manera de hacerlo es agregar los caracteres cuando el xtemplate se representa.

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 ...;
  }

 }
)

56voto

bmoeskau Puntos 13136

Eche un vistazo a la XTemplate constructor de la API de google docs. Hay un montón de buenos ejemplos que hay. Cito:

Nada entre {[ ... ]} se considera la ejecución de código en el ámbito de la plantilla.

Así que usted debe ser capaz de hacer algo como:

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

29voto

Matt Puntos 1410

Para llamar a las funciones definidas en el ámbito de aplicación, debe utilizar la sintaxis:

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

En su caso, usted puede llamar a:

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

Si desea utilizar una función definida fuera de la plantilla contexto, a continuación, retire this. a partir de la llamada a la función.

14voto

CoreyLoose Puntos 111

Estaba tratando de entender esto a mí el otro día, encontré una solución para conseguir haga clic en eventos de trabajo. La respuesta corta es que usted necesita para hacer uso de el .aplazar la función para la instalación de detectores de eventos después de que la plantilla ha sido prestado.

Aquí está el ejemplo que he encontrado:

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

Fuente

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X