How to Customize your List-item using Sencha Touch

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.

8 How to Customize your List item using Sencha Touch

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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

1
2
3
4
5
6
7
8
9
10
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

1
2
3
4
5
6
7
8
9
10
var  xListTpl = new Ext.XTemplate(
                                '<tpl for=".">',
                                '<tpl if="isSponsored ==&quot;true&quot;"">',
                                '<div class="brands-row-spon">',
                                '</tpl>',
                                '<tpl if="isSponsored !=&quot;true&quot;"">',
                                '<div  class="brands-row">',
                                '</tpl>',
'</tpl>'
                                );

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

twitter How to Customize your List item using Sencha Touchfacebook How to Customize your List item using Sencha Touchgoogle How to Customize your List item using Sencha Touchlinkedin How to Customize your List item using Sencha Touchpinterest How to Customize your List item using Sencha Touchreddit How to Customize your List item using Sencha Touchstumbleupon How to Customize your List item using Sencha Touchtumblr How to Customize your List item using Sencha Touch

Leave a Reply

Your email address will not be published. Required fields are marked *


8 × = forty

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>