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
