Drawing Html tables on a Panel?

Question

How can I generate a regular html <table> on a Panel in Sencha Touch 2?

The data for each row could be from a store. It's not very "mobile" like a List, but I'd like to have a few detail Panels on my tablet app contain several sections like this:

header #1
<table>
 <tr><td>one</td>td>two</td></tr>
 <tr><td>foo</td>td>bar</td></tr>
</table>

header #2
<table>
 <tr><td>abc</td>td>xyz</td></tr>
 <tr><td>cat</td>td>dog</td></tr>
</table>

The basic Panel definition should look something like this:

Ext.define('Kitchensink.view.HtmlTable', {
    extend: 'Ext.tab.Panel',
    config: {
        activeItem: 1,
        tabBar: {
            docked: 'top',
            layout: {
                pack: 'center'
            }
        },
        items: [{
                title: 'Tab 1',
                items: [{
                    html: '<h2 class="section">Section #1</h2>'
                }, {
                    html: '&lt;table class="style1">'
                }],
            }, {
                title: 'Tab 2',
                items: [{
                    html: '<h2 class="section">Section #3</h2>'
                }, {
                    html: '&lt;table class="style1">'
                }],
            }
        }]
})

Answer 1

The easiest way would be simply create a Ext.Component and give it the tpl configuration. Then you can use the data configuration to update the data in that component.

Here is an example.

Firstly, create your own component which extends container (because you will probably want it scrollable, and only containers are scrollable) and then give it a tpl. This tpl will use XTemplate to loop through the data you give to dynamically create the table for you.

Ext.define('TableComponent', {
    extend: 'Ext.Container',

    config: {
        tpl: Ext.create('Ext.XTemplate',
            '<tpl for=".">',
                '<div>{title}</div>',
                '<table>',
                    '<tpl for="rows">',
                    '<tr>',
                        '<tpl for="columns">',
                        '<td>{html}</td>',
                        '</tpl>',
                    '</tr>',
                    '</tpl>',
                '</table>',
            '</tpl>'
        )
    }
});

Now, inside your application you can use that component and give it some fake data - like so:

Ext.setup({
    onReady: function() {
        var table = Ext.create('TableComponent', {
            data: [
                {
                    title: 'Header 1',
                    rows: [
                        {
                            columns: [
                                { html: 'column 1' },
                                { html: 'column 2' },
                                { html: 'column 3' }
                            ]
                        },
                        {
                            columns: [
                                { html: 'column 1' },
                                { html: 'column 2' },
                                { html: 'column 3' }
                            ]
                        }
                    ]
                },
                {
                    title: 'Header 2',
                    rows: [
                        {
                            columns: [
                                { html: 'column 1' },
                                { html: 'column 2' },
                                { html: 'column 3' }
                            ]
                        }
                    ]
                }
            ]
        });

        Ext.Viewport.add(table);
    }
});