パネルにHTMLテーブルを描画しますか？

Question

Sencha Touch 2のパネルで通常のhtmlジェネラコディセタグコードを生成するにはどうすればよいですか？

各行のデータはストアからのものである可能性があります。リストのように「モバイル」ではありませんが、タブレットアプリのパネルに次のようなセクションをいくつか含めたいと思います。 ジェネラコディセタグプレ

基本的なパネル定義は次のようになります： ジェネラコディセタグプレ

Answer 1

最も簡単な方法は単にext.componentを作成し、それを TPL 設定。その後、データ構成を使用してデータを更新するその成分で。

ここは例です。

最初に、コンテナを拡張する独自のコンポーネントを作成します（あなたはおそらくスクロールすることができ、コンテナのみがスクロールすることができます）そしてそれを 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);
    }
});

.