¿Dibujando tablas Html en un Panel?

¿Cómo puedo generar un html

regular en un Panel en Sencha Touch 2?

Los datos de cada fila podrían ser de una tienda. No es muy “móvil” como una lista, pero me gustaría tener algunos detalles. Los paneles en mi aplicación de tableta contienen varias secciones como esta:

 encabezado # 1
 
  
td> dos td> barra
one
foo
encabezado # 2 abc td> xyz cat td> perro

La definición básica del Panel debería verse más o menos así:

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

La manera más fácil sería simplemente crear un Ext.Component y darle la configuración tpl . Luego puede usar la configuración de datos para actualizar los datos en ese componente.

Aquí hay un ejemplo.

En primer lugar, cree su propio componente que extienda el contenedor (porque probablemente querrá que se pueda desplazar, y solo los contenedores sean desplazables) y luego dele un tpl . Este tpl usará XTemplate para recorrer los datos que proporciones para crear dinámicamente la tabla por ti.

 Ext.define('TableComponent', { extend: 'Ext.Container', config: { tpl: Ext.create('Ext.XTemplate', '', '
{title}
', '', '', '', '', '', '', '', '', '
{html}
', '
' ) } });

Ahora, dentro de su aplicación puede usar ese componente y darle algunos datos falsos, como por ejemplo:

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