Results 1 to 8 of 8

Thread: loosing scope

  1. #1

    Default loosing scope

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

    PHP Code:
    Ext.extend(myComponentExt.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(myComponentExt.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. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    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. #3

    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. #4
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    Read what I said

    this.foo.methods.load() runs with the scope of this.foo.methods.

  5. #5

    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. #6
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

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

    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
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    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.

Posting Permissions

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