PDA

View Full Version : Textfield doesn't seem to fire applyValue when typing.



mitchellsimoens
19 Apr 2012, 5:26 AM
Capture the keydown event stop the event and then setValue on the field.

badgerb1
19 Apr 2012, 5:27 AM
Hi All,

So I'm trying to manipulate the value that is in a textbox while typing. I thought this should work, however, the applyValue doesn't get fired when you are typing.



Ext.define('Ext.ux.touch.tenkey.TimeEntry', {
extend:'Ext.field.Text',
xtype:'timeentry',
config:{
maxChars:8


},
applyValue:function(newValue) {
if (newValue) {
newValue = newValue.replace(/[^0-9]/gi, '');
if (newValue.length > 2) {
newValue = newValue.slice(0, 2) + ':' + newValue.slice(2);
}
if (newValue.length > 5) {
newValue = newValue.slice(0, 5) + ':' + newValue.slice(5);
}
}
return newValue;
}
});


What would the recommended method be for manipulating the data entered with a keyboard in a text field?

Note this does run just fine when I do textField.setValue('12345');

Should I be capturing the keyup on the element and doing my checking there as well?

Thanks
Bob

badgerb1
19 Apr 2012, 6:10 AM
Hi Mitchell,

I think I'm missing something.

I've tried adding keydown events all over and can't seem to find the right place for it.



Ext.define('Ext.ux.touch.tenkey.TimeEntry', {
extend:'Ext.field.Text',
xtype:'timeentry',
config:{
maxChars:8
},
constructor:function(config){this.callParent(arguments);
this.on({
keydown:'onKeyDown'//doesn't fire
});
this.element.on({
keydown:'onKeyDown'//doesn't fire
});
this.on({
keyup:'onKeyup'//Also doesn't fire
});
},
onKeyDown:function(e){
window.alert('keyDown');
},
onKeyup:function(e){
window.alert('keyup');
},
onKeyUp:function(e){
window.alert('KeyUp'); //works but only because it is overriding the Text onKeyUp function. It isn't getting the event directly.
});

Thanks
Bob

mitchellsimoens
19 Apr 2012, 6:25 AM
Here are two overrides to get a keydown event on the field for you also:


Ext.define('Override.field.Input', {
override : 'Ext.field.Input',

initElement : function() {
this.callParent();

this.input.on({
scope : this,
keydown : 'onKeyDown'
});
},

onKeyDown : function(e) {
this.fireEvent('keydown', e);
}
});

Ext.define('Override.field.Text', {
override : 'Ext.field.Text',

initialize : function() {
this.callParent();

this.getComponent().on({
scope : this,
keydown : 'onKeyDown'
});
},

onKeyDown : function(e) {
this.fireEvent('keydown', this, e);
}
});

badgerb1
19 Apr 2012, 6:27 AM
Got it,

Didn't think about going all the way to the dom with it.

So the way I got it to fire is to do

this.element.dom.addEventListener('keydown', this.onKeyDown, false);

In the constructor.
I would have thought the element should register any event on the dom, but it appears it only registers specific ones and keydown isn't one.

Still strange that this doesn't work though.

this.on({keyup:'onKeyup'//Also doesn't fire});


Thanks
Bob

badgerb1
19 Apr 2012, 6:31 AM
Thanks Mitchell,

Didn't see your post till after I posted the other solution I found.

Thanks for handling all our crazy ideas :)

Bob

mitchellsimoens
19 Apr 2012, 6:36 AM
As a simple workaround, you could do


field.getComponent().input.on('keydown', someFunction, field);

badgerb1
19 Apr 2012, 7:40 AM
Cool, thanks.

For some reason when I was stepping through the code it looked like Text extended Input not that it was composed of Input. Makes a HUGE difference :)..

Thanks again
Bob