1. #1
    Sencha User
    Join Date
    Sep 2010
    Posts
    69
    Vote Rating
    0
    mboreback is on a distinguished road

      0  

    Default How can I use refs in control actions?

    How can I use refs in control actions?


    I have tried to figure out how to use my refs in control actions.
    Doues anyone know how to do this in Architect.

    config: {
    refs: {
    myView: 'myview' },
    control: { myView: { 'onMyCusomEvent' }
    }

  2. #2
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    52
    Vote Rating
    11
    celticboyone will become famous soon enough

      1  

    Default


    Yes, you use references so that the Controller can find your controls so you can write code and act on them. Like this:

    -Create a new project, add a panel and a toolbar and then drop a button on the toolbar.
    -Put an id of "myButton" on the button (no quotes)
    -Now create a Controller and add a "Reference" to it with name "myButton" and selector "#myButton"
    -Now add a Actions -> Controller Action to the Controller with a target of "Ext.button" and event "tap"
    -Now select the new action under the controller and switch to code view - enter "alert('hello');

    Your controller code should look like this:

    Code:
    Ext.define('MyApp.controller.MyController', {
        extend: 'Ext.app.Controller',
        config: {
            refs: {
                myButton: '#myButton'
            },
    
    
            control: {
                "button": {
                    tap: 'onButtonTap'
                }
            }
        },
    
    
        onButtonTap: function(button, e, options) {
            alert('Hello myButton');
        }
    
    
    });

    There you have it. I have attached an example. One other super important thing is that Sencha automatically creates a "getter" for any controller references so you can access them later - the above button for example. So, you can just do: this.getMyButton(); any time and you have a reference to the button (you could change it's text for example) - put a 'get' in front of the reference name and capitalize the first letter - "getMyButton"
    Attached Files

  3. #3
    Sencha User
    Join Date
    Sep 2010
    Posts
    69
    Vote Rating
    0
    mboreback is on a distinguished road

      0  

    Default


    Thanks for your reply.
    This example will capter event from any button , if I am corect.

    How can I in Architect change your code so it looks like below, to make it tied to the referense of the button?

    Ext.define('MyApp.controller.MyController', { extend: 'Ext.app.Controller', config: { refs: { myButton: '#myButton' }, control: { myButton: { tap: 'onButtonTap' } } }, onButtonTap: function(button, e, options) { alert('Hello myButton'); }});

  4. #4
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    52
    Vote Rating
    11
    celticboyone will become famous soon enough

      0  

    Default


    Code:
    Ext.define('MyApp.controller.MyController', {
        extend: 'Ext.app.Controller',
        config: {
            refs: {
                myButton: '#myButton',
                myDatePicker: '#myDatePicker'
            },
    
    
            control: {
                "myButton": {
                    tap: 'onMyButtonTap'
                }
            }
        },
    
    
        onMyButtonTap: function(button, e, options) {
            alert('Hello myButton');
        }
    
    
    });

    Is that what you are looking for? To do this select the action and explicitly set the "controlQuery" to "myButton" (and function name 'fn' too if you wish)

  5. #5
    Sencha User
    Join Date
    Sep 2010
    Posts
    69
    Vote Rating
    0
    mboreback is on a distinguished road

      0  

    Default


    I belive that to make it use the referense myButton must be unquated.

    But I give it a try, to see if it works.

    Big thanks

  6. #6
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    52
    Vote Rating
    11
    celticboyone will become famous soon enough

      0  

    Default


    Yes, no "quotes" Sencha puts the quotes on the example I showed - it works really well.

  7. #7
    Sencha User filippo.ferrari's Avatar
    Join Date
    Apr 2010
    Location
    Sanremo - Italy
    Posts
    126
    Vote Rating
    1
    filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute

      0  

    Default


    I can't use it in my project, can you see what's wrong?

    PHP Code:
     refs: [
            {
                
    ref'editorCdc',
                
    selector'combobox[name="cdc"]'
            
    },
            {
                
    ref'editorChiamante',
                
    selector'combobox[name="chiamante"]'
            
    },
    .....

    init: function(application) {

            
    this.ind 0;

            var 
    me this;
            
    me.control({
                
    /*
                'combobox[name="chiamante"]' : {
                beforerender: this.renderCombo,
                focus : this.resetCampiChiamante,
                select: this.azioniSuChiamanteSelezionato,
                scope: this
                },
                */
                
    editorChiamante : {
                    
    beforerenderthis.renderCombo,
                    
    focus this.resetCampiChiamante,
                    
    selectthis.azioniSuChiamanteSelezionato,
                    
    scopethis
                
    },
    .....
    ..... 
    Commented script works properly

  8. #8
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    52
    Vote Rating
    11
    celticboyone will become famous soon enough

      0  

    Default


    Ah, you are creating an Ext JS program. Ok, same thing. The problem with your code is that the comboBox does not yet exist when the "init" function of the Controller is called. Use the "onlaunch" function instead if you want to initialize components at startup. Example (for a comboBox with id=cdc), when you run this it should pop up a message with the id of the combox:

    Code:
    Ext.define('MyApp.controller.MyController', {
        extend: 'Ext.app.Controller',
    
    
        refs: [
            {
                ref: 'cdc',
                selector: '#cdc'
            }
        ],
    
    
        onLaunch: function() {
            alert('Combox id = ' + this.getCdc().getId());
        }
    
    
    });
    
    


    I have attached this working example.

    Attached Files

  9. #9
    Sencha User filippo.ferrari's Avatar
    Join Date
    Apr 2010
    Location
    Sanremo - Italy
    Posts
    126
    Vote Rating
    1
    filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute

      0  

    Default


    Ok for every event listener select, focus etc. but not for 'beforerender'.

  10. #10
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    88
    Vote Rating
    5
    whirling dervish is on a distinguished road

      0  

    Default


    Quote Originally Posted by celticboyone View Post
    Yes, no "quotes" Sencha puts the quotes on the example I showed - it works really well.
    Sorry to bring this thread back from the dead, but I can't get this to work for me.

    How exactly do you enter the ref inside control without quotes? Or is that a limitation of Sencha Architect?

    Even if manually edit the file to remove the quotes around the ref, it doesn't work for me.