Results 1 to 2 of 2

Thread: List Item Image Changes Onscroll

  1. #1
    Sencha User
    Join Date
    Dec 2010
    Posts
    83

    Default List Item Image Changes Onscroll

    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...
    Code:
    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..
    Code:
    element.style {
    }
    
    Matched CSS Rules
    
    
    .listButton {
    
    
    
    }
    The Dom before...
    Code:
    <div id="ext-record-1" class="listButton" onclick="setContactButton" style="background-image: url(http://localhost/menu/images/contactpressed.png);"></div>
    After...
    Code:
    element.style {
    }
    
    Matched CSS Rules
    
    
    .listButton {
    
    
    
    }
    the Dom
    Code:
    <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...

    Code:
    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
    Attached Images Attached Images

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,448
    Answers
    3997

    Default

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

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •