title: Sencha Touch 2 Ext.List - programmatically add detail view
body: <p>I’m trying to add different detail view based on taped item in list.</p>
  
  <ul>
  <li>I have home screen that is using List component and this view is displaying ['Real estate', 'Vehicles', 'Jobs']... as menu items. </li>
  <li>Based on selected item in list, I want to display different view.
  <ul>
  <li>And I want to follow MVC design pattern..</li>
  </ul></li>
  </ul>
  
  <p>Here is some code...
  App.js</p>
  
  <pre><code>Ext.application({
  name: 'App',
  
  controllers: ['Main'],
  views: ['Viewport', 'HomePage'],
  stores: ['HomePageItems'],
  models: ['HomePageItem'],
  
  launch: function () {
      Ext.Viewport.add(Ext.create('App.view.Viewport'));
  }
  </code></pre>
  
  <p>});</p>
  
  <p>Viewport.js </p>
  
  <pre><code>Ext.define("App.view.Viewport", {
  extend: 'Ext.navigation.View',
  
  requires: [ 'App.view.realestate.Realestate',
              'App.view.HomePage',
              'App.view.jobs.Jobs',
              'App.view.other.Other',
              'App.view.vehicles.Vehicles'
             ],
  
  config: {
      items: [
          {
              xtype: 'homepage'
          }
      ]
  }
  </code></pre>
  
  <p>});</p>
  
  <p>HomePage.js ( xtype = "homepage" )</p>
  
  <pre><code>Ext.define('App.view.HomePage', {
  extend: 'Ext.List',
  xtype: 'homepage',
  id: 'homepage',
  
  config: {
      title: 'Oglasi',
      itemTpl: '&lt;strong&gt;{name}&lt;/strong&gt;&lt;p style="color:gray; font-size:8pt"&gt;{description}&lt;/p&gt;',
      store: 'HomePageItems',
      onItemDisclosure: true
  }
  </code></pre>
  
  <p>});</p>
  
  <p>Main.js</p>
  
  <pre><code>Ext.define('App.controller.Main', {
  extend: 'Ext.app.Controller',
  
  config: {
      refs: {
          main: '#homepage'
      },
  
      control: {
          'homepage': {
              disclose: 'HookUpDetailView'
          }
      }
  },
  
  HookUpDetailView: function (element, record, target, index, ev) {
      // TO DO: I have 4 differente views to load programmaticaly based on selected item in List
      //'App.view.realestate.Realestate'
      //'App.view.jobs.Jobs'
      //'App.view.other.Other'
      //'App.view.vehicles.Vehicles'
  }
  </code></pre>
  
  <p>});</p>
  
  <p>I found one example, but it's not working for me (push method doesn't exist)</p>
  
  <pre><code>this.getMain().push({
          xtype: 'realestatehome'
      });
  </code></pre>
  
  <p>Thank in advance!</p>