Results 1 to 8 of 8

Thread: loosing scope

  1. 7 Aug 2009, 10:37 PM #1
    d0uble_hel1x
    d0uble_hel1x is offline
    Sencha User
    Join Date
    Mar 2007
    Posts
    64

    Default loosing scope

    hi all, i was happily coding my components the usual way:

    PHP Code:
    Ext.extend(myComponent, Ext.grid.EditorGridPanel,{
      .
      .
          eventhandler1:function(){},
          eventhandler2:function(){},
      .
      .
      .
          func1:function(){...},
          func2:function(){...},
          func3:function(){...}
      .
      .
      .
    }) 
    and everything was fine till i decided to organize my codes in this way

    PHP Code:
    Ext.extend(myComponent, Ext.grid.EditorGridPanel,{

          events:{
            tbar:{...handlers here...},
            grid:{...handlers here...}
            editor:{...handlers here...}
      },

          methods:{
            func1:function(){...}
            func2:function(){...}
        .
        .
        .
      }

    }) 
    now in order to call the method i would have to use:

    PHP Code:
    this.foo=new myComponent({...});
    this.foo.methods.func1.call(this.foo,....) 
    instead of (what i would think it should be)

    PHP Code:
    this.foo.methods.func1(....) 
    which runs under the scope of the caller/event raiser

    can anyone explain why this is happening an how i can code it such that i can use the latter without the need for specifying scope.

    thanks
  2. 7 Aug 2009, 11:37 PM #2
    Animal
    Animal is offline
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    When you call a method using foo.blah(), it's run with the scope you are asking it to be run in: foo

    If you want to override that, you have to use .call or .apply
  3. 8 Aug 2009, 3:06 AM #3
    d0uble_hel1x
    d0uble_hel1x is offline
    Sencha User
    Join Date
    Mar 2007
    Posts
    64

    Default

    in which case this.foo.methods.load() should run under the scope of this.foo but it runs in the scope of the caller.
  4. 8 Aug 2009, 3:08 AM #4
    Animal
    Animal is offline
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Read what I said

    this.foo.methods.load() runs with the scope of this.foo.methods.
  5. 8 Aug 2009, 3:28 AM #5
    d0uble_hel1x
    d0uble_hel1x is offline
    Sencha User
    Join Date
    Mar 2007
    Posts
    64

    Default

    its hard to understand why the scope discontinues even when methods belongs to its member. for those who are interested you can try this out:


    PHP Code:

    <html>
    <    head>
        <    link rel="stylesheet" type="text/css" href="ext-3.0-rc2/resources/css/ext-all.css">
        <    script type="text/javascript" src="ext-3.0-rc2/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="ext-3.0-rc2/ext-all.js"></script>
        
        <script type="text/javascript">
        
        obj= Ext.extend(Ext.Component,{
        
            text:'foo bar',
            
            bar:function(){alert(this.text)},
            
            BAR:function(){this.m.bar();},
            
            m:{
                bar:function(){alert(this.text)}
            }
        })
        
        var foo=new obj();
        foo.bar();//ok
        foo.BAR();//not ok
        foo.m.bar.call(foo); // ok
        foo.m.bar(); // not ok
        </script>

    </head>
    <body>

    </body>
    </html> 
  6. 8 Aug 2009, 3:41 AM #6
    Animal
    Animal is offline
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Methods don't "belong" to anyone.

    You can call any method in any scope, hence the fix to constrain a Menu mentioned here: http://extjs.com/forum/showthread.ph...000#post369000

    I am calling a method that was defined in the Window class's prototype. I just impose upon it the scope of the Menu object.

    There is no such thing as a "member function" in Javascript.
  7. 8 Aug 2009, 3:49 AM #7
    d0uble_hel1x
    d0uble_hel1x is offline
    Sencha User
    Join Date
    Mar 2007
    Posts
    64

    Default

    thanks animal. yeah its a mindset issue. keep forgetting it's javascript. here's a singleton pattern for those who are interested:

    PHP Code:
    <html>
    <    head>
     
    <    script type="text/javascript">

    var     foo=function(){
        return{
                text:'foo bar',

                bar:function(){alert(this.text)},
            
                BAR:function(){this.m.bar();},
            
                m:{
                    bar:function(){alert(this.text)}
            }
        }
    }();

    foo.bar();//foo bar
    foo.BAR();//undefined
    foo.m.bar.call(foo); // foo bar
    foo.m.bar(); // undefined
        
    </script>
        
    </head>
    <body>

    </body>
    </html> 
  8. 8 Aug 2009, 4:07 AM #8
    Animal
    Animal is offline
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    or

    Code:
    function anyOldFunctionAnywhere() {
    console.log("My scope is ", this);
}

//Singleton. No need to return them from a function unless you are capturing private references
var a = {
    myMember: anyOldFunctionAnywhere
};

//Class
MyClass = Ext.extend(Object, {
    classMember: anyOldFunctionAnywhere
});
    It's just a function reference. Scope is imposed upon it at invocation time.
« Ext.form.Field masks | Extjs Grails based SpreadSheet, Calendar, doc desktop application »

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules