PDA

View Full Version : Cannot make click event fire in IE7/8 for disabled buttons



itgrunt
25 May 2010, 9:22 AM
OK... Here is some test code I wrote for the scenario that I need.


The screen loads. I need to override the click handlers for buttons and replace it with new click handlers.
When the user clicks on a disabled button, the new click handler should be fired. (In my real project, a property grid displays the widget properties).
In FF and Chrome the disabled buttons' new click event fires properly. However, this does not happen in IE.




<html>
<head>
<link rel="stylesheet" type="text/css" href="../extjs3/resources/css/ext-all.css"/>
<script type="text/javascript" src="../ext-3.2.1/adapter/ext/ext-base.js">
</script>
<script type="text/javascript" src="../ext-3.2.1/ext-all.js">
</script>
</head>

<body>
<div id="main">
</div>
<script>
Ext.onReady(function() {

var panel = new Ext.Panel({
id: 'panel',
layout: 'column',
autoHeight: true,
renderTo: 'main',
items: [
{
id: 'leftcolumn',
columnWidth: .5,
items: [{
xtype: 'button',
disabled: true,
readOnly: true,
text: 'click me',
handler: function(snder, e) {
Ext.MessageBox.alert('original handler for button 1');
}}
]},
{
id: 'rightcolumn',
columnWidth: .5,
items: [{
xtype: 'button',
disabled: false,
text: 'click me',
handler: function(snder, e) {
Ext.MessageBox.alert('original handler', 'button 2\'s original handler');
}}]}
]
});


alertButton = function(a, b, c) {
Ext.MessageBox.alert('button', 'overriden button event');
}
cascadeFunc = function(component) {
if (component.cascade) {
component.cascade(function(e) {

if (e.xtype == 'button' || e.type == 'button') {
var btn = Ext.getCmp(e.id);
btn.on('click', alertButton, this);
if (e.disabled) {
if (e.el.dom.className.indexOf('x-btn') != -1) {
//Ext.fly(btn.container.dom.id).addListener('click', alertButton, this); //this workaround works
Ext.fly(e.id).addListener('click', alertButton, this); //does not work when button is disabled. Works fine for FFox and Chrome.
btn.addListener('click', alertButton, this); //does not work when button is disabled. Works fine for FFox and Chrome.
}

}
}
})
}
}
cascadeFunc(panel);

});
</script>
</body>
</html>


Please note that I have a workaround. I am attaching the event to the button's container in the DOM:
Ext.fly(btn.container.dom.id).addListener('click', alertButton, this);

I have tested this code under ExtJS 3.0 and 3.2.1...

evant
25 May 2010, 6:55 PM
This isn't a bug with the framework. The expected behaviour is that a button doesn't fire any events when it's disabled. What you're doing here is building in custom behaviour. Moving to help.

itgrunt
26 May 2010, 6:10 AM
Thanks Evan. I suppose you're right. I guess I was just excited that I would be logging my first bug! ;-) I'll be sure to use the template next time too!