JavaScript « Custom content render in extJS RowExpander

есть такой код

/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .javascript.geshi_code {font-family:monospace;} .javascript.geshi_code .imp {font-weight: bold; color: red;} .javascript.geshi_code .kw1 {color: #000066; font-weight: bold;} .javascript.geshi_code .kw2 {color: #003366; font-weight: bold;} .javascript.geshi_code .kw3 {color: #000066;} .javascript.geshi_code .co1 {color: #006600; font-style: italic;} .javascript.geshi_code .co2 {color: #009966; font-style: italic;} .javascript.geshi_code .coMULTI {color: #006600; font-style: italic;} .javascript.geshi_code .es0 {color: #000099; font-weight: bold;} .javascript.geshi_code .br0 {color: #009900;} .javascript.geshi_code .sy0 {color: #339933;} .javascript.geshi_code .st0 {color: #3366CC;} .javascript.geshi_code .nu0 {color: #CC0000;} .javascript.geshi_code .me1 {color: #660066;} .javascript.geshi_code span.xtra { display:block; }

var posts_grid_expander = new Ext.ux.grid.RowExpander({
   tpl : new Ext.Template(
       '<p><b>Quote:</b> {quote}</p>'
   )

});
 


как текст, который в {quote} отправить в свой renderer ?

Создаю Ext.grid.GridPanel, для строк могу присвоить свой рендер /** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .javascript.geshi_code {font-family:monospace;} .javascript.geshi_code .imp {font-weight: bold; color: red;} .javascript.geshi_code .kw1 {color: #000066; font-weight: bold;} .javascript.geshi_code .kw2 {color: #003366; font-weight: bold;} .javascript.geshi_code .kw3 {color: #000066;} .javascript.geshi_code .co1 {color: #006600; font-style: italic;} .javascript.geshi_code .co2 {color: #009966; font-style: italic;} .javascript.geshi_code .coMULTI {color: #006600; font-style: italic;} .javascript.geshi_code .es0 {color: #000099; font-weight: bold;} .javascript.geshi_code .br0 {color: #009900;} .javascript.geshi_code .sy0 {color: #339933;} .javascript.geshi_code .st0 {color: #3366CC;} .javascript.geshi_code .nu0 {color: #CC0000;} .javascript.geshi_code .me1 {color: #660066;} .javascript.geshi_code span.xtra { display:block; }

renderer:myfunction
 
но как это сделать для плагина RowExpander?
0
extjs javascript

1 ответов

Додумался до такого решения: изменять нужно не наблон, а хранилище



   posts_store.on('load', function(){
       for(i=0; posts_store.totalLength>i; i++){
           var rec= posts_store.getAt(i);
           rec.data = rec.json;
           
           rec.data.quote = renderMultilangText( rec.data.quote);

       }
   }, this);
 
0

Если нужен свой render, то можно переопределить метод apply у Ext.Template. Эта функция в качестве аргумента получает данные из хранилища и должна возвращать готовый html.

Можно сделать как-то так:


var MyTpl = Ext.extend(Ext.Template, {
    apply: function(data) {
        console.log(data);
        ...
        return html;
    }
});
               
var expander = new Ext.grid.RowExpander({
    tpl: new MyTpl(); // <= Аргументом функции должна быть строка-шаблон,
                      //    либо в конфиге указать, что шаблон уже скомпилирован.
});
 
0