Sencha Touch: how to add a table view as rootView in left side & a view with a button as detailsView in right side of this split view in sencha touch

Question

I have implemented an app in iphone using sencha touch & phone gap .

Implemented split view using following code in index.js in SRC file with two text messages.. as shown bellow figure

Now i need to add a table view on left side root view and a button on right side details view. how?

Thanks in advance

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
                                   }
                                  ]

                                });

Answer 1

Currently your rootView and detailView are all of xtype: 'panel' . To achieve what you need, you have to modify a little bit to those 2 items:

• For the root view, actually it's called GridView , please read this for more details: http://www.sencha.com/forum/showthread.php?150431-Ext.ux.touch.grid
• For the detail view, it's simple to create a view with a button, for example (just example, might not exactly be what you need):

 { xtype: 'container', items: [ {xtype: 'button', text: 'my button'}, {xtype: 'panel', text: 'detail panel'}. ] }