Sencha Touch provides a few ways to do lists, the one I most often turn to is the “simple” list.  This component has an itemTpl config where you create your markup and when you attach a store to it the template gets repeated for each item producing the HTML.

For example this code:

sencha list code 1

Produces this view:

sencha list 1

Note that the framework implements the clickable disclosure icon (added automatically because of the onItemDisclosure config) as a DIV with a CSS3 :before pseudo element for the visuals.

The problem in this layout though is that it’s absolutely positioned at the top right of each list item. For this design it is supposed to be next to the address (outlined in red for debugging).

One solution is to remove it by settting the onItemDisclosure property to false and then manually add a DIV into the address block and use the existing Sencha CSS class on it like:
<div class="x-list-disclosure"></div>
But wait that didn’t work! It looks the same, what’s the deal?

At first I thought maybe I made a mistake removing the original because the disclosure arrow was in the exact same position but no it’s the new one I just manually added. After reading the 4th reference link below it becomes clear, the absolutely positioned disclosure icon moves up to the 1st relatively positioned element. In this case the list item.

As the blog post by Chris Coyier points out this may be a CSS “Ah-ha!” moment for you… “relative positioning gives you the control to absolutely position children elements inside of it”.

OK so the solution is then easy — set the address DIV to position: relative, i.e.

.x-list-item .a-openhouse-address {
    position: relative;
}

That’s it! Now the icon stays inside the address div and because we used the Sencha class it still responds to touch events as designed.

sencha-disclosure-correct

References:

  1. http://docs.sencha.com/touch/#!/guide/list
  2. http://docs.sencha.com/touch/#!/api/Ext.dataview.List
  3. http://docs.sencha.com/touch/#!/api/Ext.dataview.component.SimpleListItem
  4. http://css-tricks.com/absolute-positioning-inside-relative-positioning/