PDA

View Full Version : XTemplate Question/Issue



curtisb
4 Aug 2009, 1:43 PM
Hi everybody,

I am trying to render some data using an XTemplate into a window as straight HTML and am having problems with an array of objects nested within the JSON.

Here is the JSON that I am receiving back. You will notice that there is a nested array of activities within.


{"rows":[{"currentStatus":"Delivered","trackingNumber":"1Z12345E0291980793","service":"2ND DAY AIR","serviceProvider":"UPS","activities":[{"activityLocation":{"addressLine3":"","country":"US","region":"GA","addressLine2":"","city":"ANYTOWN","addressLine1":""},"activityTime":"120000","activityDate":"19990610","activityStatus":"DELIVERED"},{"activityLocation":{"addressLine3":"","country":"US","region":"","addressLine2":"","city":"","addressLine1":""},"activityTime":"120000","activityDate":"19990608","activityStatus":"BILLING INFORMATION RECEIVED. SHIPMENT DATE PENDING."}],"shipTo":{"postalCode":"30340","addressLine3":"","region":"GA","countryCode":"US","addressLine2":"1307 PEACHTREE STREET","city":"ANYTOWN","addressLine1":"SAMPLE CONSIGNEE"},"shipDate":"19990608"}],"results":1}

Here is the definition of the JSON store and the rendering of the template into the window.


var trackingDetailsStore = new Ext.data.JsonStore({
id: 'trackingDetailsStore',
url: '<c:out value="${pageContext.request.contextPath}"/>/servlet/ShipmentTrackingServlet',
root: 'rows',
totalProperty: 'results',
fields: [
{name: 'trackingNumber'},
{name: 'serviceProvider'},
{name: 'service'},
{name: 'shipDate', type: 'date', dateFormat: 'Ymd'},
{name: 'currentStatus'},
{name: 'shipTo'},
{name: 'activities'}
]
});
trackingDetailsStore.load({
params: {trackingNumber: trackingNumber}
});
trackingDetailsStore.on('load', function(store, records, options){
var window = new Ext.Window({
modal: true,
width: 600,
height: 400,
bodyStyle: 'padding:10px;',
html: trackingTemplate.apply(records[0].data),
title: 'Tracking details for tracking #' + records[0].data.trackingNumber
});

window.show(this);
});


And here is the template code. As you can see I am using a for on the activities and I would expect it to loop at the activities. Well, it is looping but only performing 1 iteration and it should be doing 2 in this case. The other problem is getting the data out, I would have thought that I could just use {activityDate} but rather I had to code it like shown below. I know that is a hack but via Firebug that I what I determined I had to do to get to the data.

Any ideas would sure be appreciated.

Thanks.
Curtis



var trackingTemplate = new Ext.XTemplate(
"<table>",
"<tr>",
"<td style='font-size:11px;font-weight:bold;width:150px;'>Ship Date:</td>",
"<td style='font-size:11px;'>{[fm.date(values.shipDate)]}</td>",
"</tr>",
"<tr>",
"<td style='font-size:11px;font-weight:bold;'>Service:</td>",
"<td style='font-size:11px;'>{service}</td>",
"</tr>",
"<tr>",
"<td style='font-size:11px;font-weight:bold;'>Current Status:</td>",
"<td style='font-size:11px;'>{currentStatus}</td>",
"</tr>",
"<tr>",
"<td>&nbsp;</td>",
"</tr>",
"<tr>",
"<td style='font-size:11px;font-weight:bold;vertical-align:top;'>Ship To:</td>",
"<td>",
"<table>",
"<tr>",
"<td style='font-size:11px;'>{[values.shipTo.addressLine1]}</td>",
"</tr>",
"<tr>",
"<td style='font-size:11px;'>{[values.shipTo.addressLine2]}</td>",
"</tr>",
"<tr>",
"<td style='font-size:11px;'>{[values.shipTo.addressLine3]}</td>",
"</tr>",
"<tr>",
"<td style='font-size:11px;'>{[values.shipTo.city]},&nbsp;{[values.shipTo.region]}</td>",
"</tr>",
"<tr>",
"<td style='font-size:11px;'>{[values.shipTo.postalCode]}</td>",
"</tr>",
"<tr>",
"<td style='font-size:11px;'>{[values.shipTo.countryCode]}</td>",
"</tr>",
"</table>",
"</td>",
"</tr>",
"<tr>",
"<td>&nbsp;</td>",
"</tr>",
"<tr>",
"<td style='font-size:11px;font-weight:bold;'>Activity:</td>",
"<td style='font-size:11px;'>",
"<table>",
"<tpl for='activities'>",
"<tr>",
"<td style='font-size:11px;'>{[values.activities[xindex - 1].activityDate]}</td>",
"<td style='font-size:11px;'>{[values.activities[xindex - 1].activityTime]}</td>",
"<td style='font-size:11px;'>{[values.activities[xindex - 1].activityStatus]}</td>",
"</tr>",
"</tpl>",
"</table>",
"</td>",
"</tr>",
"</table>"
);

zhegwood
4 Aug 2009, 2:41 PM
try:

html: trackingTemplate.apply(records[0].data.items),

curtisb
5 Aug 2009, 4:47 AM
Nope, still does not work. That does not appear to be valid syntax from what I can tell. I am guessing this should be possible from the examples that I looked at but can't figure out why it does not work. I am quite sure the JSON is all valid as I am using a package on the java side to generate it and from viewing it, it appears to be valid.

Pretty soon I am going to have to figure out some other way to do this because this is crazy, I have been working on this one thing for a few hours.

Thanks.
Curtis

Condor
5 Aug 2009, 5:03 AM
<tpl> is very picky: It requires double quotes and won't work with single quotes.

Use:

'<tpl for="activities">',
'<tr>',
'<td style="font-size:11px;">{activityDate}</td>',
'<td style="font-size:11px;">{activityTime}</td>',
'<td style="font-size:11px;">{activityStatus}</td>',
'</tr>',
'</tpl>',
(which is also better XHTML compliant, because you should be using double quotes for attribute values)

curtisb
5 Aug 2009, 6:22 AM
SOLVED

Thanks Condor, works perfectly now.

Curtis