View Full Version : Why isn't text field firing a change event in IE 8?

12 Aug 2011, 12:21 PM
Not sure if this is a bug, me doing it wrong, all of the above...etc Anyways, I have a text field that acts as a filter and calls off to a controller.

var filterBoxes = Ext.create('Ext.form.Panel', {
width : 1056,
renderTo : 'filters',
layout : 'hbox',
items : [ {
id : '<text field>',
xtype : 'textfield',
name : '<text field>',
labelAlign : 'top',
maxLength : 25,
padding : 10,
fieldLabel : '<text field>',
enableKeyEvents : true
}, {

var textFieldBox = Ext.get('<text field>');
textFieldBox .on('change', function() {
filterJSON.push('{ "value": ' + Ext.getCmp('<text field>').getValue() + ', type: "value" }');
store.proxy.extraParams.searchCriteria = Ext.encode(filterJSON);

In firefox and chrome this works albeit slightly annoying. You have to lose focus and then it will run but that's not the worst thing in the world. Changing this exact code to keyup will work fine. Ideally, I don't want to have it hit the controller on every keyup. I could probably put a delay of some sort on the keyup and may end up having to do so. But, that still doesn't explain why ie isn't firing the change event.

I looked into it some myself but honestly, I can't be arsed to mess around in IE when their developer tools are such crap compared to the other browsers. It doesn't appear to work in 7 or 8 but I'm just using the dev tools to swap between. I know I've had issues with IE and change in the past with file inputs when I was doing jquery so this isn't shocking to me. But, the api didn't mention any limitations to worry about.

12 Aug 2011, 12:33 PM
Instead of var textFieldBox = Ext.get('<text field>'); what if you use:
var textFieldBox = Ext.getCmp('<text field>');

That should grab the Ext Component instead of the Ext Element for that textfield component and attach to that component's change event.

12 Aug 2011, 1:13 PM
That seems to work for me. Thanks.