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.

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',
  xtype:'listings',
  requires: [
      'MyApp.view.Header',
      'MyApp.view.Footer',
      'MyApp.view.TableView',
      'MyApp.view.Disclaimer'
  ],

  config: {
      // we want layout to be of type vbox
      layout: {type:'vbox', pack:'start'},  
      cls:'page',
      scrollable:true, 
      items:[
          // 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',
  xtype:'listView',
  requires: [
    'MyApp.store.MyStore',
],

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

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',
  xtype:'tableView',
  requires: [
       'MyApp.store.MyStore',
],

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

// 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?

• The List element in Sencha Touch is useful for displaying list of data from a store if you do not have any other elements, or just one, that you want to display in the same container as the list. (One item can be displayed at the bottom of the list using the scrolldock command, but trying to scrolldock multiple elements does not allow for control of the order of display.)
• Building a list using a generic dataview is better and gives you more layout flexibility if you want to display additional items in the same container as the list.