Displaying data lists using Sencha Touch

In one of our more recent projects using Sencha Touch, we ran into some problems using the List element. We were trying to do something that may have been unconventional, but we wanted a specific user interface. We were placing a docked header and footer on the screen, then adding a list component that had a text disclaimer, a page footer, and a copyright notice which were each separate elements appended to the bottom.

The layout we wanted to achieve using a list with additional elements in the viewport

We attempted numerous methods of instantiating the list and the additional components, but we were not able to get them to display in the order we wanted. The list would not show up, or when we got the list to display, the disclaimer, copyright notice, and page footer would either show up in the middle of the displayed list, or they would appeared jumbled and in the wrong order.
The code sample for the structure of the page is:

Ext.define("MyApp.view.ListContainer", {
  extend: 'Ext.Container',
  requires: [

  config: {
      // we want layout to be of type vbox
      layout: {type:'vbox', pack:'start'},  
          // header logo	
          {xtype: 'header', docked:'top'},
          // titlebar that tells what records are being displayed
          {xtype:'titlebar', docked:'top', 
              title:'Loading Results', 
          }, // end of titlebar

          // Load list as a list
          {xtype: 'listView'},
          // Instantiate disclaimer after list
          {xtype: 'disclaimer', cls: 'myAppDisclaimer'},
          // Instantiate slogan and logo footer
          {xtype: 'footerPage',},
          // Instantiate footer with copyright notices
          {xtype: 'copyright',},
          // Footer with back button, contact us button and home button
          {xtype:'footer', docked: 'bottom'},
      ]} // end config and its items

Here is the List extended to use our store and itemTpl:

Ext.define("MyApp.view.MyList", {
  extend: 'Ext.dataview.List',
  requires: [

  config: {
id: 'myList',
store: 'MyStore',
cls: 'myList',
// parent is scrollable

itemTpl: new Ext.XTemplate(
  '<img src="{thumbnail}" />',
  '<h1>{FullStreetAddress}</h1>' ,
  '<p>{City}, {State}</p>' 
}) // end XTemplate
},  // end config

Finally, we decided to create the list on our own using a container and building a table of items, and then appending the disclaimer, page footer and copyright notice. It was a bit of a hack and not as simple and elegant as using the List element, but it allowed us to achieve the desired effect. The following code example creates the xtype for the tableView. We replaced {xtype:listView} with {xtype:tableView} in the ListContainer view defined in the above code example.

Ext.define("MyApp.view.MyTable", {
  // Extend container, not dataview, as we to setup a vbox
  // for the listings, and then put the listings inside the vbox
  // using the xtype dataview
  extend: 'Ext.Container',
  requires: [

  config: {
layout: 'vbox',
cls: 'myview',

// Use items here to instantiate table with divs using xtype dataview
items: [
  id: 'myTable',
  xtype: 'dataview',
   scrollable: false,
  store: 'myStore',
              emptyText: 'Please return to the Home page and start a new search.',
  cls: 'myTable',
              itemSelector: 'div.tableRow',
  itemTpl: new Ext.XTemplate(
    '<div class="tableRow">' +
    //  thumbnail image
    '<div class="tableThumbnail"><img src="{thumbnail}" /> </div>' +
    //  details
    '<div class="tableSummary">' +
    '<h1>{FullStreetAddress}</h1>' +
    '<p>{City}, {State}</p>' +
    '</div>' +
     '</div>'  //close outer div

  ) // end XTemplate
  } //end xtype dataview
] //end items
 },  // end config

So what did we learn?