我已经设置了一个XTemplate,根据它们的类型显示不同列表项的不同样式。我还想为每种不同的类型提供不同的透露按钮。我可以使用以下方法将所有公开按钮设置为自定义图像:
.x-list-item .x-list-disclosure {
overflow: visible;
-webkit-mask: 0 0 url(path/to/image) no-repeat;
}
但是我找不到改变个人披露按钮的方法。我尝试在XTemplate中定义一个自定义类,即:
var solutiontpl = new Ext.XTemplate (
"</pre>",
"<div class = 'solution-container'>",
"<div class = 'list-item-title'>",
'<tpl if = "type == \'p\'">',
"{title}<span class = 'solution-rating-text'>{rating}</span>",
"<span class = 'partner-icon'></span>",
'</tpl>',
'<tpl if = "type == \'a\'">',
"{title}<span class = 'solution-rating-text'>{rating}</span>",
'</tpl>',
'<tpl if = "type == \'s\'">',
"{title}<span class = 'solution-rating-text'>{rating}</span>",
'</tpl>',
"</div>",
"</div>",
"<pre>"
);
并尝试使用“.solution-container .x-list-item .x-list-disclosure”来设置披露按钮无效。我怎么能这样做?
答案 0 :(得分:0)
.solution-container .x-list-item .x-list-disclosure
将无效,因为类.solution-container
的元素实际上是具有.x-list-item
类的元素的子元素。
以下是DOM的样子:
<div class="x-list-item ">
<div class="x-list-item-body">
<div class="solution-container">
....
.... your itemTpl here
....
</div>
</div>
<div class="x-list-disclosure"></div>
</div>
要做到正确,您应该将ID设置为Ext.List
配置
(Sencha Touch 1.1):
var myList = new Ext.extend(Ext.List, {
id: 'SpecialDisclosureList',
store: MyStore,
itemTpl: '<div> ... tpl ... </div>',
onItemDisclosure: true
});
(Sencha Touch 2):
Ext.create('Ext.List', {
id : 'SpecialDisclosureList',
itemTpl: '<div> ... tpl ... </div>',
store: MyStore
onItemDisclosure: true
});
将ID设置为Ext.List
后,以下css样式将起作用:
#SpecialDisclosureList.x-list .x-list-disclosure {
overflow: visible;
-webkit-mask: 0 0 url(path/to/image) no-repeat;
}