Where does ExtJS Action fit into MVC pattern

Question

I really like concept of ExtJS Actions. I looked at this example and it is (almost) exactly what I need. Only thing is that I'm trying to use MVC pattern. I have:

• invoicelist (view)
• Inovice (controller)
• Invoice (model)
• Invoices (store)

Where and how do I put definition for Action? Should they be in controller? How to call them and reference them? I need several Actions and they will be in context menu and in menu in invoicelist's toolbar.

Answer 1

Good question. It seems Actions break the MVC pattern by somehow combining View and Controller paradigms under one roof. Because they have handlers they carry functionality with them as well as UI elements like text and icons. However they are not components - in ExtJS sense of the word. Hence you can't target them with a selector.

The best way to think of them is as a config object. No more, no less. A config object is meaningless by itself - and can not be targeted. Same with Actions. They can actually be used as a config object to buttons for example.

Now where should they go? The answer to that I guess is really up to you as a designer. Since they don't confirm to strict MVC pattern you get to make a decision based on how widely you need a particular action be accessible. For a truly global action that is shared by many views you might even put it in the application config: MyApp.app.actions["delete"] for example. Controller might be a good place to put it if that controller will configure multiple views and wire them together with stores. They can potentially wire up multiple views with shared actions.

Hope this helps. Good luck :)