ExtJS XTemplate

Question

J'essaie de développer un FilterEditor en utilisant ExtJS. l'utilisateur crée des critères de distance, de comparaison, de null/notnull et je dois les présenter dans un format bien formaté, afin que les utilisateurs puissent facilement lire les critères généraux. Pour cela, j'ai pensé que Ext.DataView et XTemplates feraient l'affaire. Mais je me demande si je peux fournir plus d'un modèle pour rendre les modèles maintenables, ou utiliser une fonctionnalité intégrée pour sélectionner une partie du modèle pour moi.

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

sortie:

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

Il y aura beaucoup de modèles, je pense à fournir certains éditeurs de données en ligne, donc très probablement cela va croître en nombre. Je sais que je peux faire quelques blocs simples, il pourrait devenir grand et compliqué, donc je voulais des opinions avant de plonger dans ce domaine.

Answer 1

Je pense que l'aspect le plus puissant des modèles sont les fonctions de membre modèle que vous pouvez appeler dans votre modèle. Avec ceux-ci, les possibilités sont infinies. Par exemple, vous pouvez les utiliser pour rendre d'autres sous-modèles au sein de votre modèle 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); 
     } 
    } 
    } 
); 

Pour un aperçu des modèles Vérifions Sencha vidéo conférence: Advanced Templates for Ext JS.

Answer 2

Gabarit également dans la rangée extenseur sur la grille.

Veuillez trouver ci-dessous le code que j'ai utilisé dans mon projet.

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