Configuring a controller using Sencha Architect 2

Question

I'm trying to achieve something fairly simple: use a controller to attach an event to a specific control, but am struggling to represent this using Sencha Architect.

I have a button named "Login-Button-Login".

In my controller, if I have the code:

config: {
    control: {
        "button": {
            tap: 'onButtonTap'
        }
    }
},

onButtonTap: function(button, e, eOpts) {
    Ext.Msg.alert("onButtonTap fired");
},

The the button works as expected. This is fine, but obviously it will apply to all buttons. I add a reference to "Login-Button-Login" (not my choice of name!):

config: {
    refs: {
        loginButtonTap: 'Login-Button-Login'
    },

    control: {
        "button": {
            tap: 'onButtonTap'
        },
        "Login-Button-Login": {
            tap: 'onButtonTap2'
        }
    }
},

But how can I now use the reference "loginButtonTap" as an item in the control object? Whatever I try using the Sencha Architect controls I just end up with "Login-Button-Login" being referenced directly.

Relatedly, how can I link this controller to the "Login" view which contains the button? Surely I don't need to use full selectors for each reference? Clearly even if I could make this work, it currently would not function as Login-Button-Login needs to reference the "Login" view.

@Viswa which part is not clear? I've laid everything out as clearly as possible. — Ben Parsons
Login-Button-Login is a id or ItemId or action ?.. what you mean "how can i now use the reference "loginButtonTap" as an item in the control object".. do you want to get button object in controller ? — Viswa
Login-Button-Login is the id of an element in the GUI. Not in the controller object, in the control section of the config. What I want is the code given by the second post in this link: sencha.com/forum/… - the code is fine, but Sencha Architect does not allow this, and if I edit the file then reopen in SA, the changes are deleted. — Ben Parsons

pckill pckill · Accepted Answer · 2013-08-29T10:13:59

Just use an id (or itemId) of the control as the value of the controlQuery in event handler config:

config: {
    control: {
        "#btnWhatever": {
            tap: 'onWhateverTap'
        },
}

I prefer to use this method of attaching events to elements, since I am too lazy to do double work - specify the reference to the button, and then specify that reference in event handlers controlQuery. onWhateverTap gets the reference to the button as an argument and most of the time you do not need that reference anywhere else.

Configuring a controller using Sencha Architect 2

1 Answers