PDA

View Full Version : Pass parameters from a view element (e.g. button) to controller



JHuybrighs
22 Jan 2012, 7:54 AM
With ST v2-pr3 views notify controllers using event subscription with component query on the controller side, like in:

The view:

...
items: [{xtype: 'button',
ui: 'normal',
text: 'Tell controller',
action: 'showList'}]
...


Note: I am using my own 'action' property on the button to explicitly define the action that must be executed. It improves a little bit the (in my opinion) not so good binding which exists with v2-pr3 between the controller and the view(s), although it doesn't take away the need of course for the controller to explicitly register for a 'button' event.

Then, the controller:


Ext.define('App.controller.MyController', {
extend: 'Ext.app.Controller',
views: ['MyList'],
init: function() {
// Subscribe for view events/actions
this.control({'button[action="showList"]': { tap: this.onShowList } });
},

onShowList: function(btn) {
console.log('Show list selected via button #' + btn.id +
' having action: ' + btn.action);
this.showSongs();
},

// Actions
showList: function() {
console.log('Activate MyList card/pane');
var viewport = Ext.ComponentQuery.query('mainviewport')[0];
var card = viewport.query('mylist')[0];
viewport.setActiveItem(card);
}
});

How would I have to change this when I also want to offer a parameter (e.g. an id or one or more values of some data component) to the showList method?
Before v2-pr3 I would define a 'handler' in the view for the button with a local function that would fire an event which would then be picked up by the controller. Like in:

...
items: [{xtype: 'button',
ui: 'normal',
text: 'Tell controller',
handler: function() {this.fireEvent('showList', 1001);}]
...


This apparently doesn't work anymore. The handler function doesn't get called in v2-pr3.
Or am I doing something wrong?

I can of course utilize a similar approach as with the 'action' property and add one or more 'parmxyz' properties to button like in:



View:
...
items: [{xtype: 'button',
ui: 'normal',
text: 'Tell controller',
action: 'showList',
parmListId: 1001}]
...

Controller:
...
onShowList: function(btn) {
console.log('Show list selected via button #' + btn.id +
' having action: ' + btn.action +
' with parm: ' + btn.parmListId);
this.showSongs(btn.parmListId);
},
...


Although this works, that seems so wrong for a framework that supports MVC. I therefore keep thinking that I am probably not aware of some functions provided by v2-pr3 to accomplish this in a more gentle way and so any help is highly appreciated to point me in the right direction.

Jos.

abe.elias
22 Jan 2012, 2:50 PM
What you are doing looks correct. Please try again in PR4 (out in the next few days) and let us know if the problem still persists.