Sencha Touch：列出 setActiveItem 错误：无法读取未定义的属性“isComponent”？

Question

我有一个带有“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

然后在我的“onItemDisclosure”中，我有以下内容：

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

然后在此页面的项目部分中

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

但这会产生以下错误：

未捕获尝试将 null 项添加为具有 itemId/id: ext-comp-1017 的 Container 的子项

我做错了什么或者这是可能的/我需要在同一个文件中包含我的详细面板吗？

编辑部分

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

  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：未捕获的 TypeError：无法读取未定义的属性“isComponent”

Safari: TypeError: 'undefined' is not an object (evalating '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);

列表显示一切正常，但是当我点击披露图标时，我收到以下错误：

未捕获的类型错误：无法读取未定义的属性“isComponent”

经历了所有事情，但仍然看不出有什么问题？

奇怪的是（尝试一些事情时）当我将“App.views.showList”的布局更改为布局：“fit”，然后单击一个披露图标，我的详细页面显示在我的列表上，所以我得到了列表和详细的页面视图，所以看起来它没有删除我的列表视图......？

谢谢

Answer 1

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

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

onItemDisclosure: function(record, btn, index) {

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