Question

我有一个MVC架构，但是当我尝试让另一个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将被渲染。由于某种原因，它无法找到summaries div。

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

Answer 1

SummariesTabPanel根据你最后一段代码呈现给“units”div，这是正确的吗？如果没有，请将renderTo: 'units'替换为renderTo: 'summaries'。

修改

由于情况并非如此，您可以查看这篇Ext 4 Panel文档（此处：http://docs.sencha.com/ext-js/4-0/#!/api/Ext.panel.Panel-cfg-html），该文档说明在完全呈现组件之前不会添加html内容。因此，在实际获取DOM元素之前，必须等待选项卡的afterrender事件（而不是像现在这样的tabpanel）。

如果您实例化此面板

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

并将指针存储到一个单独的变量中，你可以听取它的后续事件并重试。

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

Answer 2

你为什么这样做？如果你想拥有一个嵌套面板 - 只需在彼此内部定义它们。请勿使用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
    }
  ]
});

未找到ExtJS renderTo元素

2 个答案: