title: Sencha Touch 2 List layout with Toolbar
body: <p>I have a list I am using with a toolbar docked to the top. This list also contains an indexBar. The toolbar appears to be pushing the list down. Therefore the indexBar is not vertically aligned properly, and when I scroll down the list and get to the last item, it does not show properly. Does anyone know how to lay this out properly so the toolbar doesn't push the list down? Here's my code:</p>
  
  <pre><code>app.customerList = Ext.define('CustomerList', {
      constructor: function() {        
          this.listComponent = Ext.create('Ext.List', {
              itemTpl: '&lt;div class="contact"&gt;{first_name} &lt;strong&gt;{last_name}&lt;/strong&gt;&lt;/div&gt;',
              store: customerListStore,
              id: 'customer_list',
              grouped: true,
              indexBar: true,
              listeners: {
                  itemtap: {
                      fn: function (list, index, item, evt) {
  
                      },
                      element: 'element'
                  }
              }
          });
  
          this.listWrapper = Ext.create('Ext.Panel', {
              fullscreen: true,
              layout: 'fit',
              items: [
                  {
                      xtype: 'toolbar',
                      docked: 'top',
                      title: 'Customers',
                      items: [
                          {
                              xtype: 'button',
                              text: 'Home',
                              ui: 'back',
                              listeners: {
                                  tap: {
                                      fn: function() {
  
                                      },
                                      element: 'element'
                                  }
                              }                            
                          }
                      ]
                  },
                  this.listComponent
              ]
          });
  
      }
  });
  </code></pre>
  
  <p>As you can see I am getting my data from a store. I was able to fix this on an iPhone by giving the list a css rule of bottom: 38px, but I know this is a hack so I would rather not do it this way. I've watched the Sencha Video on lists and they talk about this exact dilemma. Their solution is to put the list in a wrapper with the toolbar docked in the wrapper. So I did that but I am still unable to get it to layout the way it should.</p>