如何在Sencha中为各个列表项设置自定义公开按钮?

时间:2012-11-19 04:47:46

标签: sencha-touch

我已经设置了一个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”来设置披露按钮无效。我怎么能这样做?

1 个答案:

答案 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;
}