Extended Class and Calling Custom Function

[Chris55]

I am trying to call a function within my extended Ext.Window without success. I have reviewed the Extjs, forum and Google docs and need a little clarification as to why my closeWindow() call does not work (can't step into it with FBug). Thank you in advance. Here is my code (abbreviated)...

// bo file
Application.UX.Widget = Ext.extend(Ext.Window,
    {
        initComponent:function() {
            Ext.apply(this,
                {
                    title: 'Blah-Blah'
                    ,modal: true
                    ,layout: 'border'
                    ,items: [
                        {
                            region: 'north'
                            ,...
                        }
                        {
                            region: 'center'
                            ,...
                            ,bbar: [
                                {...}
                                ,{
                                    text: 'Cancel'
                                    ,handler: function() {
                                        Ext.MessageBox.confirm(
                                            'Cancel'
                                            ,'Really?'
                                            ,function(answer) {
                                                if (answer === 'yes') {
                                                    this.closeWindow();  // <<--Ends here without error
                                                    alert('func called successfully');
                                                }
                                            }
                                        )
                                    }
                                }
                            ]
                        }
                    ]
                }
        } // eo initComponent
        ,closeWindow:function() {
            this.close();
        } //eo closeWindow
    }
);
 
Ext.reg('widget', Application.UX.Widget);
// eo file

[zhegwood]

You're out of scope... In the code you posted 'this' is the message box. You need to specify a scope in your confirm call:

Ext.MessageBox.confirm('Cancel','Really?',function(answer) {
  if (answer === 'yes') {
    this.closeWindow();  // <<--Ends here without error
    alert('func called successfully');
  }
},this);

[danh2000]

Because you are providing a new anonymous function to the confirm method.

Within the anonymous function, this does not refer to your extended window object.

Use the scope param (4th param of the confirm method) to remedy.

[Chris55]

Thanks zhegwood and dah2000. After inspecting my code block I noticed that I did choose the right overloaded function (with the 4th param being 'this'). I am able to elicit the confirmation dialog but when I break on line: this.closeWindow(), I am unable to reach the function closeWindow. Any other suggestions? All ears, literally.

// bo file
Application.UX.Widget = Ext.extend(Ext.Window,
    {
        initComponent:function() {
            Ext.apply(this,
                {
                    title: 'Blah-Blah'
                    ,modal: true
                    ,layout: 'border'
                    ,items: [
                        {
                            region: 'north'
                            ,...
                        }
                        {
                            region: 'center'
                            ,...
                            ,bbar: [
                                {...}
                                ,{
                                    text: 'Cancel'
                                    ,handler: function() {
                                        Ext.MessageBox.confirm(
                                            'Cancel'
                                            ,'Really?'
                                            ,function(answer) {
                                                if (answer === 'yes') {
                                                    this.closeWindow();  // <<--Ends here without error
                                                    alert('func called successfully');
                                                }
                                            }
                                            , this  // Sorry, forgot to include in original post :(
                                        )
                                    }
                                }
                            ]
                        }
                    ]
                }
        } // eo initComponent
        ,closeWindow:function() {  // <-- Never reach the function!
            this.close();
        } //eo closeWindow
    }
);
 
Ext.reg('widget', Application.UX.Widget);
// eo file

[evant]

You need to set the scope on the button handler as well.

[Chris55]

That got me to the station (scope: this). Thanks evant, zhegwood and dah2000! Next stop - privatizing properties, functions and state via closures.

You need to set the scope on the button handler as well.

[Animal]

Or capture this and use it:

Application.UX.Widget = Ext.extend(Ext.Window,
    {
        initComponent:function() {
            var me = this; // <-- use "me" when wanting to access the Window instance in closures declared WITHIN initComponent
            Ext.apply(this,
                ...