Sencha Touch: Componente su DataView che assomiglia ad Elenco intestazione gruppo

Question

Sto usando una vista Ext.dataview.DataView. Voglio aggiungere un componente a questo dataview che assomigli alle intestazioni di gruppo da un Ext.dataview.List per mantenere il design coerente. Voglio solo applicare questo componente una volta in testa (quindi in pratica c'è un solo gruppo). Cambiare la vista in una lista non è un'opzione perché la sua complessità aprirebbe molti più nuovi problemi.

Quello che ho già provato è stato aggiungere un pannello e applicare la classe x-list-header, ma questo non ha funzionato. Quale sarebbe il modo più semplice per rendere un componente simile alle intestazioni di gruppo di un elenco?

Ext.define('app.view.myDataView', { 
    extend: 'Ext.dataview.DataView', 

    xtype: 'mydataview', 

    requires: [ 
     'app.view.myItem', 
     'Ext.dataview.List' 
    ], 

    config: { 
     title: "myDataView", 
     cls: 'myDataView', 
     defaultType: 'myitem', 
     grouped: true, 
     store: 'myStore', 
     useComponents: true, 
     disableSelection: true, 
     deferEmptyText: false, 
     itemCls: 'myItem', 

     items: [ 
      { 
       xtype: 'toolbar', 
       layout: 'vbox', 
       docked: 'top', 
       cls: 'myToolbar', 
       items: [ 
        { 
         // some toolbar items 
        } 
       ] 
      }, 

      { 
       xtype: 'component', 
       cls: 'x-list-header', 
       html: 'this is a test' 
      } 
      /*{ 
       xtype:'panel', 
       scrollDock:'top', 
       docked:'top', 
       tpl: new Ext.XTemplate ('<div class="x-list-header-wrap x-list-header">this is a test</div>'), 
       height:60 
      },*/ 

     ] 
    } 
}); 

Grazie in anticipo!

Answer 1

L'approccio è ok. Ma è necessario il seguente

<div class="x-container x-list ..." id="ext-container-13"> 
    <div class="x-inner" id="ext-element-95"> 
     <div class="x-innerhtml x-list-header" id="ext-element-125"> 
      your content goes here 
     </div> 
    </div> 
</div> 

Usa:

{ 
    xtype: 'container', 
    cls: 'x-list', 
    styleHtmlContent: true, 
    styleHtmlCls: 'x-list-header', 
}