EXTJS assign function to variable and call it dynamically

Question

In my controller, I have the following ref and one function that I call after clicking a button. Is it possible to construct a ref method and then call it? I just want in a single function to handle many cases and I want to avoid if statements (as it is required in the project. It is supposed to be generic)

The type will come as a parameter to the function.

     refs    : [{
        ref      : 'saleForm',
        selector : 'sale saleform'
     }],

         init: function () {    
            this.control({
                     'salesview #mybutton':{
                     click : this.onSaleClick 
                    }
            }); 
         },

    onSaleClick : function(){

       //this.getSaleForm().show();//works

       var type = "Sale";   
       var method = "get"+type+"Form()";    
       this.window = window;
       this.window[method]().show();        
   }

I'm confused... if this.getSaleForm().show() works, what's wrong with doing var method = "get" + type + "Form"; this[method]().show(); ? You don't want the parens in the method name because you're invoking it after you look it up, and I don't think it'll be a global method, as it's locally scoped to your class, so you don't want to use window. — incutonez
– incutonez, Commented Feb 6, 2014 at 14:37
Then there's something you're not showing us, as type is a string variable in both your provided code and Lorenz Meyer's answer... unless type is some special reserved variable you have, but it shouldn't be if you're local scoping it. — incutonez
– incutonez, Commented Feb 6, 2014 at 15:12

Lorenz Meyer · Accepted Answer · 2014-02-06 15:27:18Z

1

This should be possible without problems. Try something like this :

     init: function () {    
        this.control({
            'salesview #mybutton':{
                click : function(){
                    this.onGenericClick("Sale")
                }
             },
             scope: this
        }); 
     },

onGenericClick : function(type){
   var method = "get"+type+"Form()";    
   this.window = window;
   this.window[method]().show();        
}

You must define the scope of the listener to be able to refer to this. Here's the doc about the listener object. Instead of passing the scope globally in this.control, you could pass it just for one event, like this:

this.control({
    'salesview #mybutton':{
        click: {
            fn: function(){
                this.onGenericClick("Sale")
            }, 
            scope: this
        }
     }
});

edited Feb 6, 2014 at 15:27

answered Feb 6, 2014 at 12:07

Lorenz Meyer

20.1k23 gold badges83 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dev Over a year ago

Seems to have the same result. I get ----Property 'getClientForm()' of object [object global] is not a function---- This line is wrong <<this.window[method]().show();>>. Anyway that's how I see it in other post, if you want to call the method

Collectives™ on Stack Overflow

EXTJS assign function to variable and call it dynamically

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related