CODEWITHSUNDEEP
javascriptextjs
user1849060
user1849060

Reputation: 651

ext js apply listener to componenet conditionally

I have been given an EXT JS application which contains a datefield that is inside a function (the function also renders other components). At the moment the function is being called twice to create (from a functional perspective) two idenctical datefield components. What separates the two datefield components is that the ID and name are different because they are named depending on the parameter passed into the function.

I want to give the two datefield components slightly differently behaviour without resorting to creating two distinct datefield components. I was wondering whether it is possible to only apply a listener to a component if some condition is satisfied?

EG:

if(some condition is true){
    select: function(datefield, date){
               //code
        }
}

Or whether I would have to give both components all the listeners but perform the conditional inside, so that if the condition is not satisfied then that event is never fired for that component.

EG:

select: function(datefield, date){
    if(some condition is true){
        //code             
    }
    else{
       //Do nothing as this component doesn't need this listener.
}
}

I am fairly sure the second way would work but I'm not sure it's a good idea. The first way seems slightly cleaner; I'm not sure it looks too good to have empty else bodies lying around.

Upvotes: 2

Views: 795

Answers (2)

Guilherme Lopes
Guilherme Lopes

Reputation: 4760

You can use the on method of your datefield.

if(some condition){
    datefield.on('select', function(field,value){
        // code for your select here.
    });
}

I think this should do what you need.

Upvotes: 1

Pedro Reis
Pedro Reis

Reputation: 245

I have done a similar implementation on other components, basically something like:

 var yourComponent = Ext.create('...',{});

 if (something is true){
    yourComponent.on('select', this._doStuff, yourComponent);  
 }

//
 _doStuff: function(component){
   //do stuff
 }

Hope this helps.

Upvotes: 1

Related Questions