Sencha Touch: Component on DataView that looks like List Group Header

Question

I'm using a Ext.dataview.DataView view. I want to add a component to this dataview that looks like the grouper headers from a Ext.dataview.List to keep the design consistent. I only want to apply this component once on the head (so basically there is only one group). Changing the view to a list is not an option because it's complexity would open up much more new problems.

What I already tried was to add a panel and applied the x-list-header class, but this didn't worked out. What would be the easiest way to make a component look like the group headers of a list?

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
            },*/

        ]
    }
});

Thanks in advance!

Answer 1

The approach is ok. But you need the following

<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>

Use:

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