Results 1 to 5 of 5

Thread: XTemplate Question/Issue

  1. #1

    Default XTemplate Question/Issue

    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.
    Code:
    {"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.
    Code:
    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

    Code:
    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>"
    );

  2. #2
    Ext User zhegwood's Avatar
    Join Date
    Dec 2007
    Location
    Boulder, CO Suburbia (Lafayette)
    Posts
    388

    Default

    try:

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

  3. #3

    Default

    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

  4. #4
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    <tpl> is very picky: It requires double quotes and won't work with single quotes.

    Use:
    Code:
    '<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)

  5. #5

    Default

    SOLVED

    Thanks Condor, works perfectly now.

    Curtis

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •