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
    41
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi