Dadaview load dynamic data

[boben]

I am a new sencha, I want to create screen like sales order (http://allthatjs.com/2012/02/19/buil...encha-touch-2/)
sales order.png
can anyone help me? Thanks

[mitchellsimoens]

I don't think that is a dataview. I think the first screenshot is a dataview or a list and then when you tap on a row it shows this container that is likely using a template.

[Luc]

Hi boben,

I am the developer of the example. It's not a dataview, it's a Panel using a HTML template, just like Mitchell said.

The code of the 'view' is below. Of course you need some CSS to make it look good.

Ext.define('App.view.SalesOrderDetails', {
    extend: 'Ext.Panel',
    config: {
        title: 'Sales order',
        cls: 'details',
        scrollable: true,
        tpl: [
            '<table class="header">',
            '  <tr class="title"><td class="label">Sales Order</td><td></td></tr>',
            '  <tr><td class="label">Customer:</td><td>{header.data.CustomerName}</td></tr>',
            '  <tr><td class="label">Order ID:</td><td>{header.data.SalesOrderID}</td></tr>',
            '  <tr><td class="label">Created at:</td><td>{[Ext.Date.format(values.header.data.CreatedAt, "M j, Y")]}</td></tr>',
            '  <tr><td class="label">Status:</td><td>{header.data.StatusDescription}</td></tr>',
            '  <tr><td class="label">Billing status:</td><td>{header.data.BillingStatusDescription}</td></tr>',
            '  <tr><td class="label">Delivery status:</td><td>{header.data.DeliveryStatusDescription}</td></tr>',
            '</table>',
            '<table class="lineitems">',
            '<tpl for="lineitems">',  
            '  <tr>',
            '    <td class="item">{[values.data.SalesOrderItem.replace(/^[0]+/g, "")]}.</td>',
            '    <td class="product">{data.ProductName}</td>',
            '    <td class="amount">{data.NetSum}</td>',
            '    <td class="currency">EUR</td>',
            '  </tr>',
            '</tpl>',
            '  <tr class="net">',
            '    <td class="item"></td>',
            '    <td class="sum">Net:</td>',
            '    <td class="amount">{header.data.NetSum}</td>',
            '    <td class="currency">EUR</td>',
            '  </tr>',
            '  <tr class="tax">',
            '    <td class="item"></td>',
            '    <td class="sum">Tax:</td>',
            '    <td class="amount">{header.data.Tax}</td>',
            '    <td class="currency">EUR</td>',
            '  </tr>',
            '  <tr class="total">',
            '    <td class="item"></td>',
            '    <td class="sum">Total:</td>',
            '    <td class="amount">{header.data.TotalSum}</td>',
            '    <td class="currency">EUR</td>',
            '  </tr>',
            '</table>'
        ]
    }
});

[boben]

Hi Mitchell, Luc

Thank you all.

Regards, Boben