PDA

View Full Version : Doubt over event handling



newusername
11 Dec 2014, 2:41 AM
Hi ,

I am really surprised when event handler from child as well as pares is being called. I thought it should be get overriden .

Please find code below and below that the more explanation



Ext.onReady(function(){
Ext.define("Ext.form.field.ButtonA", {
extend : 'Ext.button.Button',
alias : "widget.ButtonA",

width : 60, // Default added to the prototype

initComponent : function() {
this.callParent(); // calls initComponent on Ext.button.Button
this.on('click', this.onClickHandler); // note: on the subclasses this is the overriding method
},

onClickHandler : function() {
console.log('ButtonA - click');
}
});




Ext.create('Ext.form.Panel', {
title : 'Simple Form',
bodyPadding : 5,
width : 350,
renderTo : Ext.getBody(),

// The form will submit an AJAX request to this URL when submitted
url : 'save-form.php',

// Fields will be arranged vertically, stretched to full width
layout : 'anchor',
defaults : {
anchor : '100%'
},

// The fields
defaultType : 'textfield',
items : [ {
fieldLabel : 'First Name',
name : 'first',
allowBlank : false
}, {
fieldLabel : 'Last Name',
name : 'last',
allowBlank : false
} ],

// Reset and Submit buttons
buttons : [

{
xtype : "ButtonA",
listeners : {
'click' : function(){
console.log("click listeners");
}
}
}, {
text : 'Submit',
formBind : true, //only enabled once the form is valid
disabled : true,
handler : function() {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
success : function(form, action) {
Ext.Msg.alert('Success', action.result.msg);
},
failure : function(form, action) {
Ext.Msg.alert('Failed', action.result.msg);
}
});
}
}
} ],
renderTo : Ext.getBody()
});
});


So thing , is ButtonA's two click event handler are being called , one is intialized with initComponent and other is intialized with config parameters when it is actually used. And when I clicked on it both event handler are called up. Why so ? I guess the event hanlder which is defined as config parametert that should be get called up . Ofcours I am missing something . please clarify.

chamacs
12 Dec 2014, 2:13 PM
Events aren't handled like methods with regards to overriding. You've basically added two event handler functions to be run when the button is clicked. If you want it to work like an override, I guess you could use this method on the event object that is passed to the listener function.

http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.EventObject-method-stopEvent

Hope this helps.