1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    3
    Vote Rating
    0
    Answers
    1
    baquila is on a distinguished road

      0  

    Default Answered: referencing child element of list item

    Answered: referencing child element of list item


    Ok, I'm sick that I have to ask this but I can't waste anymore time on it. I have a simple list with an 'itemtap' listener. Within each list item I have a hidden div element that I want to show when the list item is clicked. Baby stuff. But I can't figure out how to reference the element within the list item....

    The itemtap function is simply:

    Code:
    function(list, index, element, event) {
            .....do stuff here
    }
    So if each list item is:

    Code:
    <li>
        <h3>Tom Hanks</h3>
        <div class="hiddenDiv">you can't see this</div>
    </li>
    What is the proper way to access that div.hiddenDiv within the itemtap function and show it? I tried things like:

    Ext.DomQuery.select('element.hiddenDiv').show()
    Ext.DomQuery.select('element>.hiddenDiv').show()

    ...and about a million other things. Sorry for such a dumb question, but I'm just sick of wasting time on this. Thanks so much!

  2. Got it! Good grief!!!!

    element.down('.hiddenDiv').setStyle({'display':'block'});

    I'm not even going to ask how to determine if it's visible and then hide it again. Where's jQuery's toggle() when you need it???

  3. #2
    Sencha User
    Join Date
    May 2012
    Posts
    3
    Vote Rating
    0
    Answers
    1
    baquila is on a distinguished road

      0  

    Default


    Ok, so I managed to get a reference to the hidden element (class name is 'hiddenDiv') by using:

    element.down('.hiddenDiv')

    ...within the itemtap function. I used console.log to verify that it was the correct dom element. But I still can't get it to show.

    I've tried:

    element.down('.hiddenDiv').show()
    element.down('.hiddenDiv').setVisibilityMode({Visibility: 1});

    ...when I used getVisibilityMode() on the element, the setVisibilityMode() was working properly and returning anything I set, and yet the element still remains hidden. By the way, I initially hid the element with your basic display:none in my CSS file.

    So I'm just baffled as to how I can get this element to show. Thankfully I've only wasted an entire afternoon on something that should be the most basic showing/hiding a DOM element imaginable. I'm just baffled.

  4. #3
    Sencha User
    Join Date
    May 2012
    Posts
    3
    Vote Rating
    0
    Answers
    1
    baquila is on a distinguished road

      0  

    Default


    Got it! Good grief!!!!

    element.down('.hiddenDiv').setStyle({'display':'block'});

    I'm not even going to ask how to determine if it's visible and then hide it again. Where's jQuery's toggle() when you need it???

  5. #4
    Touch Premium Member Philip Murphy's Avatar
    Join Date
    Oct 2011
    Location
    Dublin, Ireland
    Posts
    27
    Vote Rating
    2
    Philip Murphy is on a distinguished road

      0  

    Default


    I think that this is a bug. It appears crazy to me that the 'setVisible' or 'show' methods don't work here. I just spent the last 2 hours trying to figure out why my element wouldn't show. BTW, I also had set the class's display to none in the associated CSS file. So, Sencha Touch doesn't appear to be able to re-show elements if they were hidden initially via CSS. Thanks for posting this solution as you really saved me from going nuts.

    Would be nice if a Sencha employee could comment on this.

Thread Participants: 1

Tags for this Thread