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

Question

Sencha Touch 2のパネルで、標準のhtml <テーブルを生成するにはどうすればよいですか？各行のデータはストアからのものである可能性があります。これは、リストのような非常に「モバイル」ではないのですが、私は私のタブレットアプリにいくつかの詳細パネルを持っているしたいのですが、このようないくつかのセクション含まれています

 
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> 

を基本的なパネルの定義は次のようになります。

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

Answer 1

最も簡単な方法は、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); 
    } 
}); 

Answer 2

 
Ext.define('Route.view.Table', { 
    extend: 'Ext.Container', 
    xtype:'table', 
    config: { 
     tpl: Ext.create('Ext.XTemplate', 
      '', 
      ' ', 
      '  ', 
      '   ', 
      '    ', 
      '     {head}', 
      '    ', 
      '   ', 
      '  ', 
      '  ', 
      '   ', 
      '    ', 
      '     ', 
      '      {html}', 
      '     ', 
      '    ', 
      '   ', 
      '  ', 
      ' ', 
      '' 
     ), 
     data: [ 
      { 
       header: [ 
        {head:'Name'}, 
        {head:'Email'}, 
        {head:'Number'} 
       ], 
       rows: [ 
        { 
         columns: [ 
          { html: 'Kelvin Isaiah' }, 
          { html: 'Kelvin6600@gmail.com' }, 
          { html: '0720241648' } 
         ] 
        }, 
        { 
         columns: [ 
          { html: 'Laban Bwire' }, 
          { html: 'laban.bwire@gmail.com' }, 
          { html: '0724567852' } 
         ] 
        }, 
        { 
         columns: [ 
          { html: 'John Doe' }, 
          { html: 'john.doe@gmail.com' }, 
          { html: '0724567854' } 
         ] 
        } 
       ] 
      } 
     ] 
    } 
});