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 中不可见