Sencha Touch: List setActiveItem error: Cannot read property 'isComponent' of undefined?

I have a normal list with 'onItemDisclosure' on this, now when an item is clicked the panel opens fine, but I would like to have this panel placed on an external page / js file rather than clog up the code workings page etc

I have the following all within the same file:

  var newPanel = new Ext.Panel({
    id : 'pagedetails',
    tpl:'Show details panel'
  });
  .......
  onItemDisclosure: function(record, btn, index) {
    newPanel.update();
    App.viewport.setActiveItem('pagedetails', {type: 'slide', direction: 'left'});
}

this works fine but then I create it as a separate page as below page name pagedetails.js:

 App.views.pagedetails = Ext.extend(Ext.Panel, {
id: 'pagedetails',
tpl:'Show details page'
  });

  Ext.reg('pagedetails', App.views.pagedetails);

I have loaded this within the main index page no problems its when I code it to try and get it to work.

in my viewport initComponent: function() {... i have the following

 App.views.pagedetails = new App.views.pagedetails();
  Ext.apply(this, {
    items: [
      App.views.pagedetails
  .......etc

then within my 'onIt开发者_开发百科emDisclosure' i nwo have the following:

  App.views.pagedetails.update();
  App.viewport.setActiveItem('pagedetails', {type: 'slide', direction: 'left'}); 

then in the items section of this page

  ....
  items:[list, App.views.pagedetails];

But this gives the the following error:

Uncaught Trying to add a null item as a child of Container with itemId/id: ext-comp-1017

What am i doing wrong or is this possbile / do i need to have my detailed panel in the same file?

EDITED SECTION

Anyway until I resolve this issue, i decided to go back to basics and now I cannot get this to work. My code is below and when I click on the detailed icon I get the error below:

  var detailsPanel = new Ext.Panel({
     id : 'pagedetails',
     tpl:'Show details panel'
 });

 var list = new Ext.List({
    itemTpl : App.views.showlistTpl,
    grouped : true,
     indexBar: true,
    store: 'showsStore',
    onItemDisclosure: function(record, btn, index) {
    detailsPanel.update();
    App.viewport.setActiveItem('pagedetails', {type: 'slide', direction: 'left'});
}
});


  App.views.displayList = Ext.extend(Ext.Panel, {
scroll: 'vertical',
styleHtmlContent: false,
layout: 'card',
    dockedItems: [{
      xtype: 'toolbar',
      title: 'Shows & Events'        
     }],
items: [list, detailsPanel]
  });

  Ext.reg('displayList', App.views.displayList );

Now the error I am getting is:

Chrome: Uncaught TypeError: Cannot read property 'isComponent' of undefined

Safari: TypeError: 'undefined' is not an object (evaluating 'config.isComponent')

Any ideas to get the basic working again

UPDATE

I have the following code set up:

  var detailPanel = new Ext.Panel({
      id: 'detailpanel',
      tpl: 'Hello',
      layout: 'card'
 });

  var listPanel = new Ext.List({
       id: 'indexlist',
       store: 'showStore',
       itemTpl: App.views.showlistTpl,
       grouped: true,
       layout:'card',
        onItemDisclosure: function(record, btn, index) {
          detailPanel.update(record.data);
          App.viewport.setActiveItem('detailPanel', {type: 'slide', direction: 'left'});
           }
         });
       App.views.showList = Ext.extend(Ext.Panel, {
             scroll: 'vertical',
             styleHtmlContent: false, 
             dockedItems: [{
             xtype: 'toolbar',
             title: 'My List'        
       }],
                items: [listPanel, detailPanel],
             layout:'card'
       });

        Ext.reg('showList', App.views.showList);

The list shows all ok, but then when I click on the disclosure icon, I get the following error:

Uncaught TypeError: Cannot read property 'isComponent' of undefined

Been through everything but still cannot see whats wrong?

whats strange (when trying a few things) is when I change the layout of 'App.views.showList' to layout:'fit', then click on a disclosure icon, my detailed page displays over my list so I get the list and the detailed page view, so it looks like its not removing my list view....?

thanks

---

Do not load the Detail Panel into the list of items of the App.views.showList, just use the setActiveItem method that will load the panel and set it as active.

DO not use the xtype, but use the instance you created before like this:

onItemDisclosure: function(record, btn, index) {

          detailPanel.update(record.data);
          App.viewport.setActiveItem(detailPanel, {type: 'slide', direction: 'left'});
}