View Full Version : Carousel Updating innerHTML of nested non-displayed DIVs

22 Jan 2012, 5:11 AM

Seems there was a change in the behavior of the Sencha Touch 2 panel. I have a carousel with 13 items, each with nested divs where I need to update the innerHTML of these nested elements of contentEl.
It looks like that the new carousel only renders current active content (+/- 1) and the other divs are not available or accessible via Ext.get or document.getElementById for me to update.

This makes updating the elements quite cumbersome as I have to hook into the activeitemchange event to only update the elements currently displayed. Is there an easier way to access the innerHTML of these nested divs or somehow force the Carousel to preload all content (like it was in Touch 1).

Help would be much appreciated!

22 Jan 2012, 3:00 PM
Try getting them via Ext.ComponentManager.get that should give you the ref to the item component and you should be able to inject the html using that reference.

22 Jan 2012, 5:30 PM
Hi, thank you for the tip.

Unfortuantely this only seems to work with EXT components and not nested HTML components (e.g. DIV ids).

lets say I have this in my index html:

<div id='bla1'>
<div id="content-1">Want to update this</div>

and it is referenced in the 3rd card in the carousel.. I cannot access it, even with Component Manager. Any other ideas maybe?


23 Jan 2012, 3:48 PM
How are you adding the items? Can you not store a reference to each item, and update the content like that?

Or perhaps you could give each item a Ext.Component#tpl (http://docs.sencha.com/touch/2-0/#!/api/Ext.Component-cfg-tpl) and then on activeitemchange you can use the Ext.Component#setData (http://docs.sencha.com/touch/2-0/#!/api/Ext.Component-method-setData) method to actually update the content of the item.

17 Mar 2012, 10:06 AM
Thanks for your feedback and sorry for the long pause.

How would I do that. I am now trying to upgrade my project to Touch 2 as I have to port my app over to Android 4 - ICS.

I have the DIVS directly in the index.html file and referenced them as contentEl in the different carousel cards (12 all together; so 12 divs).

What I want to do then is update all the innerHTML with a simple loop - but DIVS that are not directly viewed at via the carousel. Others just return null. It looks like that Touch 2 somehow destroys or suppresses DIVS that are out of "focus". They are not even accessible with the standard. document.getElementById.

Any ideas... how would I reference them or could loop through the IDs in Touch 2. Maybe I just use the wrong approach in referencing them all together.

Help is much appreciated!

Jacky Nguyen
17 Mar 2012, 2:52 PM
Retrieve the array of items with 'getInnerItems()' and update them however you want via Component API. For example:

var carousel = Ext.create('Ext.carousel.Carousel', {
items: [...]

// Other part of your code
var carouselItems = carousel.getInnerItems(),
i, ln, item;

for (i = 0, ln = carouselItems.length; i < ln; i++) {
item = carouselItems[i];
item.setHtml("Something else");

As a rule of thumb, don't code with DOM elements and raw DOM API in mind. Use the provided component-level API instead.

17 Mar 2012, 9:47 PM
Thanks for the quick answer. Like this I could at least reference all the main DIV containers.

But is there also an easier way if I just want to update a child DIV?


<DIV id='1'>
<div id='want to update this'></div>


Jacky Nguyen
17 Mar 2012, 10:56 PM
That's what Ext.Element#down() (http://docs.sencha.com/touch/2-0/#!/api/Ext.dom.Element-method-down) is for: