Viewcontroller: repeatedly call the same method with different reference

[josei]

Hi!

In the following example I have one method (onChange) I want to call on several elements (textfield).

Issue: being different references, I have to create three different onChange methods, one for each textfield with different references, or is there another way to call the same method, for example, passing in listeners as parameters the diferents reference?

Ext.define('MyApp.view.foo.Foo', {
    extend: 'Ext.form.Panel',
    xtype: 'foo',
    controller: 'foo',


    items: [{
        xtype: 'textfield',
        fieldLabel: 'Bar1',
        listeners: {
            change: 'onChange'  
        }
    },{
        xtype: 'textfield',
        fieldLabel: 'Bar2',
        listeners: {
            change: 'onChange'  
        }
    },{
        xtype: 'textfield',
        fieldLabel: 'Bar3',
        listeners: {
            change: 'onChange'  
        }
    },{
        xtype: 'combobox',
        fieldLabel: 'combo1',
        reference: 'fooRef1'        
    },{
        xtype: 'combobox',
        fieldLabel: 'combo2',
        reference: 'fooRef2'      
    },{
        xtype: 'combobox',
        fieldLabel: 'combo3',
        reference: 'fooRef3'      
    }]
});


Ext.define('MyApp.view.foo.FooController', {    
         extend: 'Ext.app.ViewController',    
         alias: 'controller.foo',    
                 
         onChange: function( field,newValue, eOpts) {

          var field = this.lookupReference('fooRef');

             if(!Ext.isEmpty(newValue)) {
                field.setHidden(false);
             }
             else {
                field.setHidden(true);
            }
        }   
    }
});

Thanks.

[evant]

You could just specify some custom property:

{
    xtype: 'textfield',
    fieldLabel: 'Bar1',
    myCustomProp: 'fooRef1',
    listeners: {
        change: 'onChange'  
    }
}

onChange: function(field) {
    console.log(field.myCustomProp);
}

[josei]

Hi!

Thanks for relpying evant.

Not quite figured out how to get the field reference in the method.

onChange: function( field,newValue, eOpts) {

  var field = this.lookupReference('myCustomProp'); //?????????


     if(!Ext.isEmpty(newValue)) {
        field.setHidden(false);
     }
     else {
        field.setHidden(true);
    }
}

Can you help me a little more, please.

Thanks.

[josei]

Hi!

Despite several studies, I could not find information that would allow understand how a custom propriety it works in extjs.

Can anyone give me any idea how to use it, particularly in the specific case of my post?

Thanks.

[carol.ext]

Looks like you were oh so close. There is no magic about the custom prop.

I changed the looked up field to xfield to distinguish between the field you are going to hide/show and the field that had the change event occur.

onChange: function( field,newValue, eOpts) {

  var xfield = this.lookupReference(field.myCustomProp); // pass in value of myCustomProp from field


     if(!Ext.isEmpty(newValue)) {
        xfield.setHidden(false);
     }
     else {
        xfield.setHidden(true);
    }
}

[josei]

Hi!

Thanks carol.ext for replying and help.

Works great.

https://fiddle.sencha.com/#fiddle/dql