PDA

View Full Version : Namespace Problem, Inheritance



Endolino
23 Nov 2011, 1:30 AM
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
23 Nov 2011, 1:50 AM
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
23 Nov 2011, 2:04 AM
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
23 Nov 2011, 3:17 AM
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
23 Nov 2011, 3:24 AM
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
23 Nov 2011, 3:26 AM
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
23 Feb 2012, 5:12 AM
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
23 Feb 2012, 5:24 AM
"widget." was the missing keyword that i have to use!

puspabs
23 Feb 2012, 5:31 AM
"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