Extjs4, How to call controller action method from view? - extjs

Question

I want to call method in controller from view when click a cell in grid.
{ header: "<img src='/Content/images/icons/page_white_acrobat.png'/>", width: 30, dataIndex: 'documents', sortable: true, renderer: this.hasDocument,
listeners: {
click: function () {
//how to call method in controller?
}
}
},
Anybody know, please advice me.
Thanks!

Answer 1

You will have a lot of tutorials for extjs 4 on the official forum of the project by Sencha.
When I provide some usefull link to good starting tutorials... with a specific one's about grid management... I think people could look at it really before voting down. Look at it and see yourself some very better ways to do what the question asker wants to do.
Providing direct answers are not always the best way to learn.
Anyway... the following will do the trick:
var controller = this.getController(Ext.String.capitalize(config.controller));
/* where config was an argument of your callback method) */
I suggest you to decouple as much as possible View from Controllers and View from Model. If you look at the projects I have linked, you will find in the Viewport.js a good way to do that. It is calling the controller with .callParent(arguments) method call at the end of these short script.

Answer 2

I am sure the original person have come across the answer or did something to do the trick.
But for the people that may have the same question here is a quick example of what to do:
Don't put a listener in to (MVC)-VIEW of your application. Give the element an ID (in this case the grid)
In the (MVC) - CONTROLLER add this function:
init : function(app) {
this.control({
'myWindow': {
afterrender : this.doAfterRender
/*SAMPLE*/
},
'myWindow #someGrid_ID' : {
select: this.doSelect
/* THIS FUNCTION IS LOCATED in the Controller*/
}
});
},
doSelect : function() {
/*....*/
}
now the controller will listen for the event and react on it.
I hope this helps a few people who might struggle with this.
look at :
http://docs.sencha.com/extjs/4.1.0/#!/guide/application_architecture
http://docs.sencha.com/extjs/4.1.0/#!/api/Ext.dom.Query
Dom Query - Explained:
"myWindow #someGrid_ID" - The dom Query note the # it refers to the ID of the element.
"myWindow" - refers to my window's Alias.
"someGrid_ID" - refers to my grid's ID.
(The grid is a child element of "myWindow")
hope this helps