Javascript Sencha Touch：数据视图上类似列表组标题的组件

我使用的是Ext.dataview.dataview视图。我想在这个数据视图中添加一个组件，它看起来像Ext.dataview.List中的grouper头文件，以保持设计的一致性。我只想在头部应用此组件一次（因此基本上只有一个组）。将视图更改为列表不是一个选项，因为它的复杂性会带来更多新问题

我已经尝试过添加一个面板并应用x-list-header类，但没有成功。使组件看起来像列表的组标题的最简单方法是什么

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

        ]
    }
});

Ext.define（'app.view.myDataView'{
扩展：“Ext.dataview.dataview”，
xtype:“mydataview”，
要求：[
'app.view.myItem'，
“Ext.dataview.List”
],
配置：{
标题：“myDataView”，
cls:“myDataView”，
defaultType:“myitem”，
对,，
商店：“myStore”，
是的，
disableSelection:正确，
deferEmptyText:false，
itemCls:'myItem'，
项目：[
{
xtype:'工具栏'，
布局：“vbox”，
停靠：“顶部”，
cls:“我的工具栏”，
项目：[
{
//一些工具栏项目
}
]
},
{
xtype:'组件'，
cls:'x-list-header'，
html:“这是一个测试”
}
/*{
xtype:“面板”，
scrollDock:“顶部”，
停靠：'顶部'，
tpl:new Ext.XTemplate（“这是一个测试”），
身高：60
},*/
]
}
});

---

提前谢谢

这个方法还可以。但你需要以下几点

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

---

1.如果您添加一些sketch2，理解起来就会简单得多。询问它会给你更多相关的回答

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