Results 1 to 2 of 2

Thread: How to add a CSS cls dynamically to an item in a DataView

  1. #1
    Sencha User
    Join Date
    Dec 2007
    Posts
    84
    Answers
    9
    Vote Rating
    6
      0  

    Default Answered: How to add a CSS cls dynamically to an item in a DataView

    I would like to add a class to an item in a DataView when the user taps the item (and remove a class from all of the others). In the tap event, I have access to the DataView and the index of the item that was tapped. According to the documentation, I can call the getViewItems() method of DataView to get the list of items, then use the index to get at the item I want to add the class to. The document states that getViewItems() returns a list of Ext.dom.Element objects (if you are not using components which I am not). However, when I log the tapped item to the console it looks like this:
    Code:
    <div class=?"x-dataview-item x-item-pressed" id=?"ext-element-203">?
    <div class=?"tablet-unit-data">?
    <span class=?"tablet-unit-label">?Chatt CT 1?</span>?
    <span class=?"tablet-unit-load">?54?</span>?
    <span class=?"tablet-unit-outage">?No?</span>?
    </div>?
    </div>

    And when I try to call a method on it, such as addCls() I get the following error:

    Code:
    TypeError: 'undefined' is not a function (evaluating 'items[index].addCls('tablet-unit-data-selected')')
    Has something changed in Touch 2.2 that I am not aware of or am I just going about this wrong? Thanks for your help.

  2. I guess I'm so used to having a Sencha component/method to call I forgot about simple dom navigation and modification. In the itemtap event listener function:

    Code:
    dataview.getViewItems()[index].firstChild.className = 'my-selected-class';

  3. #2
    Sencha User
    Join Date
    Dec 2007
    Posts
    84
    Answers
    9
    Vote Rating
    6
      0  

    Default

    I guess I'm so used to having a Sencha component/method to call I forgot about simple dom navigation and modification. In the itemtap event listener function:

    Code:
    dataview.getViewItems()[index].firstChild.className = 'my-selected-class';

Posting Permissions

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