PDA

View Full Version : understanding XTemplate (just explain me)



helavissa
21 Sep 2010, 11:36 AM
Hi,

I don't really understand XTemplate class, so here I just want some explanation about a piece of code.
In one of the down-loadable examples, tree-grid.js, there is following code where they create a TreeGrid



columns:[{
...
},{
header: ...,
width: ..,
dataIndex: ...,
align: ...,
tpl: new Ext.XTemplate('{duration:this.formatHours}', {
formatHours: function(v) {
if(v < 1) {
return Math.round(v * 60) + ' mins';
} else if (Math.floor(v) !== v) {
var min = v - Math.floor(v);
return Math.floor(v) + 'h ' + Math.round(min * 60) + 'm';
} else {
return v + ' hour' + (v === 1 ? '' : 's');
}
}
})
},{
...
},{
....
}]

How does XTemplate work? where does formatHours get called and how does v value gets passed there? and what does '{duration:this.formatHours}' mean?

evant
21 Sep 2010, 7:38 PM
It's in the documentation, appending a : will invoke a function. In this case, it's a member function on the template. It gets passed the value for duration.

Think of it as a renderer, similar to the grid.

Animal
21 Sep 2010, 9:44 PM
Play with XTemplate on the Firebug command line.

Try this:



new Ext.XTemplate('{honk:this.blah}', {blah:function(v){return v + ' plus blah';}}).apply({honk: 'foo'})

helavissa
22 Sep 2010, 9:27 AM
evant, you said it gets passed the value for duration, and if i want to pass it another value, how would i do that?