Home/ Questions/Q 8208773
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T09:29:26+00:00

In ExtJS 4 the new feature is Model-View-Controller architecture. Yet ExtJs4 examples are made

  • 0

In 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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The ExtJs examples are not all up-to-date with the MVC architecture. What’s more, MVC is not a compulsory design – some users might prefer not using it, so still important to show examples without MVC.

    Pretty much everything you’ve asked is answered in this docs tutorial.

    With regards to 3: I think it is some misleading from your part. Although you do define `this.onButtonClick’ in your controller, the called function will still get all the parameters, just like your button handler method would – the caller component is usually the first parameter delivered with each event. You can, of course, just define more specific selectors using actions or ids in your controller. Again see the link above for an example.

    • 0