PDA

View Full Version : ExtJs4 and its MVC: how to move all exec code from “inline” handlers to Controller?



Tsukasa
9 Jul 2012, 6:35 AM
n ExtJS 4 the new feature is Model-View-Controller architecture. Yet ExtJs4 examples are made for some simplified cases and thus violating that ideology.

I have created a standard hierarchy of MVC javascript files (controller, view, model, store). In view file, I have at some point a button.

If you check the examples online, it's typically such code:


items: [
{
xtype: 'button',
styleHtmlContent: true,
text: 'Upload image',
flex: 1,
formBind: false,
handler: function() {...}
...
}]
so even ExtJS4 examples are "suggesting" to put executable part inside form definition. While MVC does require all action to reside in controller javascript file.

Another issue is the actioncolumn in a table. Below is a definition of the column in standard table configuration:


xtype: 'actioncolumn',
width: 50,
fixed: true,
altText: 'Actions',
items: [
{
icon: '/delete.png',
tooltip: 'Delete',
handler:function (grid, rowIndex,colIndex){
...}
The thing is, here handler accepts some grid-specific parameters!

Just for reminder, in extjs 4 canonical example of controller file is something like


Ext.define('MyApp.controller.mainController', {
extend: 'Ext.app.Controller',

onButtonClick: function(button, e, options) {
// alert("Button has been clicked "+button);
// TODO which button?

},

init: function() {
this.control({
"button": {
click: this.onButtonClick
}
});

}
});
My question is how to rearrange the code in order to: 1. remove handler: directives from any button on screen 2. attach actions to buttons in the controller file, including, of course, separate action for separate buttons. 3. Do the same for actioncolumn table columns, and successfully recognise which action on which row and column was triggered (that is, completely transfer function call from "handler" to controller file).

Thanks in advance, Askar

scottmartin
9 Jul 2012, 11:14 AM
You need to use action property on your button, then you can trap it in your controller



{
xtype: 'button',
text: 'Upload image',
action: 'uploadImage'
}




'app-list-image button[action=uploadImage]' : {
click : this.uploadImage
},


Scott.

scottmartin
9 Jul 2012, 11:17 AM
Also, you can review this article:
http://www.sencha.com/learn/the-mvc-application-architecture/

Several of our examples are MVC based as well.

Scott.

stimpy
9 Jul 2012, 1:05 PM
I would just point out that having the examples NOT in MVC format makes them easier to understand and more widely useful .

A "pure" MVC JS front end is not an acceptable option for everyone.

In a perfect world each example would be availible in both formats i guess.

Tsukasa
10 Jul 2012, 3:37 AM
Many thanks for the replies, they help a great deal!

I would just point out that having the examples NOT in MVC format makes them easier to understand and more widely useful .

A "pure" MVC JS front end is not an acceptable option for everyone.

In a perfect world each example would be availible in both formats i guess.

Well, this is a matter of formality and correctness of work. For tiny examples MVC looks like overkill. But real projects are always quite large. MVC is de-facto always used in desktop coding, so typical programmer understands it. He never think of putting executable code inside C++ definition of his window.

MVC is also enforced in store-view-model paradigm which has no viable alternative in ExtJS. It's a great model. Controller part is just the last part of it.