1. #1
    Sencha User
    Join Date
    Dec 2007
    Posts
    79
    Vote Rating
    2
    Answers
    8
    sl5337 is on a distinguished road

      0  

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

    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
    79
    Vote Rating
    2
    Answers
    8
    sl5337 is on a distinguished road

      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';