css - sencha touch 2 のリストでグループ化された見出しの背景色を変更するには?

Question

2 つのグループのリストがあります。リスト内のグループに与えられた見出しのデフォルトの背景色をオーバーライドしたいと考えています。sencha touch 2 のリストでグループ化された見出しの背景色を変更するには?

Answer 1

独自のクラスをリストに追加し、クロム開発者ツールを使用してヘッダーのスタイルを定義するクラス名を見つけることで、これを簡単に行うことができます。

次のように cls をリストに追加します

{
    xtype: 'list',
    itemTpl: '<div class="contact2"><strong>{firstName}</strong> {lastName}</div>',
    disclosure: true,
    grouped: true,           
    cls:'customHeader',
    store: store
}

次の CSS スタイルを追加します。

.customHeader .x-list-header {
    background-color: red;
    background-image: none;
    border-color: red;
    color: beige;
}

このSencha Fiddle、JSFiddleのモデル値に基づいてヘッダーの色を変更するには、アイデアが得られるかもしれません。