title: Navigating with a button in sencha touch
body: <p>I am taking my first steps with Sencha touch. The results are just what I am after, getting there however is a struggle to get how sencha is put together. I am slowly figuring it out but sometimes the way the code works is a bit WTF.</p>
  
  <p>I am trying to build a very simple app that does the following.</p>
  
  <p>1) Has three tabs, Search nearby (geo), Quick Keyword Search, Category Search.<br>
  2) Each of the tabs search returns a list of results<br>
  3) Each of the rows are click able to show a bit more information.  </p>
  
  <p>I have figured out the tabs okay I think.</p>
  
  <p>Like so:</p>
  
  <pre><code>Ext.setup({
      tabletStartupScreen: 'tablet_startup.png',
      phoneStartupScreen: 'phone_startup.png',
      icon: 'icon.png',
      glossOnIcon: false,
      onReady: function() {
  
                  var location = new Ext.Container({
              iconCls: 'search', 
              title: 'Location Search',
              items: [new Ext.Component({
                  html: '&lt;img src="images/gfb.gif" /&gt;'
              })]
          });
  
          var quick = new Ext.Container({
              iconCls: 'search', 
              title: 'Quick Search',
              scroll: 'vertical',
              items: [new Ext.Component({
                  html: '&lt;img src="images/gfb.gif" /&gt;'
              })]
          });
  
          var category = new Ext.Component({
              iconCls: 'search', 
              title: 'Category Search',
              html: '&lt;img src="images/gfb.gif" /&gt;&lt;p&gt;Category&lt;/p&gt;'
          });
          var tabpanel = new Ext.TabPanel({
              fullscreen: true,
              tabBar: {
                  dock: 'bottom',
                  scroll: 'horizontal',
                  sortable: false,
                  layout: {
                      pack: 'center'
                  }
              },
              cls: 'card1',
              items: [
                  location,
                  quick,
                  category
              ]
          });
      }
  });
  </code></pre>
  
  <p>That works great. No difference between the tabs I know but I'm building up to that...</p>
  
  <p>Right, the first thing I want to work on is the Keyword search tab as that is the simplest one to test for this app.</p>
  
  <p>So I add a form.</p>
  
  <pre><code>var quickFormBase = {
                  url: "../quicksearch.php?output=json",
                  items: [{
                     xtype: 'fieldset',
                     instructions: 'The keyword search is great if you know the name of the company you are looking for, or the particular service you need to find.&lt;p&gt;&lt;br /&gt;To narrow it down to an area include the town or county name in your query&lt;/p&gt;',
                     defaults: {
                         required: false,
                         labelAlign: 'left'
                     },
                     items: [{
                             xtype: 'textfield',
                             label: 'Search',
                             name : 'inpquery',
                             showClear: true,
                             autoCapitalize : false
                         }]
              }],
              listeners : {
                  submit : function(form, result){
              console.log('results', result.SearchResults.MainResults.Advert);
                  },
                  exception : function(form, result){
                      console.log('failure', Ext.toArray(arguments));
                  }
              }
      };
  
  var quickForm = new Ext.form.FormPanel(quickFormBase);
  </code></pre>
  
  <p>So my quick tab config now looks like this:</p>
  
  <pre><code>var quick = new Ext.Container({
              iconCls: 'search', 
              title: 'Quick Search',
              scroll: 'vertical',
              items: [new Ext.Component({
                  html: '&lt;img src="images/gfb.gif" /&gt;'
              }),quickForm]
  });
  </code></pre>
  
  <p>I now have a form looking exactly how I want and hooked into my json search and returning adverts to the console. Great!</p>
  
  <p>Now I want to create a list view that has a top bar with a back button. This I am pretty sure is not the way to set this up, but I am really struggling to find examples on how to do this as the example with the source have a complicated setup, and the simple ones don't do what I am after.</p>
  
  <p>I now add a model config at the top of my index.js file to define my Advert model</p>
  
  <pre><code>Ext.regModel('Advert',{
      fields: [
               {name: 'advertid', type:'int'},
               {name: 'Clientname', type:'string'},
               {name: 'telephone', type:'string'},
               {name: 'mobile', type:'string'},
               {name: 'fax', type:'string'},
               {name: 'url', type:'string'},
               {name: 'email', type:'string'},
               {name: 'additionalinfo', type:'string'},
               {name: 'address1', type:'string'},
               {name: 'address2', type:'string'},
               {name: 'address3', type:'string'},
               {name: 'postcode', type:'string'},
               {name: 'city', type:'string'},
               {name: 'Countyname', type:'string'},
               {name: 'longitude', type:'string'},
               {name: 'latitude', type:'string'}
      ]
  });
  </code></pre>
  
  <p>In my form success listener I do the following:</p>
  
  <pre><code>listeners : {
                  submit : function(form, result){
  
                      var quickstore = new Ext.data.JsonStore({
                          model  : 'Advert',
                          data : result.SearchResults.MainResults.Advert
                      });
  
                      var listConfig = {
                              tpl: '&lt;tpl for="."&gt;&lt;div class="advert"&gt;{Clientname}&lt;/div&gt;&lt;/tpl&gt;',
                              scope: this,
                              itemSelector: 'div.advert',
                              singleSelect: true,
                              store: quickstore,
                              dockedItems: [
                                              {
                                                  xtype: 'toolbar',
                                                  dock: 'top',
                                                  items: [
                                                      {
                                                          text: 'Back',
                                                          ui: 'back',
                                                          handler: function(){
                                                              //Do some magic and make it go back, ta!
                                                          }
                                                      }
                                                  ]
                                              }
                                          ]
                      };
                      var list = new Ext.List(Ext.apply(listConfig, {
                          fullscreen: true
                      }));
                  },
                  exception : function(form, result){
                      console.log('failure', Ext.toArray(arguments));
                  }
          }
  </code></pre>
  
  <p>This works however it doesn't slide in as I would like, as it does when clicking the icons in the bottom tab bar.</p>
  
  <p>Now this is where I fall down, I can't figure out how I make the back button work to take me back to the keyword search. </p>
  
  <p>I have found setCard and setActiveItem but I don't seem able to access those in the "this" context in the result listener function.</p>
  
  <p>Could someone give a simple example of how to do this?</p>