Hi
I am new to Sencha Touch and though I find it very useful I am stuck at a particular issue.
I have successfully made two separate pages.

PAGE 1: One which has a head and footer(called in from other files of my project) and which then call upon HTML pages to display them.
PAGE 2: And the Second Page I created has a Nested List with a detailsCard inside it.

All this is part of a larger application where I need to supply name of the view for it to call upon everything else also.

A few Disclaimers:
-The Page2 defined here is running as a complete separate application currently thus the application and launch are used.
- I am very new to this coding thus may have made very basic mistakes so as to how to approach this problem. Suggestions are welcome for that too.
-I leaned heavily on the Sample nested list provided within sencha docs.
-the logic for selecting different menu items and changing PageUrl accordingly is not included here though it follows the following convention.

Code:
var recordName=record.get('name');
                                if(recordName=='<a value from list>')
                                    {
                                    pageUrl='<url of page>.html'
                                    }
If there is a more efficient way of doing the above without if then else then please let me know.
-Both Header and Footer are Toolbars with the following convention :
Code:
var Header = {
    xtype : "toolbar",    docked : "top", //Bottom for Footer
    cls : "toolbarTop",
...... etc

Expected Behaviour: Nested list(page 2) to be included inside the View(page1).
I want to combine the nested list with the first page so that the header and footer show up around the nested list and when I click on an item in the list the right hand pane show the html page directly.
Below is the Code for all that is happening here.


FOR PAGE 1

Code:
Ext.define(
                "app.views.View1",
                {
                    extend : "Ext.Panel",
                    fullscreen : true,
                    config : {
                        
                        listeners: {
                         activate: function(obj) {
                              //set header title
                              Ext.getCmp('Header').setTitle("Page1"); 
                              Ext.Ajax.request({
                             
                             url: "html/CustomPage1.html",
                             method: "GET",
                             success: function(response, request) {
                                 Ext.getCmp("pageOnePanel").setHtml(response.responseText);                                            

                             },
                             failure: function(response, request) {
                             
                             this.setHtml("failed -- response: " + response.responseText);
                             }
                    });
                         }
                        },
                        items : [
                                Header, //Defined elsewhere
                                Footer, //Defined elsewhere
                                {
                                    xtype : "panel",
                                    cls : "customCSS",
                                    id:"pageOnePanel"
                                } ]


                    }
                });
For PAGE 2
Code:
var pageUrl = 'CustomPage2.html';
            Ext.application({
                launch: function () {
                      Ext.define('standardModel', {
                        extend: 'Ext.data.Model',
                        config: {
                            fields: ['name','imgurl']
                        }
                        });
            
                     var productTemplate = new Ext.XTemplate( // Create the template here : using html css
                      '<tpl for=".">',
                       '<div class="standardImage">',
                           '<img class="productImage" src="{imgurl}" />',
                           '</div>',
                           '<div class="productTitle">',
                              '{name}',
                       '</div>',
                      '</tpl>'
                     );
                                    
                    var treeStore = Ext.create('Ext.data.TreeStore', {
                        model: 'standardModel',
                        defaultRootProperty: 'items',
                        root: {
                            items: [{
                                name: "1",
                                imgurl: "images/standard/1.png",
                                leaf: true,
                                },
                                {  
                                    name: "2",
                                    imgurl: "images/standard/2.png",
                                    leaf: true,
                                },
                                
                                {
                                    name: 'Nested Lists',
                                    imgurl: 'images/standard/1.png',
                                 items: [{
                                    name: 'Toaster',
                                    imgurl: 'images/standard/2.png',
                                    leaf: true
                                }, {
                                    name: 'Clock',
                                    imgurl: 'images/standard/3.png',
                                    leaf: true
                                }]
                            }]
                            
                        }
                    });
            
                    var detailContainer = Ext.create('Ext.Container', {
//                         layout: 'card',
                        flex: 6
                    });
                    
                    var samplelist = Ext.create('Ext.NestedList', {
                        cls: 'myList',
                        
                             getItemTextTpl: function(node){
                               return '<div class="standardImage"><img class="productImage" src="{imgurl}" /></div><div >{name}</div>';
//                             return '<div style="height:100%;width:100%; background-color:#0f0f0f;">asdf</div>'
                               },
                        store: treeStore,
                        detailContainer: detailContainer,
                        detailCard: true,
                        listConfig: {
                               variableHeights: true
                           },
                        listeners: {
                            leafitemtap: function (samplelist, list, index, target, record) {
                                var detailCard = samplelist.getDetailCard();
                                 Ext.Ajax.request({
                                      url: pageUrl,
                                      method: "GET",
                                      success: function(response, request) {
                                          /*We should use the setter for the HTML config for this */
                                          detailCard.setHtml(response.responseText);
                                     },
                                      failure: function(response, request) {
                                                  
                                            detailCard.setHtml("failed -- response: " + response.responseText);
                                      }
                                  }); 
                            }
                        },
                        flex: 1
                    });
            
                    Ext.Viewport.add({
                        layout: 'hbox',
                        cls: 'myList',
                        items: [
                         samplelist,detailContainer]
                    });
                } // launch
            })