1. #1
    Sencha User
    Join Date
    Sep 2011
    Posts
    6
    Vote Rating
    0
    sand1980 is on a distinguished road

      0  

    Default Unanswered: Click event not getting registered from within a controller in ExtJS 4 MVC

    Unanswered: Click event not getting registered from within a controller in ExtJS 4 MVC


    My button click event subscribed in the controller is getting fired. Here is the code.
    Code:
    Ext.define('P.e.w.controller.WebAppMasterController', {
        extend: 'P.e.w.controller.IController',
        views: [
            'WebAppMasterView'
        ],
        refs: [
            {
                ref: 'webAppView',
                selector: 'WebAppMasterView'
            }
        ],
        init: function () {
             this.control({
                'WebAppMasterView': {
                    afterrender: this.viewafterrender
                }
            }, {
                'button[action=save]': {
                    click: function () {
                        alert('dslksd');
                    }
                }
            }
        },
        viewafterrender: function (panel) {
            alert();
        }
    });

    IController extends "Ext.app.Controller". In the above code "afterrender" event is getting triggered. but the button click event is not getting triggered. The view code is pasted below
    Code:
    Ext.define('P.e.w.view.WebAppMasterView', {
        extend: 'P.w.l.Header',
        alias: 'widget.WebAppMasterView',
        constructor: function (config) {
            var me = this;
            me.centerregion = me.createCenterRegion(config);
            Ext.applyIf(config, {
                favoriteBar: true,
                items: [me.centerregion],
                menuWidth: 0
            });
            this.callParent([config]);
        },
         createBody: function () {
            var me = this;
            if (!me.controlPanel) {
                me.controlPanel = Ext.create('Ext.Panel', {
                    layout: 'fit'
                });
            }
            return me.controlPanel;
        },
         createCenterRegion: function (config) {
            var me = this,
                centerPanel = Ext.create('Ext.Panel', {
                    region: 'center',
                    layout: 'fit',
                    tbar: {
                        xtype: 'WorkRequestMenuBar',
                        id: 'workrequestmenubar' 
                    },
                    defaults: {
                        border: false
                    },
                    items: [me.createBody()]
                });
        return centerPanel;
        }
    });

    Code of WorkRequestMenuBar
    Code:
    Ext.define('P.e.w.view.WorkRequestMenuBar', {
        extend: 'Ext.Toolbar', alias: 'widget.WorkRequestMenuBar',
        constructor: function (config) {
            config = config || {};
            Ext.apply(config, {
                defaults: {
                    scale: 'large',
                    cls: 'x-btn-text-icon',
                    iconAlign: 'top'
                },
                items: [
                        {
                            text: 'NEW_WORK_REQUEST',                        
                            iconCls: 'menubar-createWorkRequest',
                            action: 'save'
                        },
                        {
                            text: 'OVERVIEW',
                            iconCls: 'menubar-overview'
    
    
                        }, '->', {
                            iconCls: 'icon-biggerHelp',
                            width: 80,
                            text: 'HELP'
                        }
                    ]
            });
            this.callParent([config]);
        }
    });


    Any hints on what is going wrong here?
    Last edited by sand1980; 30 Jan 2013 at 11:03 PM. Reason: Extra empty code blocks got added..

  2. #2
    Sencha - Community Support Team friend's Avatar
    Join Date
    Apr 2011
    Posts
    895
    Answers
    106
    Vote Rating
    27
    friend has a spectacular aura about friend has a spectacular aura about

      0  

    Default


    I believe your button needs to be prefixed with the view name, as specified by your selector:

    Code:
    'WebAppMasterView button[action=save]': {
      click: function () {
        alert('dslksd');
      }
    }

  3. #3
    Sencha User
    Join Date
    Sep 2011
    Posts
    6
    Vote Rating
    0
    sand1980 is on a distinguished road

      0  

    Default


    Hi Friend,
    Thanks for the reply. I have tried this and different permutation combination. The things tried are as follows.
    1. WebAppMasterView button[action=save]
    2. WebAppMasterView > panel > WorkRequestMenuBar button[action=save]
    3. WebAppMasterView WorkRequestMenuBar button[action=save]
    4. Also the following in the refs
    Code:
    refs: [
            ........., {
                ref: 'toolBar',
                selector: 'WebAppMasterView > panel > WorkRequestMenuBar'
            }
        ]
    ......
    this.control(....., {
                'toolBar button[action=save]': {
                    click: function () {
                        alert('dslksd');
                    }
                }
            }

    Any other suggestions??

  4. #4
    Sencha User
    Join Date
    Sep 2011
    Posts
    6
    Vote Rating
    0
    sand1980 is on a distinguished road

      0  

    Default


    I am still not able to solve it. Any other suggestions from anyone??

  5. #5
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    42
    Answers
    6
    Vote Rating
    2
    sriram139 is on a distinguished road

      0  

    Default


    One of the below approaches might help:

    1) Fire an event from the handler of save button, say this.fireEvent('saveform'); and control it in controller as below:
    Code:
    'button[action=save]' : 
    {
    	saveform: this.saveFormHandler
    },
    2) Use itemId to access the button, say
    Code:
    {
      text: 'NEW_WORK_REQUEST',                        
      iconCls: 'menubar-createWorkRequest',
      itemId: 'saveButtonId'
    }
    And then change the selector in control as '[itemId=saveButtonId]'

    3) Sometimes 'id' configs may cause issues in event handling, not sure in your case, but better avoid 'id' in below tbar definition:
    Code:
    tbar: {
            xtype: 'WorkRequestMenuBar',
             id: 'workrequestmenubar' 
    },

Thread Participants: 2

Tags for this Thread