CODEWITHSUNDEEP
extjs4
Hard worker
Hard worker

Reputation: 4046

Panel inside my panel throwing an error - Cannot call method 'setSize' of undefined

Here is the panel which I open:

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);
}
});

And here is the panel which is causing the error:

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%">'
    ]
}
});

Is there anything obviously wrong here?

I have to follow the initComponent syntax. I have a border layout because more items are in my code but they aren't relevant to this error. Thanks.

Upvotes: 0

Views: 1621

Answers (1)

Krzysztof
Krzysztof

Reputation: 16130

You cannot pass html directly to items array. You may try this instead:

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>');
        }
    }
});

or

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>'
});

Upvotes: 2

Related Questions