PDA

View Full Version : Upgrading to ExtJS3.0: Problem with getComponentId



Yossi
24 Aug 2009, 4:54 AM
Hello,

I'm upgrading software to ExtJS3 right now, and I have a small problem with getComponentId.

I'm opening a form inside a window that loads up at the start of the program, and here's the Javascript code:



Ext.BLANK_IMAGE_URL = ImgDir + 'default/s.gif';

Mainer = {
}

Ext.apply(Mainer, {
systemStart: function() {
this.loginWindow = new Mainer.components.LoginWin;
}
});

Ext.ns('Mainer', 'Mainer.components');
Ext.onReady(Mainer.systemStart, Mainer);

Mainer.components.LoginWin = Ext.extend(Ext.Window, {
id: 'loginWindow',
initComponent: function(){
Ext.apply(this, {
title: 'Title'
});
this.show();
Mainer.components.LoginWin.superclass.initComponent.apply(this, arguments);
},
onRender: function(){
var win = this;
this.Form = new Ext.FormPanel({
id: 'loginForm',
items: [
new Ext.Panel({
xtype: 'panel',
plain: true,
html: 'text in html'
}),{
fieldLabel: 'LABEL one',
name: 'onelabel'
}
],
buttons: [{
text: 'submitbtn',
handler: this.formSubmit.createDelegate(this)
}]
});

this.add(this.Form);
win.on('beforedestroy', function() { this.Form.destroy(); });
Mainer.components.LoginWin.superclass.onRender.apply(this, arguments);
},
formSubmit: function() {
}
});



It gets killed in execution, in ext-all-debug.js line 17422:


// private - used as the key lookup function for the items collection
getComponentId : function(comp){
return comp.getItemId();
},


Any ideas what I'm doing wrong? I guess that the old way I built this component isn't right for 3.0..

Animal
24 Aug 2009, 4:56 AM
Whu????

How can anyone have an idea? We have no clues as to what's happening!

Yossi
24 Aug 2009, 5:11 AM
"It gets killed in execution, in ext-all-debug.js line 17422", when I run the code.

That's the log I get from FireBug:


anonymous(Object items=[1] map=Object keys=[1] length=1 events=Object)ext-all-debug.js (line 17429)
anonymous(Object items=[1] map=Object keys=[1] length=1 events=Object, Object items=[1] map=Object keys=[1] length=1 events=Object)ext-all-debug.js (line 11005)
anonymous(Object items=[1] map=Object keys=[1] length=1 events=Object)ext-all-debug.js (line 17477)
anonymous()ext-all-debug.js (line 17365)
anonymous()ext-all-debug.js (line 21537)
anonymous()ext-all-debug.js (line 36103)
anonymous()Main.js (line 22)

... some cut off from here ...


Line 22 is this one:
Mainer.components.LoginWin.superclass.initComponent.apply(this, arguments);
So here's where it fails.

Are there any other details you suggest I add that I'm missing?

Animal
24 Aug 2009, 5:45 AM
The error message? It is not "it gets killed in execution"

Yossi
24 Aug 2009, 11:15 AM
LOL, thanks for helping me be more accurate.



comp.getItemId is not a function
return comp.getItemId();
ext-all-debug.js (line 17429)

Animal
24 Aug 2009, 1:23 PM
OK, so when you break there, what is comp?

Who set it to that value (find out by going back through the call stack)

Animal
24 Aug 2009, 1:26 PM
You've got a terrible case of the extend to configures.

Yossi
24 Aug 2009, 3:11 PM
What do you mean by extend to configures?

I know I'm doing something that I shouldn't do, I just don't realize what it is..
Maybe I'm trying to add something to the window before it's rendered?

I guess Ext3 is a bit more strict/built differently.

Animal
24 Aug 2009, 9:09 PM
I mean there's no point creating a subclass there. You copy/pasted something without knowing why, bashed it to "work" without knowing how, and because you did not take the time to understand what you were doing, you've no idea what to do now.

If you had just written some code to create a Window, you would be in much better shape now. The dangers of cargo cult development.

Yossi
24 Aug 2009, 10:35 PM
My whole application was built this way, mainly because I liked the syntax and the way it's built much better.

I guess I'll just get a little deeper into it.

Condor
24 Aug 2009, 10:54 PM
What Animal meant is: Why are you creating a custom component is you only want to create a single instance of it?

And if you really want to create a component you should not include the id (you wouldn't be able to create multiple instances, because the id needs to be unique).

Example:

Ext.ns('Mainer.components');

Mainer.components.LoginWin = Ext.extend(Ext.Window, {
constructor: function(config){
this.form = new Ext.FormPanel({
items: [{
xtype: 'panel',
plain: true,
html: 'text in html'
},{
fieldLabel: 'LABEL one',
name: 'onelabel'
}],
buttons: [{
text: 'submitbtn',
handler: this.formSubmit,
scope: this
}]
});
Mainer.components.LoginWin.superclass.constructor.call(this, Ext.apply({
title: 'Title',
items: Form,
hidden: false
}, config));
},
formSubmit: function(){
}
});

Ext.apply(Mainer, {
systemStart: function() {
this.loginWindow = new Mainer.components.LoginWin({
id: 'loginForm'
});
}
});
Ext.onReady(Mainer.systemStart, Mainer);

Yossi
26 Aug 2009, 12:16 PM
Thanks a lot for the clarification, I needed that.. Even though I worked around the problem. [simply put the .show outside the initialization of the component..]
I do have other components in my application, that needs to have multiple instances and don't have a pre-determined ID.

Is it really that wrong to do that?
Is the overload of creating a custom class is that big?

Condor
26 Aug 2009, 10:18 PM
No, there is nothing wrong with creating a custom class. The only problem with it is that it requires more Ext knowledge than using a factory method (you can do more things wrong), which is why Animal advises against it.