PDA

View Full Version : Textfield 'change' event not working



KSagar
6 Nov 2009, 6:25 AM
I have added listener 'change' for text-field, but the change event is not working for text-field.

When I typed in the text-field, it doesn't show any alert box but when I clicked outside of text-field, it shows alert to me. I want it to show me alert each time while I typed in the text-field. Afterword, I will remove alert with ajax request with query to server for result data. Please help.

Below is the code..



{
xtype : 'textfield',
id : 'txtLabel',
anchor : '95%',
x: 20,
y: 25,
listeners : {change : function (txt, newValue,oldValue )
{
alert('Text Changed');
}

}]

Animal
6 Nov 2009, 6:49 AM
That's how the change event works.

You need a keyup event handler.

http://www.extjs.com/deploy/dev/docs/?class=Ext.form.TextField&member=enableKeyEvents

KSagar
10 Nov 2009, 2:09 AM
Hey...it works..!!

I have changed my code as,



{
xtype : 'textfield',
id : 'txtLabel',
enableKeyEvents: true,
anchor : '95%',
listeners : {keyup : function (txt, newValue,oldValue )
{
alert("Hi..");
}
}
}

KSagar
10 Nov 2009, 2:11 AM
Hey...it works..!! :)

I have changed my code as,



{
xtype : 'textfield',
id : 'txtLabel',
enableKeyEvents: true,
anchor : '95%',
listeners : {keyup : function (txt, newValue,oldValue )
{
alert("Hi..");
}
}
}


Thanks a lot.

Animal
10 Nov 2009, 2:25 AM
Might be a good idea to check out the buffer option for listeners so that your handler only fires once after the user types in a load of characters.

Be aware that this obviously is not aware of pasting into a field.

KSagar
10 Nov 2009, 2:35 AM
Yes...that is a good sugestion. Do you have any reference link to check for help on buffer for listeners?

Animal
10 Nov 2009, 3:07 AM
http://www.extjs.com/deploy/dev/docs/?class=Ext.util.Observable&member=addListener

KSagar
10 Nov 2009, 6:19 AM
In my case, how can add buffer attribute to my code?



{
xtype : 'textfield',
id : 'txtLabel',
enableKeyEvents: true,
buffer: 2000, <--- like this??
anchor : '95%',
listeners : {keyup : function (txt, newValue,oldValue )
{
alert("Hi..");
}
}
}

Condor
10 Nov 2009, 6:22 AM
No, like this:

{
xtype: 'textfield',
id: 'txtLabel',
enableKeyEvents: true,
anchor : '95%',
listeners : {
keyup: function (txt, newValue, oldValue) {
alert("Hi..");
},
buffer: 2000
}
}
or like this:

{
xtype: 'textfield',
id: 'txtLabel',
enableKeyEvents: true,
anchor : '95%',
listeners : {
keyup: {
fn: function (txt, newValue, oldValue) {
alert("Hi..");
},
buffer: 2000
}
}
}

KSagar
10 Nov 2009, 6:47 AM
Yah...it works now. :)

Thanks Animal and Condor. :)

Animal
10 Nov 2009, 6:52 AM
In my case, how can add buffer attribute to my code?


In what way did the documentation not allow you to find this information yourself?

I mean it has the example code





myDataView.on('click', this.onClick, this, {
single: true,
delay: 100
});


to show you how to use multiple options. SO what went wrong?

KSagar
10 Nov 2009, 6:59 AM
Yah..you are right. Actually I am a new Extjs user. Sometime I got little confused about adding listeners inline and with the object.on() property.