How can I use refs in control actions?

[mboreback]

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' }
}

[celticboyone]

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:

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"

[mboreback]

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'); }});

[celticboyone]

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)

[mboreback]

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

[celticboyone]

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

[filippo.ferrari]

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

 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 : {
                beforerender: this.renderCombo,
                focus : this.resetCampiChiamante,
                select: this.azioniSuChiamanteSelezionato,
                scope: this
            },
.....
..... 

Commented script works properly

[celticboyone]

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:

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.

[filippo.ferrari]

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

[whirling dervish]

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.