Рисование HTML-таблиц на панели? - PullRequest
Новая
       5

Рисование HTML-таблиц на панели?

4 голосов
/ 22 февраля 2012

Как создать обычный HTML-код <table> на панели в Sencha Touch 2?

Данные для каждой строки могут быть из магазина.Он не очень «мобильный», как List, но мне бы хотелось, чтобы в моем приложении для планшетов было несколько деталей. Панели содержат несколько таких разделов:

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">'
                }],
            }
        }]
})

1 Ответ

9 голосов
/ 23 февраля 2012

Самый простой способ - просто создать Ext.Component и присвоить ему конфигурацию tpl .Затем вы можете использовать конфигурацию data для обновления данных в этом компоненте.

Вот пример.

Во-первых, создайте свой собственный компонент, который расширяет контейнер (потому что вывероятно, захочет прокрутить его, и прокрутить будут только контейнеры), а затем присвоить ему tpl .Этот tpl будет использовать XTemplate для циклического перебора данных, которые вы предоставляете, для динамического создания таблицы для вас. 

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

Теперь внутри вашего приложения вы можете использовать этот компонент и дать ему некоторые поддельные данные - например, так: 

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