ListPaging loadMore Component is added to last ListItem in Sencha Touch 2.1

[rutzmic]

There is a potential bug when using the ListPaging-Plugin together with the new Touch 2.1 List.
It seems the LoadMoreComp is added to the last ListItem and not as last child directly to the list.

The resulting DOM looks basically like this in a Touch 2.1 List with ListPaging:

<div class="x-list-normal">
   ......
       <div class="x-list-item" >
           .... 
       </div>
        <div class="x-list-item" >
           .... 
       </div>
        <div class="x-list-item x-list-item-last" >
           <div class="x-dock-body">....</div> 
           <div class="x-list-paging"></div>
       </div>
   .....
</div>

In my opinion the "x-list-paging" should not be withing "x-list-item-last" as it makes it extremly hard to Style the ListPaging Component

[mitchellsimoens]

The way things are architected, we use the list item and just hide/show the list paging component. Just like when a list is grouped, the headers are within the list item. For styling, you shouldn't use the x-list-item element as it may have the header or list paging, you should use the x-dock-body element and you can use CSS to scope to the x-list-item-last like:

.x-list-item .x-dock-body {
    background-color: blue;
}

.x-list-item-last .x-dock-body {
    background-color: red;
}

[rutzmic]

Works, Thank you!