View Full Version : MVC Controller not receiving autoCreate form button events

23 Aug 2012, 10:58 AM
Still struggling a bit with the event "wiring" of MVC with SA.

I have a form that pops up within a window when the user clicks on a grid toolbar button. That works great now, and the form and its window are created via "autoCreate" and the getCreateVolumeWizard() getter method. So far, so good...

The problem is, my form button events (e.g., from create/submit and cancel buttons) do not get routed to the NewVolumeController for some reason.

I have tried all kinds of selector queries, even the generic "button" (which picks up events from my grid just fine), but still no form button events delivered to the controller with an "autoCreated" form. When a view gets dynamically instantiated via the "autoCreate" method, do its button and other events get routed back to the controller as expected? (doesn't seem like it, but I could well be doing something wrong, as I'm still learning SA and MVC)

Ideas or suggestions?


Ext.define('VolumesApp.controller.NewVolumeController', {
extend: 'Ext.app.Controller',

models: [
stores: [
views: [

refs: [
autoCreate: true,
ref: 'CreateVolumeWizard',
selector: 'CreateVolumeWizard',
xtype: 'createvolume'

onButtonClick: function(button, e, options) {
var itemId = button.itemId;

alert("button '" + itemId + "' clicked!");

switch (itemId)
case 'submit':

alert("Create button submit pressed!");

case 'cancel':
alert("Cancel button pressed");

var msg = btnName + " button clicked!";

createVolume: function() {
var createDialogWin = this.getCreateVolumeWizard();

createDialogWin.show(); // creates and displays the Create Volume dialog

var form = createDialogWin.down('form');
var record = Ext.create('VolumesApp.model.VolumesModel');


init: function(application) {
"button": {
click: this.onButtonClick


23 Aug 2012, 1:50 PM
Bump - in further research, it seems I should be using "control" definitions to establish event routing for my controller - but where is "control" in SA?? How does one add a "control" in SA?

[begin rant]

The SA / MVC documentation is still extremely lacking. For example, on the one hand, we have a good explanation of how controllers operate conceptually (http://docs.sencha.com/touch/2-0/#!/guide/controllers), but then there's a complete disconnect with HOW to actually implement the concepts within SA! (this was reported months ago in comments and still isn't addressed - are we talking to ourselves here??)

These disconnects and lack of complete examples and step-by-step, useful demos wastes everyone's time. I realize ya'll are mostly developers and architects who prefer to write code and dream new stuff up, but how about properly documenting what you've already delivered. The product is extremely compelling, but trying to put it into practice is equally frustrating...

And please don't point me to the Building Your First App tutorial ever again ;)

It's time for more folks at Sencha to stop coding and provide forum support while the others finish the documentation, while whoever's remaining works on creating useful Demo Apps. You have the makings of a game-changing product for developers here - please finish the job right for everyone's sake.

[end rant]

I really like SA and the ability to visually prototype and model apps, with lots of code automatically generated for me. Big win.

I'm starting to like the idea of separating the business logic into controllers so it's not strewn throughout the app... but for these tools and concepts to catch fire and dominate (both for Sencha and for us customers who need to *increase* our productivity, we need Sencha to bring the docs, examples and forum support up to the same level of excellence that SA and ExtJS are finally reaching. I mean, it taking hours to intercept a simple button event isn't helping my productivity here...

Meanwhile, I'll keep investing copious hours of my life trying to figure this stuff out... (and appreciate it when I do get some assistance from time to time).

23 Aug 2012, 2:13 PM
rbraddy -

Thanks for the feedback. Let me assure you that we are working on the docs and that we took a lot of time for the 2.1 release cycle to get matching docs.

Could you please check out this article?

Specifically this section about how to use controller actions:

23 Aug 2012, 3:34 PM
Thanks for the links. Yes, this is a good example, explaining the essentials of how controllers work with action and event binding with component queries.

It still doesn't answer my question about "controls", which is only shown as a SA-generated init config item. The other article discusses control as if it's something we should be setting as a config parameter. It the difference using SA vs. editing ExtJS code directly?

23 Aug 2012, 3:49 PM
It the difference using SA vs. editing ExtJS code directly?

I guess we should work into the article that this code will be generated for you. Architect knows enough information that it doesn't require you to write that code.

23 Aug 2012, 3:51 PM
Okay. I got it working by assigning an itemId to my form panel, then setting controlQuery value to "#createVolumeForm button" in the ControllerAction.


23 Aug 2012, 4:24 PM
What confused me was the text below, which is in the Touch controller docs (http://docs.sencha.com/touch/2-0/#!/guide/controllers). It makes it seem like you need to configure "control".

This kind of conceptual code fragment is sometimes helpful, with the proper context - this is a Touch API doc that goes into great detail on references and controllers that Google dredged up (to be fair, it's not an SA doc), so I suppose there's the dichotemy of trying to explain the richness of the API vs. how to do it SA - and my bad for being in the API docs when trying to develop in SA, but when you're thirsty for info, you'll drink almost anything :)

Sorry about the rant. The answer and fix wasn't that hard...I was just confused by the different docs.
I maintain my points about more examples being needed, which I know are underway, given the sticky post.

Appreciate the response and support.

ControlThe sister config to refs (http://docs.sencha.com/touch/2-0/#!/api/Ext.app.Controller-cfg-refs) is control (http://docs.sencha.com/touch/2-0/#!/api/Ext.app.Controller-cfg-control). Control (http://docs.sencha.com/touch/2-0/#!/api/Ext.app.Controller-cfg-control) is the means by which your listen to events fired by Components and have your Controller react in some way. Control accepts both ComponentQuery selectors and refs as its keys, and listener objects as values - for example:

Ext.define (http://docs.sencha.com/touch/2-0/#!/api/Ext-method-define)('MyApp.controller.Main', { extend: 'Ext.app.Controller (http://docs.sencha.com/touch/2-0/#!/api/Ext.app.Controller)', config: { control: { loginButton: { tap: 'doLogin' }, 'button[action=logout]': { tap: 'doLogout' } }, refs: { loginButton: 'button[action=login]' } }, doLogin: function() { // called whenever the Login button is tapped }, doLogout: function() { // called whenever any Button with action=logout is tapped }});Here we have set up two control declarations - one for our loginButton ref and the other for any Button on the page that has been given the action 'logout'. For each declaration we passed in a single event handler - in each case listening for the 'tap' event, specifying the action that should be called when that Button fires the tap event. Note that we specified the 'doLogin' and 'doLogout' methods as strings inside the control block - this is important.
You can listen to as many events as you like in each control declaration, and mix and match ComponentQuery selectors and refs as the keys.