[Ext2.0] Change request Ext.Button::onClick

[christocracy]

would it be ok to make a slight change in the order of event-firing in Ext.Button::onClick.

I'd like the Button's 'click' handler fired before menuShow() fires.

I'm attaching forms to an Ext.Menu and I'm using the button's click event to show/hide certain fieldsets.

before:


// private
onClick : function(e){
if(e){
e.preventDefault();
}
if(e.button != 0){
return;
}
if(!this.disabled){
if(this.enableToggle && (this.allowDepress !== false || !this.pressed)){
this.toggle();
}
if(this.menu && !this.menu.isVisible() && !this.ignoreNextClick){
this.showMenu();
}
this.fireEvent("click", this, e);
if(this.handler){
this.el.removeClass("x-btn-over");
this.handler.call(this.scope || this, this, e);
}
}
},


proposed


/***
* onClick
* override Ext.Button::onClick,
* @param {Object} e
*/
onClick : function(e){
if(e){
e.preventDefault();
}
if(e.button != 0){
return;
}
if(!this.disabled){
this.fireEvent("click", this, e); // <-- fire click-event first, before showMenu

if(this.enableToggle && (this.allowDepress !== false || !this.pressed)){
this.toggle();
}
if(this.menu && !this.menu.isVisible() && !this.ignoreNextClick){
this.showMenu();
}
// <-- click-event used to be fired here.

if(this.handler){
this.el.removeClass("x-btn-over");
this.handler.call(this.scope || this, this, e);
}
}
}

[tryanDLS]

Why is this reported as a bug? Moving to Discussion.

[brian.moeskau]

Or maybe something like this (changes highlighted)?


Ext.onReady(function(){
Ext.override(Ext.Button, {
initComponent : function(){
Ext.Button.superclass.initComponent.call(this);

this.addEvents(
'beforeclick',
/**
* @event click
* Fires when this button is clicked
* @param {Button} this
* @param {EventObject} e The click event
*/
"click",
/**
* @event toggle
* Fires when the "pressed" state of this button changes (only if enableToggle = true)
* @param {Button} this
* @param {Boolean} pressed
*/
"toggle",
/**
* @event mouseover
* Fires when the mouse hovers over the button
* @param {Button} this
* @param {Event} e The event object
*/
'mouseover',
/**
* @event mouseout
* Fires when the mouse exits the button
* @param {Button} this
* @param {Event} e The event object
*/
'mouseout',
/**
* @event menushow
* If this button has a menu, this event fires when it is shown
* @param {Button} this
* @param {Menu} menu
*/
'menushow',
/**
* @event menuhide
* If this button has a menu, this event fires when it is hidden
* @param {Button} this
* @param {Menu} menu
*/
'menuhide',
/**
* @event menutriggerover
* If this button has a menu, this event fires when the mouse enters the menu triggering element
* @param {Button} this
* @param {Menu} menu
* @param {EventObject} e
*/
'menutriggerover',
/**
* @event menutriggerout
* If this button has a menu, this event fires when the mouse leaves the menu triggering element
* @param {Button} this
* @param {Menu} menu
* @param {EventObject} e
*/
'menutriggerout'
);
if(this.menu){
this.menu = Ext.menu.MenuMgr.get(this.menu);
}
if(typeof this.toggleGroup === 'string'){
this.enableToggle = true;
}
},
onClick : function(e){
if(e){
e.preventDefault();
}
if(e.button != 0){
return;
}
if(!this.disabled && this.fireEvent("beforeclick", this) !== false){
if(this.enableToggle && (this.allowDepress !== false || !this.pressed)){
this.toggle();
}
if(this.menu && !this.menu.isVisible() && !this.ignoreNextClick){
this.showMenu();
}
this.fireEvent("click", this, e);
if(this.handler){
this.el.removeClass("x-btn-over");
this.handler.call(this.scope || this, this, e);
}
}
}
});

// Test:
var cb = new Ext.form.Checkbox({
boxLabel: 'Allow click',
checked: true,
renderTo: document.body
});
var btn = new Ext.Button({
text: 'Foo',
renderTo: document.body,
listeners: {
'click': function(){ alert('clicked'); },
'beforeclick': function(){ alert('not yet...'); return cb.getValue(); }
}
});
});

[jay@moduscreate.com]

Can't an override achieve this?

[mystix]

@brian, this works too ;)


Ext.Button.prototype.addEvents({
'beforeclick': true
});
Ext.override(Ext.Button, {
onClick : function(e){
if(e){
e.preventDefault();
}
if(e.button != 0){
return;
}
if(!this.disabled && this.fireEvent("beforeclick", this) !== false){
if(this.enableToggle && (this.allowDepress !== false || !this.pressed)){
this.toggle();
}
if(this.menu && !this.menu.isVisible() && !this.ignoreNextClick){
this.showMenu();
}
this.fireEvent("click", this, e);
if(this.handler){
this.el.removeClass("x-btn-over");
this.handler.call(this.scope || this, this, e);
}
}
}
});


i realised (just a few days ago) the addEvents() method can be called after any object has been declared simply by calling it from the respective object's prototype. HTH

[christocracy]

@djliquidice: I am overriding this currently, but it's not an elegant sol'n.

beforeclick would be perfect, thankyou.

cheers.