MVC and Action Column: How to?

[nzmehere]

Hi There,


I am finally digging to to ExtJS to a deeper level, and have come across an challange I just can't work out how to do...


I follow the example here: http://docs.sencha.com/ext-js/4-0/#!/guide/application_architecture


And I like the way you can pass the User interactions in the View back to the controller to handle.


The question I have is: how do I create a custom view event and get the controller to listen/react to this event?


EG:


Looking at this: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.column.Action
In the example there, the "handler" function on the column performs the action, where (in keeping with MVC), is there an example where the event and data is passed back to the Controller for the action to be performed?


What I am after is:


- Have a Grid view. In that grid is an 'Action' column
- When the user clicks on that action column, the view announces a custom event (something like 'myColumnClicked')
- the Controller for that grid view listens for the 'myColumnClicked' event, gets the data from the event and then performs the required actions.


I'm sure this is possible and it's just my learning that is lacking...


Cheers

[mitchellsimoens]

The action column isn't a component. To do this you would have to fire an event on the grid from the handler in the action item.

[kelv1n]

I've recently been looking into this, and just got it working.

Essentially when you define your actioncolumn, you still need to define a handler function for it.. From there you can then fire an Event which allows you to put the logic in your controller.

Example Action Column, the magic here is the this.fireEvent()



{
xtype: 'actioncolumn',
items: [
{
icon: '/images/add.gif',
handler:function (grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
console.log("Fire Event..");
this.fireEvent('editMonitoring', this, rec);
},
scope:me
}
]
}


Then you simply define an Event handler in your Controller, in the same way you would do it for other events -



me.control({

'alias_for_your_grid_panel': {
'editMonitoring': me.editMonitoring,
}

});


Then my handling function looks like this



editMonitoring: function(grid, cell, row){
console.log("Firing Event in controller....");
},


I've only just hacked this together and got it working, so its not 100% and some of the parameters might be named in-appropriately (but I'm still a newb!).

Read this here - http://stackoverflow.com/questions/6625687/how-to-call-an-action-of-controller-from-grids-action-column

(http://stackoverflow.com/questions/6625687/how-to-call-an-action-of-controller-from-grids-action-column)

[nzmehere]

Hi there,

Thanks kelv1n!

That is *exactly* the example I was looking for.

I had gotten sooooo close, but was missing the "scope" argument, and how to add the listener functions to the custom event.

Thanks again!