Listview Sencha Touch:List setActiveItem错误：无法读取属性'；iComponent'；未定义的？

我有一个正常的列表，上面有“onItemDisclosure”，现在当单击一个项目时，面板可以正常打开，但我希望将此面板放置在外部页面/js文件上，而不是阻塞代码工作页面等

我在同一个文件中有以下所有内容：

  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'});
}

这很好，但我将其创建为一个单独的页面，如下页面名称pagedetails.js所示：

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

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

我已经在主索引页面中加载了它，当我编写代码试图让它工作时，没有问题

在我的视口中，initComponent:function（）{…我有以下内容

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

然后，在我的ONIMDISCLOSURE中，我没有以下内容：

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

然后在本页的“项目”部分

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

但这会导致以下错误：

Uncaught尝试将空项添加为itemId/id:ext-comp-1017的容器的子项

我做错了什么或这是否可能/我是否需要将我的详细面板放在同一个文件中

编辑的部分

无论如何，在我解决这个问题之前，我决定回到基础，现在我无法让它工作。我的代码如下，当我单击详细图标时，我得到以下错误：

  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 );

现在我得到的错误是：

Chrome:Uncaught TypeError:无法读取未定义的属性“isComponent”

Safari:TypeError:“未定义”不是对象（正在评估“config.isComponent”）

有什么办法让基础设施重新运转吗

更新

我设置了以下代码：

  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);

该列表显示所有ok，但当我单击“披露”图标时，出现以下错误：

未捕获的TypeError:无法读取未定义的属性“isComponent”

经历了一切，但仍然看不出有什么问题

奇怪的是（在尝试一些事情时）当我将“App.views.showList”的布局更改为“fit”布局时，然后单击一个公开图标，我的详细页面显示在我的列表上，这样我就可以获得列表和详细页面视图，所以看起来它好像没有删除我的列表视图

---

谢谢

不要将详细信息面板加载到App.views.showList的项目列表中，只需使用setActiveItem方法加载面板并将其设置为活动

不要使用xtype，而是使用之前创建的实例，如下所示：

onItemDisclosure: function(record, btn, index) {

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

---

谢谢你，尝试了这么多的方法，但不是这种组合！只需要制定出我的原始解决方案，将我的“var detailPanel”放在一个单独的文件中，这样我就不会阻塞文件并使其整洁：-）再次感谢一个更整洁的解决方案检查sencha MVC体系结构，有一些教程可用。谢谢ave bult或通过MVC构建它，所以我在mo学习这一点：-）