Zeichnung von Html-Tabellen auf einer Tafel?

Wie kann ich das erzeugen einer regulären html - <table> auf einem Panel in Sencha Touch 2?

Die Daten jeder Zeile werden könnten, aus einem Geschäft. Es ist nicht sehr "Mobil" wie eine Liste, aber ich würde gerne noch ein paar detail-Panels auf meinem tablet-app enthält mehrere Abschnitte wie dieser:

header #1 
<Tabelle> 
<tr><td>ein</td>td>zwei</td></tr> 
<tr><td>foo</td>td>bar</td></tr> 
</table> 

header #2 
<Tabelle> 
<tr><td>abc</td>td>xyz</td></tr> 
<tr><td>Katze</td>td>Hund</td></tr> 
</table>

Basic Panel-definition sollte wie folgt Aussehen:

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">'
                }],
            }
        }]
})
InformationsquelleAutor | 2012-02-22
  1. 9

    Die einfachste Möglichkeit wäre, einfach eine Ext.Komponente und geben Sie die tpl Konfiguration. Dann können Sie die Daten Konfiguration zum aktualisieren der Daten in dieser Komponente.

    Ist hier ein Beispiel.

    Erstens, erstellen Sie Ihre eigene Komponente erweitert container (weil Sie wahrscheinlich wollen, dass es Scrollbar, und nur Container Scrollbar) und dann geben wir es ein tpl. Diese tpl verwenden XTemplate, um eine Schleife durch die Daten, die Sie geben, um dynamisch erstellen Sie die Tabelle für Sie.

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

    Nun, in Ihrer Anwendung können Sie auf die Komponente und geben Sie es einige fake-Daten - etwa 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);
    }
});
    • Dies hat mich gerettet Stunden hantieren! Danke!!!
    • Vielen Dank für diese Antwort, es ist genau was ich brauche für meine app. Wenn ich das benutz TableComponent in einer MVC-Struktur, wo müsste ich die Datei und wie lade ich die Klasse?
    InformationsquelleAutor rdougan
Schreibe einen Kommentar