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:

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

@IgorSemin There is no 'onAdded' method at all anywhere in my code.. so I am not able to make out what the problem is. — user777777, Aug 25 '14 at 10:41
I get the below error in the javascript console: Uncaught TypeError: Object [object Object] has no method 'onAdded' and the corresponding file for that error is ext-all.js — user777777, Aug 25 '14 at 10:52
Did you create your app with `sencha generate app ...`? If not, and if you are on the inception of the project, consider doing so. Sencha Cmd does a lot of dirty work for you. — Saki, Aug 25 '14 at 14:02
@Saki I did not use Sencha Cmd for creating the application. I have a question..Using Sencha Cmd can I create dynamic web project which uses java servlets for the server side? — user777777, Aug 26 '14 at 07:25
`sencha generate app ...` generates sample, "empty" application that provides basic setup, directory structure, dynamic loading, etc. Then you take this app, modify, delete, add files until you make your own app. — Saki, Aug 26 '14 at 09:28

score 0 · Answer 1 · answered Aug 25 '14 at 14:03

0

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

answered Aug 25 '14 at 14:03

Saki

5,827
2
15
15

removing the renderTo doesnt work..the error is still the same. I was able to get a simple form panel working However, border layout is not working.. – user777777 Aug 26 '14 at 07:23

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

1 Answers1