4

我有一个 MVC 架构，但是当我尝试在现有的一个 TabPanel 中创建另一个 TabPanel 时，我在浏览器中得到了这个：

el is null

el = el.dom || Ext.getDom(el); ext-all-debug.js (line 12807)

据我了解，似乎新的 TabPanel 无法找到需要的 div 来呈现。无论如何，这是控制器：

Ext.define('FI.controller.MainController', {
extend: 'Ext.app.Controller',
id: 'mainController',
views: ['MainTabPanel', 'UnitsTabPanel', 'SummariesTabPanel'],
mainTabPanel : {}, 
unitsTabPanel : {},
summariesTabPanel : {},
init: function(){
    console.log("main controller is init");
    console.log(this);

    this.control({
        'mainTabPanel':{
            afterrender: this.onCreate
        }
    });


    this.mainTabPanel = Ext.widget('mainTabPanel');
},

onCreate: function(){
    console.log("main tab panel is created");
    console.log(this);
    this.unitsTabPanel = Ext.widget('unitsTabPanel');
    this.summariesTabPanel = Ext.widget('summariesTabPanel');
}
});

这是MainTabPanel：

Ext.define("FI.view.MainTabPanel", {
extend: 'Ext.tab.Panel',
renderTo:'container',
alias: 'widget.mainTabPanel',
enableTabScroll: true,
items:[{
        title:'Units',
        html: "<div id='units'></div>",
        closable: false
    },
    {title: 'Summaries',
        html: "<div id='summaries'></div>",
        closable:false
    }
]
});

这是SummariesTabPanel（有问题的那个）：

Ext.define("FI.view.SummariesTabPanel", {
extend: 'Ext.tab.Panel',
renderTo: 'summaries',
alias: 'widget.summariesTabPanel',
enableTabScroll: true
});

问题出在SummariesTabPanel. 如果我不创建它，则会UnitsTabPanel渲染。由于某种原因，它找不到summariesdiv。

你能告诉我有什么问题吗？

4

2 回答 2

1

SummariesTabPanel 根据您的最后一段代码呈现到“单位”div，对吗？如果不是，请替换renderTo: 'units'为renderTo: 'summaries'.

编辑

由于情况并非如此，您可以查看 Ext 4 Panel 文档（此处：http://docs.sencha.com/ext-js/4-0/#!/api/Ext.panel。 Panel-cfg-html ) 表示在组件完全呈现之前不会添加 html 内容。因此，您必须等待选项卡的afterrender事件（而不是现在的选项卡面板），然后才能真正获取 DOM 元素。

如果您实例化此面板

{title: 'Summaries',
 html: "<div id='summaries'></div>",
 closable:false
}

并将指向它的指针存储到一个单独的变量中，您可以监听它的 afterrender 事件并重试。

解决方法是使用页面的现有元素（即静态 html 片段），而不是通过面板的html配置选项添加它。

于 2012-06-22T10:51:35.450 回答
1

你为什么要那样做？如果您想拥有一个嵌套面板 - 只需在彼此之间定义它们。不要使用renderTo

Ext.define("FI.view.SummariesTabPanel", {
  extend: 'Ext.tab.Panel', 
  alias: 'widget.summariesTabPanel'
});


Ext.define("FI.view.MainTabPanel", {
  extend: 'Ext.tab.Panel',
  alias: 'widget.mainTabPanel',
  enableTabScroll: true,
  items:[{
      xtype: 'summariesTabPanel'
      title:'Units',
      closable: false
    }
  ]
});
于 2012-06-22T11:49:18.243 回答