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

但这会产生以下错误：

未捕获尝试使用itemId / id添加null项目作为Container的子项：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 &amp; Events'        
     }],
items: [list, detailsPanel]
  });

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

现在我得到的错误是：

Chrome：未捕获TypeError：无法读取属性'isComponent'未定义

Safari：TypeError：'undefined'不是对象（评估'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);

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

未捕获的TypeError：无法读取未定义的属性'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'});
}

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

1 个答案: