Sencha Touch:DataView 上看起来像 List Group Header 的组件

Posted

技术标签:

【中文标题】Sencha Touch:DataView 上看起来像 List Group Header 的组件【英文标题】:Sencha Touch: Component on DataView that looks like List Group Header 【发布时间】:2015-10-21 07:59:36 【问题描述】:

我正在使用 Ext.dataview.DataView 视图。我想向这个数据视图添加一个组件,该组件看起来像 Ext.dataview.List 中的 grouper headers 以保持设计一致。我只想在头部应用一次这个组件(所以基本上只有一组)。将视图更改为列表不是一种选择,因为它的复杂性会带来更多新问题。

我已经尝试过添加一个面板并应用 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
            ,*/

        ]
    
);

提前致谢!

【问题讨论】:

1.如果你添加一些草图会更容易理解 2.在sencha.com/forum上提问,它会给你更多相关的回复 【参考方案1】:

方法没问题。但是您需要以下内容

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

用途:


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

【讨论】:

以上是关于Sencha Touch:DataView 上看起来像 List Group Header 的组件的主要内容,如果未能解决你的问题,请参考以下文章

Sencha Touch:XTemplate 在 DataView 中不可见

如何使 dataview.list 在 Sencha Touch 2 中可见?

Sencha Touch 中不触发滚动事件

如何在 Sencha Touch2 中显示数据视图?

HTML5开发移动web应用——Sencha Touch篇

如何在 Sencha touch 2.1 中创建复杂的数据项?