Results 1 to 6 of 6

Thread: Viewcontroller: repeatedly call the same method with different reference

  1. #1
    Sencha Premium User
    Join Date
    Jul 2014
    Posts
    269
    Answers
    15

    Default Answered: Viewcontroller: repeatedly call the same method with different reference

    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?

    Code:
    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.

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

    Code:
    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);
        }
    }

  3. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,256
    Answers
    759

    Default

    You could just specify some custom property:

    Code:
    {
        xtype: 'textfield',
        fieldLabel: 'Bar1',
        myCustomProp: 'fooRef1',
        listeners: {
            change: 'onChange'  
        }
    }
    
    onChange: function(field) {
        console.log(field.myCustomProp);
    }
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  4. #3
    Sencha Premium User
    Join Date
    Jul 2014
    Posts
    269
    Answers
    15

    Default

    Hi!

    Thanks for relpying evant.

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

    Code:
    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.

  5. #4
    Sencha Premium User
    Join Date
    Jul 2014
    Posts
    269
    Answers
    15

    Default

    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.

  6. #5
    Sencha User carol.ext's Avatar
    Join Date
    Jun 2007
    Location
    Littleton, Colorado, USA
    Posts
    707
    Answers
    25

    Default

    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.

    Code:
    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);
        }
    }

  7. #6
    Sencha Premium User
    Join Date
    Jul 2014
    Posts
    269
    Answers
    15

    Default

    Hi!

    Thanks carol.ext for replying and help.

    Works great.

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



Posting Permissions

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