Sencha Touch provides one of the best User Interface frameworks for building mobile web applications. It is relatively simple to design mobile web forms using it but developers do come across a few hurdles while trying to customize it according to their requirements.
A classic case is when developers want to change the colour of a specific list-item. This can be solved using the following three steps.
Sencha Touchはウェブアプリを開発するために、最も質の高いユーザーインターフェースフレームワークの1つを提供しています。これを使用してモバイルウェブフォームをデザインすることは比較的シンプルなのですが、開発者は指示に従ってそれをカスタマイズさせようとする間、いくつかのハードルを乗り越える必要があります。
古典的なケースとして、開発者が特定のアイテムリストの色を変更したいと思うときがあるでしょう。これは次の3つのステップで解決することができます。

How to Customize your List-item using Sencha Touch.
Click To Tweet

1. Create your own styles and override sencha touch list-item css

myList {
}
.myList .x-list-item {
    position:relative;
    color:#333;
    padding:0em 0em;
    min-height:2.1em;
    display:-webkit-box;
    display:box;
    border-top:1px solid #c8c8c8

}
.myList .x-list-item .brands-row-spon {
    width: 100%;
    background-color: #D8D8D8;
    padding:0.5em 0.8em;
    min-height:2.6em;
}
.myList .x-list-item .brands-row {
    width: 100%;
    min-height:2.6em;
    padding:0.5em 0.8em;
}

2. Add cls property of sencha touch list item

new Ext.List({
                                    fullscreen: true,
                                    id:'xList',
                                    itemTpl :xListTpl,
                                    cls:'myList',
                                    grouped :true,
store:  new Ext.data.Store({
model:'yourModel'
})
})

3. Add a condition to change the colour of a specific list item in your list itemTpl

var  xListTpl = new Ext.XTemplate(
                                '',
                                '',
                                '
',
                                '',
                                '',
                                '
',
                                '',
''
                                );

In case you have any more questions, please feel free to reach out to us at support@shephertz.com

1. 自分のスタイルを作成して、sencha touch list-item cssをオーバーライド

myList {
}
.myList .x-list-item {
    position:relative;
    color:#333;
    padding:0em 0em;
    min-height:2.1em;
    display:-webkit-box;
    display:box;
    border-top:1px solid #c8c8c8

}
.myList .x-list-item .brands-row-spon {
    width: 100%;
    background-color: #D8D8D8;
    padding:0.5em 0.8em;
    min-height:2.6em;
}
.myList .x-list-item .brands-row {
    width: 100%;
    min-height:2.6em;
    padding:0.5em 0.8em;
}

2. sencha touch list itemのclsプロパティを追加

new Ext.List({
                                    fullscreen: true,
                                    id:'xList',
                                    itemTpl :xListTpl,
                                    cls:'myList',
                                    grouped :true,
store:  new Ext.data.Store({
model:'yourModel'
})
})

3. list itemTplで特定のアイテムリストの色に変化させるためのコンディションを追加

var  xListTpl = new Ext.XTemplate(
                                '',
                                '',
                                '
',
                                '',
                                '',
                                '
',
                                '',
''
                                );

質問等ございましたら、お気軽にsupport@shephertz.comまでご連絡下さい。