iPhone Sencha Touch- How to add table views to the split view in sencha touch

Question

I have implemented Tabbar in sencha touch without any content as follows:

using code

Ext.ns('sink', 'demos', 'Ext.ux');
Ext.ux.UniversalUI = Ext.extend(Ext.Panel,
                                {
                                  fullscreen: true,
                                  layout: 'hbox',
                                  items:

                                  [
                                     //Root view 
                                     {
                                       xtype: 'panel',
                                       html: 'TableView/Rootview goes here ...',
                                       flex: 1
                                   },

                                    //Details view
                                   {
                                       xtype: 'panel',
                                        html: 'Message Detail view goes here ....',
                                       flex: 2
                                   }
                                  ]

                                });

But I need two Tableviews one as Rootview and the other as Detailsview as follows

Answer 1

You need to use Ext.List. So instead of your left panel (commented as //Root view), you can add this :

{
  xtype:'list',
  id: 'navigation',
  data: [
    { title: 'Page 1'},
    { title: 'Page 2'},
    { title: 'Page 3'},
    { title: 'Page 4'},
    { title: 'Page 5'}
  ],
  itemTpl: new Ext.XTemplate('{title}'),
}

I let you guess what you have to do for the second view ;)

Hope this helps