ExtJS XTemplate

Question

Estoy intentando desarrollar un FilterEditor usando ExtJS. usuario crea algunos criterios de rango, comparación, null/notnull y tengo que presentarlos en un formato con formato correcto, para que los usuarios puedan leer los criterios generales fácilmente.

Para esto, pensé que Ext.DataView y XTemplates harían el truco. Pero me pregunto si puedo proporcionar más de una plantilla para mantener las plantillas, o usar alguna funcionalidad incorporada para seleccionar una parte de la plantilla para mí.

var dateRangeTpl = new Ext.XTemplate(
    '<tpl for=".">', 
     '<div id="{CriteriaId}">', 
      '<em>{FieldName} </em>', 
      '<span>{Modifier} </span>', 
      '<span>{Condition} </span>', 
      '<span>{LeftDate} </span>', 
      '<span>{RightDate} </span>', 
     '</div>', 
    '</tpl>', 
    '<div class="x-clear"></div>' 

    var notNullTpl = new Ext.XTemplate(
    '<tpl for=".">', 
     '<div id="{CriteriaId}">', 
      '<em>{FieldName} </em>', 
      '<span>{Modifier} </span>', 
      '<span>{Condition} </span>', 
     '</div>', 
    '</tpl>', 
    '<div class="x-clear"></div>' 

de salida:

Invoice Date not between 2011-01-01 2011-01-31 
Invoice Date not null 

Habrá una gran cantidad de plantillas, estoy pensando de proporcionar algunos editores de datos en línea, por lo que muy probablemente esto va a crecer en número. Sé que puedo hacer algunos bloqueos simples que pueden crecer grandes y complicados, así que quería algunas opiniones antes de sumergirme en ellas.

Answer 1

Creo que el aspecto más poderoso de las plantillas son las funciones de miembro de plantilla que puede llamar dentro de su plantilla. Con estas, las posibilidades son infinitas. Por ejemplo, puede utilizarse para representar otros subplantillas dentro de su plantilla principal:

var mainTpl = new Ext.XTemplate(
    '<tpl for=".">', 
    '<div class="container">', 
     '{[this.renderItem(values)]}', 
    '</div>', 
    '</tpl>', 
    { 
    renderItem: function(values) { 
     if (values instanceof DateRange) { 
     return dateRangeTpl.apply(values); 
     } 
     else { 
     return notNullTpl.apply(values); 
     } 
    } 
    } 
); 

Para una gran visión de conjunto de plantillas de ver un vídeo conferencia Sencha: Advanced Templates for Ext JS.

Answer 2

Plantilla también en el expansor de fila en la cuadrícula.

Encuentra el código a continuación, que utilicé en mi proyecto.

 
 
    this.expander = new Ext.grid.RowExpander({ 
 
    tpl : new Wtf.XTemplate(
 
    '<table border="0" class="iemediumtablewidth" >', 
 
    '<tr>', 
 
    '<td class="iedaynametd" width="200">', 
 
    '<table border="0">', 
 
    '<tr align="center">', 
 
    '<th><b>'+values+'</b></th>', 
 
    '</tr>', 
 
    '<tpl for="dayname">', 
 
    '<tr align="left">', 
 
    '<td>', 
 
    '{.}', 
 
    '</td>', 
 
    '</tr>', 
 
    '</tpl>', 
 
    '</table>', 
 
    '</td>', 
 
    
 
)};