ExtJS XTemplate

Question

Próbuję utworzyć FilterEditor za pomocą ExtJS. Użytkownik tworzy pewien zakres, porównanie, kryteria null/notnull i muszę przedstawić je w dobrze sformatowanym formacie, aby użytkownicy mogli łatwo odczytać ogólne kryteria.

W tym celu starałem się, aby Ext.DataView i XTemplates działały. Zastanawiam się jednak, czy mogę dostarczyć więcej niż jeden szablon, aby szablony można było utrzymywać, lub użyć wbudowanej funkcjonalności do wybrania fragmentu szablonu dla mnie.

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

wyjściowa:

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

Nie będzie wiele szablonów, myślę o dostarczenie pewnych redaktorów danych inline, więc najprawdopodobniej będzie to wzrost w liczbach. Wiem, że potrafię zrobić kilka prostych bloków, które mogą stać się duże i skomplikowane, więc chciałem trochę opinii, zanim się w to zagłębię.

Answer 1

Myślę, że najpotężniejszym aspektem szablonów są funkcje członków szablonu, które można wywoływać w ramach szablonu. Dzięki tym możliwościom są nieskończone. Na przykład można ich używać do renderowania inne subtemplates ciągu głównego szablonu:

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

za wielki przegląd szablonów sprawdzeniu Video Conference Sencha: Advanced Templates for Ext JS.

Answer 2

Szablon również w ekspanderze wiersza w sieci.

Proszę znaleźć poniższy kod, użyłem w moim projekcie.

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