0

I look for the best method to define the menu actions in ExtJS 4.2.

I used to define the menu action with the handler configuration :

items: [{
    text: 'About...',
    icon: Paths.img + 'information.png',
    handler: function(){MyApp.app.getController('Gui').onMenuAbout()}
},{

I was adviced that this method is not good.

I now found this method : I'm using itemIds and the control-method in controllers.

My view:

Ext.define('Mb.view.gui.HelpMenu', {
    extend: 'Ext.button.Button',
    icon: Paths.img + 'help.png',
    menu: {
        items: [{
            text: 'About...',
            icon: Paths.img + 'information.png',
            itemId: 'menuAbout'
        },{
            ...

My controller:

Ext.define('Mb.controller.Gui', {
    extend: 'Ext.app.Controller',
    init: function(){
        this.control({
            '#menuAbout': {
                click: this.onMenuAbout
            }
        })
    },
    onMenuAbout: function(){...},
    ...

Is this the recommended way to go or is there a better solution ?

Community
  • 1
  • 1
Lorenz Meyer
  • 19,166
  • 22
  • 75
  • 121
  • 1
    This is a good guide to follow: http://docs.sencha.com/extjs/4.1.3/#!/guide/application_architecture – dbrin Oct 11 '13 at 17:40
  • @dbrin You're right this is a good doc for MVC. But it does not talk about menus. – Lorenz Meyer Oct 11 '13 at 17:50
  • ExtJS deals with components. Panels, Windows, Buttons, Menus are all components and will have common standard behavior. Clearly they also have specific behaviors and events but all have common denominator. The MVC guide lays out how to define your customized components and how to interact with them via controller. Follow it CLOSELY and you will succeed. – dbrin Oct 11 '13 at 18:00

0 Answers0