List Item Image Changes Onscroll

[Johnbran]

Hello Everyone,

I am creating a list box that has an image as a button. The problem is when a user scroll a pressed button out of view it reverts back to the orginal unpressed image defined in css. No code so far can change the image to the pressed state image once it has been out of view. Does anyone have an idea?


The code to change the image when pressed...

Ext.get('ext-record-1').setStyle('background-image', 'url(images/contactpressed.png)');

'ext-record-1' is the id of the div in the listitem with the background set to 'contactpressed.png'.
debug console before scroll..

element.style {
background-image:url(http://localhost/menu/images/contactpressed.png);
}

Matched CSS Rules


.listButton {


position: absolute;
top: 0px;
left: 0px;
width: 46px;
height: 46px;
background-image:url(images/contactnotpressed.png);
background-position: top;
}

The Dom before...

<div id="ext-record-1" class="listButton" onclick="setContactButton" style="background-image: url(http://localhost/menu/images/contactpressed.png);"></div>

After...

element.style {
}

Matched CSS Rules


.listButton {


position: absolute;
top: 0px;
left: 0px;
width: 46px;
height: 46px;
background-image:url(images/contactnotpressed.png);
background-position: top;
}

the Dom

<div id="ext-record-1" class="listButton" onclick="setContactButton"></div>

Again, the Dom refuses to change the background image after it has gone out of view and back in.
if I run the above code in chromes' debugger it returns this as the dom's style...

dom: div#ext-record-1.listButton

...
style: CSSStyleDeclaration
0: "background-image"
alignmentBaseline: ""
background: "url(http://localhost/menu/images/contactpressed.png)"
backgroundAttachment: ""
backgroundClip: ""
backgroundColor: ""
backgroundImage: "url(http://localhost/menu/images/contactpressed.png)"
backgroundOrigin: ""
...
cssText: "background-image: url(http://localhost/menu/images/contactpressed.png);"

IMG_4140.PNG

[mitchellsimoens]

You should change a field in the record and in your itemTpl handle that field value to show different images.