PDA

View Full Version : Configure binding data



env0ke
11 Aug 2011, 10:45 PM
Hi all, :)

I try binding data from grid to simple panel. In grid i can use renderer:

renderer : Ext.util.Format.dateRenderer('d.m.Y')
Template for panel:

tplMarkup: [
'<table id="details">',
'<tr>',
'<th id="th">Insert date:</th>',
'<td id="td">{insert_date}</td>',
'</tr>'
'</table>'
]
And in {insert_date} i have Fri May 19 2011 00:00:00 GMT+0100 (CET), but i need 19.05.2011. What i can configure date? Sorry of my bad english :">.

skirtle
12 Aug 2011, 4:39 AM
Here's one way:


new Ext.panel.Panel({
height: 300,
renderTo: Ext.getBody(),
title: 'Title',
width: 300,
data: {
insert_date: new Date()
},
tpl: [
'Date: {[Ext.util.Format.dateRenderer("d.m.Y")(values.insert_date)]}'
]
});

Here's another way:


new Ext.panel.Panel({
height: 300,
renderTo: Ext.getBody(),
title: 'Title',
width: 300,
data: {
insert_date: new Date()
},
tpl: new Ext.XTemplate(
'Date: {[this.formatDate(values.insert_date)]}',
{
formatDate: Ext.util.Format.dateRenderer('d.m.Y')
}
)
});

Here's a third alternative:


Ext.util.Format.myDateFormat = Ext.util.Format.dateRenderer("d.m.Y");

new Ext.panel.Panel({
height: 300,
renderTo: Ext.getBody(),
title: 'Title',
width: 300,
data: {
insert_date: new Date()
},
tpl: [
'Date: {insert_date:myDateFormat}'
]
});

See the XTemplate docs (http://docs.sencha.com/ext-js/4-0/#/api/Ext.XTemplate) for details of all of this.

env0ke
12 Aug 2011, 5:25 AM
Third alternative worked for me. Thank you!