Панель внутри панели выдает ошибку - Невозможно вызвать метод 'setSize' из неопределенного

Question

Вот панель, которую я открываю:

Ext.define("Ez.view.usefullinks.Panel", {
extend: "Ext.panel.Panel",
alias: "widget.usefullinkspanel",
layout: "border",
border: 0,
initComponent: function() {
       this.sitePanel = Ext.create("Ez.view.usefullinks.sitePanel");
        this.items = [
        this.sitePanel
        ];
    this.callParent(arguments);
}
});

А вот панель, которая вызывает ошибку:

Ext.define("Ez.view.usefullinks.sitePanel", {
extend: "Ext.panel.Panel",
alias: "widget.usefullinkssitepanel",
region: "center",
layout: "fit",

initComponent: function() {
    this.items= [
    '<iframe frameborder="0" src="http://www.google.com" width="100%" height="100%">'
    ]
}
});

Здесь что-то явно не так?

Я должен следовать синтаксису initComponent. У меня есть макет границы, потому что в моем коде больше элементов, но они не имеют отношения к этой ошибке. Спасибо.

Answer 1

Вы не можете передать html напрямую в массив элементов.Вместо этого вы можете попробовать это:

Ext.define("Ez.view.usefullinks.sitePanel", {
    extend: "Ext.panel.Panel",
    alias: "widget.usefullinkssitepanel",
    region: "center",
    layout: "fit",

    listeners: {
        afterrender: function() {
            Ext.core.DomHelper.append(this.getEl(), '<iframe frameborder="0" src="http://www.google.com" width="100%" height="100%"></iframe>');
        }
    }
});

или

Ext.define("Ez.view.usefullinks.sitePanel", {
    extend: "Ext.panel.Panel",
    alias: "widget.usefullinkssitepanel",
    region: "center",
    layout: "fit",

    html: '<iframe frameborder="0" src="http://www.google.com" width="100%" height="100%"></iframe>'
});