1. #1
    Ext User
    Join Date
    Aug 2009
    Posts
    36
    Vote Rating
    0
    Chris55 is on a distinguished road

      0  

    Default Extended Class and Calling Custom Function

    Extended Class and Calling Custom Function


    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)...

    Code:
    // 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

  2. #2
    Ext User zhegwood's Avatar
    Join Date
    Dec 2007
    Location
    Boulder, CO Suburbia (Lafayette)
    Posts
    388
    Vote Rating
    1
    zhegwood is on a distinguished road

      0  

    Default


    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:

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

  3. #3
    Ext JS Premium Member
    Join Date
    May 2007
    Posts
    698
    Vote Rating
    3
    danh2000 is on a distinguished road

      0  

    Default


    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.

  4. #4
    Ext User
    Join Date
    Aug 2009
    Posts
    36
    Vote Rating
    0
    Chris55 is on a distinguished road

      0  

    Default


    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.

    Code:
    // 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

  5. #5
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,953
    Vote Rating
    636
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    You need to set the scope on the button handler as well.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  6. #6
    Ext User
    Join Date
    Aug 2009
    Posts
    36
    Vote Rating
    0
    Chris55 is on a distinguished road

      0  

    Default


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

    Quote Originally Posted by evant View Post
    You need to set the scope on the button handler as well.

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,506
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Or capture this and use it:

    Code:
    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,
                    ...