SenchaTouch 2 を使用して、各リスト行に異なる色を設定する方法を教えてください。
SenchaTouch フィドルの例:
SenchaTouch 2 を使用して、各リスト行に異なる色を設定する方法を教えてください。
SenchaTouch フィドルの例:
次のようなcssを使用して、各行に特定の色を追加できます
.x-list-item:nth-child(1n){
/* First Row */
background-color: Green;
}
.x-list-item:nth-child(2n){
/* Second Row */
background-color: Blue;
}
.x-list-item:nth-child(3n){
/* third Row */
background-color: Yellow;
}
css ファイルを作成し、任意の名前を付けます。そのcssファイル内に私の回答からコードを貼り付けます。index.html でその css ファイルを参照します。または、css コードの周りにスタイル タグを配置して、index.html の先頭に直接配置することもできます。
<link rel="stylesheet" type="text/css" href="touch2/resources/css/apple.css">
<link rel="stylesheet" type="text/css" href="newCssCode.css">
@ボーク
cssで「x-list-item-label」のパディングを0になるように変更
次に、テンプレート内の項目の一種の新しいコンテナーとなる新しい div を作成し、この div の背景色を変更します。
データに「bgcolor」フィールドを追加して、itemTpl を変更できます。
items: [ {
xtype: 'list',
itemTpl: '<div style="height:35px; background: {bgcolor};">{title}</div>',
data: [
{ title: 'Red BackGround', bgcolor : 'red' } // same thing for all the other items