PDA

View Full Version : TextArea that doesn't do line break when pressing ENTER



spor
20 Dec 2010, 4:02 AM
How do I override the ENTER event of a TextArea such that pressing ENTER wouldn't do a line break in the text area? Instead it could do the line break only when you press shift+enter.

Foster
20 Dec 2010, 4:11 AM
You gotta set


enterIsSpecial = true


on the component and then override the event "specialkey"

havent done this yet myself otherwise Id post an example for you. let me know if this works though!

spor
20 Dec 2010, 4:44 AM
I tried:


Ext.override(Ext.form.TextArea,{
enterIsSpecial : true
}); but that doesn't work, thanks for your reply anyway, Foster.

spor
20 Dec 2010, 5:14 AM
Maybe I was too quick, it doesn't work now...

spor
20 Dec 2010, 7:01 AM
I have also tried the following in a class that extends TextArea:


fireKey : function(e){
if(e.isSpecialKey() && (this.enterIsSpecial || (e.getKey() != e.ENTER || e.hasModifier()))){
alert('something');
}
}
....................
// Following config options on the component
listeners: {
specialkey: {fn: function(field, e){
if(e.isSpecialKey() && (e.keyCode == e.ENTER)){
alert('value of field: ' + field.getValue());
}

}}
}
.............

However, I still get the line break right before I get the alert message. Is it possible to remove the line break behaviour with enter? I have been studying the source code of TextArea, but can't find anything in the code that adds the line break, am I missing anything?

spor
21 Dec 2010, 1:26 AM
I just edited my last post to make it more understandable. Any possible tips of why I can't override the line break behavior? Any reply is much appreciated!

mschwartz
21 Dec 2010, 6:07 AM
The event is bubbling up because you're not returning false or calling e.stopEvent()

spor
21 Dec 2010, 7:03 AM
Thanks for your reply, mschwartz. In which code block should return false be placed?

I tried both in listeners and fireKey, but didn't work.

Also, in the fireKey event, what I get is: e.isSpecialKey() is false, this.enterIsSpecial is true, and e.getKey() is undefined. Don't know the reason for this.

mschwartz
21 Dec 2010, 7:07 AM
I don't know about this specialKey stuff. I've done enableKeyEvents: true and used the keyDown event to look at keys in this kind of case.

For example, I have an extension I wrote:




Ext.namespace('Ext.ux.form');

Ext.ux.form.AddressField = Ext.extend(Ext.form.TextArea, {
height: 40,
enableKeyEvents: true,
onRender: function() {
Ext.ux.form.AddressField.superclass.onRender.apply(this, arguments);
var me = this;
var el = this.el;

el.applyStyles({ textTransform: 'uppercase' });
this.mon(el, 'keyup', function() {
me.setValue(me.getValue().toUpperCase());
});
this.on('keydown', function(ta, e) {
var key = e.getCharCode();
ta.setValue(ta.getValue().toUpperCase());
if (key == Ext.EventObject.ENTER) {
var v = ta.getValue();
if (v.indexOf('\n') !== -1) {
e.stopEvent();
}
}
});
},
getValue: function() {
return Ext.ux.form.AddressField.superclass.getValue.apply(this, arguments).toUpperCase();
}
});
Ext.reg('addressfield', Ext.ux.form.AddressField);


It's rather simple. It's a 2 line (height 40) textarea that acts as an address field. You enter up to two lines of address, as in:

1 Main St
Attn someone

It also forces uppercase.