Llamar a una función en una ExtJS XTemplate

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.Llamar a una función en una ExtJS XTemplate

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

} 
)

Fuente

2010-04-10 Snowright

Tener un vistazo a las XTemplate constructor documentación de la API. Hay muchos buenos ejemplos allí. Citando:

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

Por lo que debe ser capaz de hacer algo como:

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

Fuente

2010-04-10 04:11:06

hizo esto a resolver su problema? –

Encontrado que, si la función es global entonces '' haré el truco –

estoy intentando este mismo método pero no funciona en IE 11. ¿Tiene alguna idea? –

estaba tratando de resolver esto a mí mismo el otro día y encontré una solución para conseguir eventos de clic de trabajo. 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

Fuente

2010-12-17 17:50:13 CoreyLoose

Para la versión 5 en adelante, addListener se puede escribir como: Ext.Function.defer (this.addListener, 1, this, [result]); –

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

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

En su caso, se puede llame al:

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

Si desea utilizar una función definida fuera del contexto de la plantilla, elimine this. de la llamada a la función.

Fuente

2011-01-12 16:35:53 Matt

Gracias, tenga en cuenta que "valores" es la variable que tiene el atributo de registro actual de la plantilla. Por ejemplo, values.birthDate, etc. –

Puede:

de referencia el valor directamente, por ejemplo, {myValue}
Pásalo a una función, por ej. {[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>', 
 
    { 
 
    \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>

Fuente

2015-10-06 11:17:17

Llamar a una función en una ExtJS XTemplate

Respuesta

Cuestiones relacionadas