PDA

View Full Version : simple window extend



Stephan123
8 Mar 2010, 12:54 AM
Hello !

I will simple extend a window.
Here is my little skript.
When i press the button, no action i can see.

Ext.BLANK_IMAGE_URL = '../lib/extjs3/resources/images/dafault/s.gif';
Ext.namespace('App');


App.test = new Ext.Window({
title: 'Testfenster',
width: 400,
height: 400,
macheTest: function(){
var args = arguments;
Ext.MessageBox.alert('Button 1');
Ext.Window.prototype.macheTest.call(this,args);
},
bbar: [{
xtype: 'tbseparator'
},{
xtype: 'tbbutton',
text: 'Test 1',
handler: this.macheTest
},{
xtype: 'tbseparator'
}]
});

// debugger;

Ext.onReady(App.test.show,App.test);

Is the command
Ext.Window.prototype.macheTest.call(this,args);
wrong ?

Your sincerly

Stephan

Animal
8 Mar 2010, 1:06 AM
You have to read the code and imagine its execution sequence.

At the time that the "new Ext.Window" statement is building up the argument list to be passed, it's creating that object parameter and inserting the properties into it before calling it.

So what do you think it puts into the "handler" property when it tries to reference "this.macheTest"?

When you start, it's probably a good idea to break the code into logical steps better.

What you are doing is this:



// Set up a config object
// During execution of this statement, "this" will be whatever.. probably the browser window.
var windowConfig = {
title: 'Testfenster',
width: 400,
height: 400,
macheTest: function(){
var args = arguments;
Ext.MessageBox.alert('Button 1');
Ext.Window.prototype.macheTest.call(this,args);
},
bbar: [{
xtype: 'tbseparator'
},{
xtype: 'tbbutton',
text: 'Test 1',
handler: this.macheTest
},{
xtype: 'tbseparator'
}]
};

// Pass the config object into a constructor
App.test = new Ext.Window(windowConfig);

Animal
8 Mar 2010, 1:07 AM
You have to read the code and imagine its execution sequence.

At the time that the "new Ext.Window" statement is building up the argument list to be passed, it's creating that object parameter and inserting the properties into it before calling it.

So what do you think it puts into the "handler" property when it tries to reference "this.macheTest"?

When you start, it's probably a good idea to break the code into logical steps better.

What you are doing is this:



// Set up a config object
// During execution of this statement, "this" will be whatever.. probably the browser window.
var windowConfig = {
title: 'Testfenster',
width: 400,
height: 400,
macheTest: function(){
var args = arguments;
Ext.MessageBox.alert('Button 1');
Ext.Window.prototype.macheTest.call(this,args);
},
bbar: [{
xtype: 'tbseparator'
},{
xtype: 'tbbutton',
text: 'Test 1',
handler: this.macheTest
},{
xtype: 'tbseparator'
}]
};

// Pass the config object into a constructor
App.test = new Ext.Window(windowConfig);

tobiu
8 Mar 2010, 5:44 AM
hi Stefan,

1) never ever create ext.elements like



App.test = new Ext.Window({..


outside of Ext.onReady.

2) i don't think writing a config that does not exist (macheTest) into the constructor is clever. you can create the window and afterwards use ext.apply to add it or extend the window and add your method in the initComponent of the extension.


kind regards,
tobiu

Animal
8 Mar 2010, 5:46 AM
You can create UI Components outside of onReady.

It's just that you cannot render them.

tobiu
8 Mar 2010, 7:42 AM
hi nige,

though it might be possible (never tried) i would not recommend it: i like having all ext-stuff inside ext.onReady.

to the main question we both missed a bit:



Ext.Window.prototype.macheTest.call(this,args);


since you created a new instance of Ext.Window, the class itself (prototype) has no clue of macheTest. If you extended a window, this would be different.

Animal
8 Mar 2010, 8:35 AM
That won't make a difference to the OP's problem.

His problem is that the handler reference that he is setting up is undefined.

He's setting the handler property to be "this.macheTest".

At the time that object is being set up, "this" is the browser window (probably, we don't see in what scope he is doing that), and it probably does not have that member, so the handler is undefined.

I am not proposing a solution, that is up to his design decisions.