1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    7
    Vote Rating
    0
    boben is on a distinguished road

      0  

    Default Dadaview load dynamic data

    Dadaview load dynamic data


    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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,652
    Vote Rating
    901
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Ext Premium User
    Join Date
    Mar 2007
    Posts
    89
    Vote Rating
    1
    Luc is on a distinguished road

      0  

    Default It's just a panel with plain old HTML

    It's just a panel with plain old HTML


    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.

    Code:
    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>'
            ]
        }
    });

  4. #4
    Sencha User
    Join Date
    Mar 2012
    Posts
    7
    Vote Rating
    0
    boben is on a distinguished road

      0  

    Default


    Hi Mitchell, Luc

    Thank you all.

    Regards, Boben

Thread Participants: 2