Uncaught TypeError: Object [object Object] has no method 'onAdded'

Question

I am using ExtJS4 with Java servlets. I am following the MVC architecture for ExtJS. I am trying a simple example of displaying a border layout but it doesnt work and I get the following error in ext-all.js in the javascript console:

Uncaught TypeError: Object [object Object] has no method 'onAdded'

Here is my code:

app.js

Ext.Loader.setConfig({   
 enabled : true
});
Ext.application({
name : 'IN',
appFolder : 'app',
controllers : [ 'Items' ],
launch : function() {
    console.log('in LAUNCH-appjs');
    Ext.create('Ext.container.Viewport', {
        items : [ {
            xtype : 'borderlyt'
        } ]
    });
}
});

Items.js (controller)

Ext.define('IN.controller.Items', {    
extend : 'Ext.app.Controller',
views : [ 'item.Border' ],
init : function() {
    this.control({
        'viewport > panel' : {
            render : this.onPanelRendered
        }
    });
},
onPanelRendered : function() {
    console.log('The panel was rendered');
}
});

Border.js (view)

Ext.define('IN.view.item.Border',{extend : 'Ext.layout.container.Border',
alias : 'widget.borderlyt',
title : 'Border layout' ,
autoShow : true,
renderTo : Ext.getBody(),
defaults : {
            split : true,
            layout : 'border',
            autoScroll : true,
            height : 800,
            width : 500
        },
        items : [ {
            region : 'north',
            html : "Header here..",
            id : 'mainHeader'
        }, {
            region : 'west',
            width : 140,
            html : "Its West..",
        }, {
            region : 'south',
            html : "This is my temp footer content",
            height : 30,
            margins : '0 5 5 5',
            bodyPadding : 2,
            id : 'mainFooter'
        }, {
            id : 'mainContent',
            collapsible : false,
            region : 'center',
            margins : '5',
            border : true,
        } ]
 });

The folder structure for the Webcontent is as follows:

• WebContent
  • app
    • controller
      • Items.js
    • model
    • store
    • view
      • item
        • Border.js
  • ext_js
    • resources
    • src
    • ext_all.js
  • index.html
  • app.js

Can someone help me resolve this error?

Thanks in advance

Answer 1

Ext.define must not contain configuration option renderTo. When components are loaded the body may still not exist.