PDA

View Full Version : Dadaview load dynamic data



boben
12 Apr 2012, 1:02 AM
I am a new sencha, I want to create screen like sales order (http://allthatjs.com/2012/02/19/building-a-sap-mobile-app-with-sencha-touch-2/)
33901
can anyone help me? Thanks

mitchellsimoens
12 Apr 2012, 6:00 AM
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
12 Apr 2012, 6:21 AM
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
12 Apr 2012, 5:21 PM
Hi Mitchell, Luc

Thank you all.

Regards, Boben