CODEWITHSUNDEEP
cssextjssencha-touchsencha-touch-2
Tejas
Tejas

Reputation: 928

set different background images to Ext.list in sencha touch

I'm working on Sencha touch application.

I have created list view using Ext.list component of sencha touch.

I have set background images for all list item using CSS 

.x-list .x-list-item {
 position: absolute !important;
 left: 0;
 top: 0;
 width: 100%;
 height:20px;
 background: url('../images/list_1.png');
 background-repeat: no-repeat;
 background-size: 97% 98%;
}

Now I want to set different images for different list items. Is this possible?

Upvotes: 0

Views: 1069

Answers (2)

Attila O.
Attila O.

Reputation: 16615

If you are using tpl to generate your list items, simply give your list items a class name, something like:

tpl: '<div class="{bgimage}">This is list item 1.</div>'

then change the bgimage property of the data that you set to the list, something like this should do:

prepareData: function(data, index, record) {
    data.bgimage = "bg-" + index;
}

Then in your CSS/SASS, you can do

.x-list-item.bg-1 {
 background-image: url('../images/list_1.png')
}
.x-list-item.bg-2 {
 background-image: url('../images/list_2.png')
}
…

You could customise this to your needs, but this should get you started.

If you're using list item components (i.e. your list does not have a tpl config but an itemCmp config), just set the cls config on each item to get the same result.

Upvotes: 1

AdamSchuld
AdamSchuld

Reputation: 843

If targeting them using nth-child is not working you might have to go the more cumbersome route and attach a separate class to each list item in the html and then manipulate their background images in the CSS by changing the background property of each individually

Upvotes: 0

Related Questions