-1

タイプに応じて、さまざまなリスト項目のさまざまなスタイルを表示するように 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」を使用して、開示ボタンを無駄に設定しようとしました。どうすればこれを行うことができますか？

4

1 に答える 1

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
});

(煎茶タッチ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;
}
于 2012-11-19T10:03:51.783 に答える