PDA

View Full Version : Click event not getting registered from within a controller in ExtJS 4 MVC



sand1980
30 Jan 2013, 7:08 AM
My button click event subscribed in the controller is getting fired. Here is the 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

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

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?

friend
30 Jan 2013, 10:37 AM
I believe your button needs to be prefixed with the view name, as specified by your selector:



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

sand1980
30 Jan 2013, 11:00 PM
Hi Friend,
Thanks for the reply. I have tried this and different permutation combination. The things tried are as follows.

WebAppMasterView button[action=save]
WebAppMasterView > panel > WorkRequestMenuBar button[action=save]
WebAppMasterView WorkRequestMenuBar button[action=save]
Also the following in the refs

refs: [
........., {
ref: 'toolBar',
selector: 'WebAppMasterView > panel > WorkRequestMenuBar'
}
]
......
this.control(....., {
'toolBar button[action=save]': {
click: function () {
alert('dslksd');
}
}
}


Any other suggestions??

sand1980
4 Feb 2013, 4:18 AM
I am still not able to solve it. Any other suggestions from anyone??

sriram139
4 Feb 2013, 7:36 AM
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:

'button[action=save]' :
{
saveform: this.saveFormHandler
},


2) Use itemId to access the button, say

{
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:

tbar: {
xtype: 'WorkRequestMenuBar',
id: 'workrequestmenubar'
},