PDA

View Full Version : resize event fired instead of onClick for Ext.Button elements



techakone
11 Aug 2010, 12:08 PM
Hi all,
I am running into a very weird bug in Ext JS. I am using buttons(ExtJS) button all over my application and have been developing in Firefox. I recently tried to run my app in IE6 and to my surprise, the onclick event is not fired on all my button elements. None work. The toggleHandler function works fine, but not onClick. I did some debugging and it came out that the 'resize' event is being fired instead. I have no idea what is causing this. Anybody ran into something similar?

j_mmontero
11 Aug 2010, 1:19 PM
You mean the "click" event, right. Do you have some code to post?

aconran
11 Aug 2010, 1:43 PM
Are you binding to the 'click' event of the button? Are you using the handler function configuration of Button?

Could you post a single example of defining your button and binding the event handler?

techakone
12 Aug 2010, 8:03 AM
Thanks for the response. Yes I mean the click event. Here is a sample code i am using:



buttons.push({
id: 'viewFirmBckgBtn',
xtype: 'button',
enableToggle: true,
style: 'padding-left: 5px;',
width: 120,
text: '<b>My Background</b>',
toggleHandler: function(button, pressed) {
button.addClass('x-btn-pressed');
if (Ext.getCmp('view3177Btn'))
Ext.getCmp('view3177Btn').getEl().removeClass('x-btn-pressed');
if (Ext.getCmp('rptTimeBtn'))
Ext.getCmp('rptTimeBtn').getEl().removeClass('x-btn-pressed');
if (Ext.getCmp('assignmentBtn'))
Ext.getCmp('assignmentBtn').getEl().removeClass('x-btn-pressed');
},
handler: function(){
my.popups.firmInformation(buttonConfig.eventId);
}
});

var buttonPanel = new Ext.Panel({
border: false,
hideBorders: true,
width: browserSize.width - 10 - 13,
style:'float:right',
autoHeight:true,
items: [{
xtype: 'panel',
border: false,
hideBorders: true,
layout: 'column',
defaults: {
cls: 'standardLabel'
},
items: buttons
}]
});

return buttonPanel;


By the way, the issues that i encountered are better and exactly documented in this thread here:

http://www.sencha.com/forum/showthread.php?86925-resize-event-fired-and-stomping-on-button-click-event-object

and the fix suggested by Condor from the ExtJS team on a related thread here:
http://www.sencha.com/forum/showthread.php?86944-resize-event-fired-and-stomping-on-button-click-event-object

seemed to work except that in my version there was only two instances of

Ext.EventObject.setEvent(e)

Is that an acceptable solution?

techakone
12 Aug 2010, 8:18 AM
I just found out that applying the fix from Condor introduces another issue with ComboBoxes. Trying to select a value from a ComboBox field yields this error:



htmlfile: Member not found
at /common/scripts/thirdParty/ext/ext-all-debug.js [3326]
JScript anonymous function
code: me.button = e.button ? btnMap[e.button] : (e.which ? e.which - 1 : -1)
at /common/scripts/thirdParty/ext/ext-all-debug.js [3312]
JScript anonymous function
code: this.setEvent(e.browserEvent || e)
at common/scripts/thirdParty/ext/ext-all-debug.js [2894]
h
code: e = new Ext.EventObjectImpl(e)
at /common/scripts/thirdParty/ext/ext-all-debug.js [1881]
JScript anonymous function
code: fn.apply(scope, args || [])


The code i invoked is:



new Ext.form.ComboBox({
id: nameId,
hideLabel: false,
displayField: 'racActionDesc',
valueField: 'racActionVal',
mode: 'local',
triggerAction: 'all',
value: (val?val:'1'),
editable: false,
width: 100,
store: myActionStore,
listeners: {
select: function(cb, rec){
if (eventId == null) {
var selectedList = marcs.util.selection.getSelectedRecords(selectedField);
count = selectedList.length;
}
else
count = 1;
if (count > 0) {
var field = Ext.getCmp(nameId);
var selVal = field.value;
if (selVal > 0) {
marcs.popups.racActionParam(eventId, selVal, field.lastSelectionText);
}
}
else {
alert('Please select at least one item to continue...');
}
}
}
});

aconran
12 Aug 2010, 2:24 PM
You should not need to do that.

This typically happens when you are using a debugger and the global EventObject points to something new and is no longer accurate... What is the buttonConfig object in your handler?

Animal
12 Aug 2010, 9:34 PM
You are using toggle buttons wrong!

YOU don't set the pressed/unpressed state. The whole point is that it does all that for you.

Configure all the buttons which should be associated with a toggleGroup

Then you just implement a toggle handler, and depending on the "state" do what you need. Ext handles setting the state and the styling.

techakone
13 Aug 2010, 7:40 AM
You should not need to do that.

This typically happens when you are using a debugger and the global EventObject points to something new and is no longer accurate... What is the buttonConfig object in your handler?

The buttonConfig object is a parameter i received in the function where the code is extracted from. It's just an object that contains a set of true/false values determining which buttons should be created.

techakone
13 Aug 2010, 7:41 AM
You are using toggle buttons wrong!

YOU don't set the pressed/unpressed state. The whole point is that it does all that for you.

Configure all the buttons which should be associated with a toggleGroup

Then you just implement a toggle handler, and depending on the "state" do what you need. Ext handles setting the state and the styling.

Indeed, I'll update my code but the toggle should not affect the click event firing right?

Animal
13 Aug 2010, 7:43 AM
Your code should be


buttons.push({
id: 'viewFirmBckgBtn',
xtype: 'button',
enableToggle: true,
style: 'padding-left: 5px;',
width: 120,
text: '<b>My Background</b>',
toggleGroup: 'same-as-the-related-buttons',
toggleHandler: function(button, pressed) {
if (pressed) {
my.popups.firmInformation(buttonConfig.eventId);
}
}
});

techakone
13 Aug 2010, 8:18 AM
Your code should be


buttons.push({
id: 'viewFirmBckgBtn',
xtype: 'button',
enableToggle: true,
style: 'padding-left: 5px;',
width: 120,
text: '<b>My Background</b>',
toggleGroup: 'same-as-the-related-buttons',
toggleHandler: function(button, pressed) {
if (pressed) {
my.popups.firmInformation(buttonConfig.eventId);
}
}
});


Thanks, much much cleaner code, it works fine in Firefox but i still get no behavior at all in IE6. Just to test i put an
alert("Pressed: " + pressed) in my toggleHandler and clicking on a button in Firefox brings up the alert box twice, once with a "false" and the second time with a "true" and my if() executes fine as it should. In IE6, the alert is never even brought up, which bring me back to the original problem of the click event not even being fired/acknowledged.

Animal
13 Aug 2010, 9:41 AM
You'll have a trailing comma somewhere in your codebase.

techakone
13 Aug 2010, 10:12 AM
You'll have a trailing comma somewhere in your codebase.
This is the first thing I checked for, i enabled the "Display and error message for every script error" in IE which does pick up on those types of errors usually but it runs fine with no errors.

Animal
13 Aug 2010, 10:55 AM
Run it on IE8. It has a debugger.

techakone
16 Aug 2010, 6:27 AM
I finally found out what was the initial cause of the problem, and it's quite strange, it was a CSS definition. I have a footer div in my page, and the css is defined as:


.footer{
bottom: 0px;
min-width: 990px;
/*width: 100% !important;*/
padding:5px 0 5px 5px;
border:0px solid;
clear:both;
font-size:0.9em;
color:#999999;
background: url(../images/bg_footer.gif) repeat-x top left;
height: 10px;
text-align: center;

}

The commented out line:


/*width: 100% !important;*/

was the troublemake in IE6. Why? I don't know yet, i just wanted to run it by you guys, see if you have some insight, it would be good to know. Thanks for all the help!