Extjs4, How to call controller action method from view?

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!

This is a very bad practice from MVC point of you. Components shouldn't be aware they are used alongside controllers, and they may not be so if you are writing a proper reusable code. You should really let the controller deal with the component events, that's really what controllers are for. Also see [this related question](http://stackoverflow.com/questions/12234747). — Izhaki, Sep 02 '12 at 10:38

BendaThierry.com · Accepted Answer · 2012-09-02T11:19:45.290

2

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.

edited Sep 02 '12 at 11:19

answered Sep 02 '12 at 06:58

BendaThierry.com

2,080
1
15
17

I have done that because I really think it is a started with Sencha ExtJS. He has never try/ask this like that otherwise. – BendaThierry.com Sep 02 '12 at 10:49
OK, now your answer looks much more like a proper answer. Just one thing though, I couldn't find the code you provide in the answer in the link `one's`, could you just share the path to the line provided, so the OP can find it easily when clicking on the link? – Izhaki Sep 02 '12 at 11:03
You will not find the line given upper, because the ExtJS project specified handles the things like a real design pattern approach, with separated concerns. The View has not have to call her controller directly, she must be decoupled as a rendering engine as much as possible. It is done with the [Viewport.js](https://github.com/loiane/extjs4-mvc-basic-array-grid/blob/master/app/view/Viewport.js) file in the project. – BendaThierry.com Sep 02 '12 at 11:11

score 1 · Answer 2 · answered Jul 08 '13 at 16:41

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 :

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

Extjs4, How to call controller action method from view?

2 Answers2