3

アプリケーション内にリストがありますが、表示される各リストの背景色を、各項目全体で同じ色ではなく、異なるものにすることは可能でしょうか?

テンプレートを作成しましたが、それぞれの背景の色が変わると便利です。

ありがとう

編集：「Ext.dataview.component.DataItem」/「DataView」を介して同じリストも作成しました。これを個別に制御する方が簡単な場合は、それぞれを作成して設定するプロセスに干渉することを検討しているため、優れています背景、それが可能であれば。

4

4 に答える 4

2

単純に XTemplate でそれを試みることができます:

var tpl = new Ext.XTemplate(
    '<p>Name: {name}</p>',
    '<p>Company: {[values.company.toUpperCase() + ", " + values.title]}</p>',
    '<p>Kids: ',
    '<tpl for="kids">',
        '<div class="{[xindex % 2 === 0 ? "even" : "odd"]}">',
        '{name}',
        '</div>',
    '</tpl></p>'
);

彼らの説明を見て、面白いものが見つかるかもしれません: http://docs.sencha.com/touch/2-0/#!/api/Ext.XTemplate

于 2012-05-15T14:42:32.870 に答える
1

Ext.query('class').up().addCls('backgroundClass'); で多くのバリアントを見てきました。ハック、それは私には完全に理にかなっていますが、私の質問はいつ人々がこれを呼んでいるのですか? DOM がまだ存在しないように見えるので、'paint' に入れることはできません.. どこで / いつ Ext.get(..) 呼び出しを実行していますか?

于 2012-11-01T20:12:45.220 に答える
0

私もこれを探していましたが、xlistの個々のアイテムにアクセスする方法を見つけるのに苦労しました...

これは私が最終的にそれをした方法です：

  • itemTplで、モデルのプロパティ'id'を使用して、<div>にクラスを追加します。

    itemTpl：'<div class = "my_list_item_{id}">...コンテンツ...</div>'

  • トリッキーな部分は、アイテム領域全体の背景色を設定する場合は、itemTpl<div>をラップしているクラス'x-item-label'を使用して<div>にアクセスする必要があることです。これが私がそれをした方法です（例として最初の項目のために）：

    Ext.select（'。my_list_item_1'）。first（）。up（'div.x-list-item-label'）。addCls（'background_item'）;

ここで、「background_item」はCSSスタイルであり、背景色を定義します。

（（少なくとも私が知っている）「itemTpl」構成でアイテムのインデックスカウントを取得する方法がないため、モデル/ストアの「id」プロパティを自動化するために使用する必要がありました。ストアでfiltering/sorting / ...を実行すると、このプロパティは並べ替えられなくなります。したがって、リストに表示されている順序を「id」プロパティにリンクする場合は、「Ext.StoreManager.get」のようにする必要があります。 （'MyStore'）。getAt（indexInList）.get（'id'））

お役に立てれば...

于 2012-04-16T10:06:26.330 に答える
0

Sencha Touch 2.2.1以降では、stripedパラメーターを使用することも可能です (詳細はこちら)。x-list-item-oddリストの奇数項目にクラスを追加します。

于 2013-07-04T11:50:28.213 に答える