Namespace Problem, Inheritance

[Endolino]

Dear Users,

i work since 4 days with ExtJS4. Actually i work for a project to migrate ExtJS 2.3 Programming to 4. But i couldnt understand basic functionality. Example:

I define a class "DynamicPanel" with an alias, so that i can take of the advantages of xtype. So clear. I readed taht i have to implement the function initComponent if the extended class inherit from Ext.Component. Okay, Ext.panel.Panel inherit from Ext.Component, so i do it.

But the last Object in the itemArray doesnt work for me.
I got a error message: "Uncaught TypeError: Cannot call method 'substring' of undefined" in Chrome
and "namespace is undefined" in Firebug.

Please help me. I did not understand what basic functionality of ExtJS4? :-/



Ext.onReady(function() {
Ext.define('DynamicPanel', {
extend: 'Ext.panel.Panel',
alias:'dynpanel',
initComponent: function() {
this.callParent();
}
});
Ext.create('DynamicPanel');
var dashboardViewport = Ext.create('Ext.container.Viewport', {
layout: 'border',
cls: 'x-portal-viewport',
margins: '0 0 0 0',
cmargins: '0 0 0 0',
items: [
{
region: 'north',
cls: 'x-dashboard-header',
html: 'Test Eintrag',
height: 37,
border: true,
margins: '5 0 5 0'
},

Ext.create('DynamicPanel',{
id:'panel1',
html:'DynamicPanel',
region:'east'
})
,
{
id: 'portal',
region: 'west',
xtype: 'dynpanel'
}
]
});
});

[bocockli]

I would recommend you start with the basics; get a basic application going; then add custom classes and finally MVC.

http://docs.sencha.com/ext-js/4-0/#!/guide/application_architecture (http://docs.sencha.com/ext-js/4-0/#%21/guide/application_architecture)

Regards, Len

[Endolino]

Ok, walked through different tutorials, but i couldnt understand my error. Thats why i posted this thread.
Please give me simple answer to understand my error.

Best regards, thanks you!

[flanders]

If you want to instantiate by xtype 'bierdrinken' you need to specify 'widget.bierdrinken' as the alias. There are different namespaces for lazy instantiation and 'widget' is the one for components

[Endolino]

A simple keyword costs 3 hours of research. Thank you so much!!!!

"There are different namespaces for lazy instantiation and 'widget' is the one for components"

Which other instantiations are there? I couldnt find anything in doc.'widget,......'. Is there e hint in doc?

[flanders]

To be honest, I wouldn't know. I use it for lazy instantation of components, it's superb there. For the rest I manage instantiation on my own.

[puspabs]

what is the solution??
i spent more than 3 hours n still cant find...
help .. X_X


A simple keyword costs 3 hours of research. Thank you so much!!!!

"There are different namespaces for lazy instantiation and 'widget' is the one for components"

Which other instantiations are there? I couldnt find anything in doc.'widget,......'. Is there e hint in doc?

[Endolino]

"widget." was the missing keyword that i have to use!

[puspabs]

"widget." was the missing keyword that i have to use!
oh maan,, I already using that...
this is my app.js code

Ext.application({
name : 'AM',
appFolder : 'app',
launch : function() {
Ext.create('Ext.container.Viewport', {
layout : 'border',
controllers : ['Users'], //DEFAULT CONTROLLER
defaults: {
collapsible: false,
split: true
},
items: [{
title:'Header',
region: 'north',
//contentEl: 'north', //Get our content from the "north" div
margins: '5 5 5 5',
height: 70,
html: 'header',
split:false //cannot resize this area
},{
title:'Navigation',
collapsible: true, //make this column collapsable
region:'west',
contentEl: 'west', //Get our content from the "west" div
margins: '5 0 5 5',
cmargins: '5 5 5 5',
html: '<ul><li><a href="#" id="add">Add Tab</a></li></ul>',
width: 175,
minSize: 100, //set the limits for resizing
maxSize: 250 //set the limits for resizing
},
//tabs
{
xtype: 'list',
region: 'center',
title : 'User List '
}
]
});
}
});
this is my controller, Users.js

Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
views: ['user.List'],

init: function() {
this.control({
'viewport > panel': {
render: this.onPanelRendered
}
});
},

onPanelRendered: function() {
console.log('The panel was rendered');
}
});

and this is the view code List.js

Ext.define('AM.view.user.List' ,{
extend : 'Ext.grid.Panel',
alias : 'widget.list',

title : 'All Users',

initComponent: function() {
this.store = {
fields : ['name', 'email'],
data : [
{name: 'Ed', email: 'ed@sencha.com'},
{name: 'Tommy', email: 'tommy@sencha.com'}
]
};

this.columns = [
{header: 'Name', dataIndex: 'name', flex: 1},
{header: 'Email', dataIndex: 'email', flex: 1}
];

this.callParent(arguments);
}
});

do you know which part did I miss?
X_X