PDA

View Full Version : Uppercase TextField plugin



pkullmann
18 Mar 2010, 4:52 AM
Hi,

I have created a small plugin, which I'd like to share; maybe someone finds it useful.
The plugin forces all alpha input in a textfield (or other suitable component) to uppercase.

The plugin does two things:



Add the style "text-transform: uppercase" to the underlying element.
Since text-transform only alters the displayed text, but not the actual value of the form field, a keyup handler is added to the element which converts the field value to uppercase. This ensures that the value corresponds to the displayed text at any time.


Here is the code:


Ext.ux.Uppercase = Ext.extend(Ext.util.Observable, {
init: function(field) {
field.on('render',this.onRender,this);
},
onRender: function(field) {
field.el.applyStyles({textTransform: "uppercase"});
field.mon(field.el,'keyup',function() {
this.setValue(this.getValue().toUpperCase());
},field);
}
});

2010/03/18 - Initial release
2010/03/23 - Replaced field.el.on with field.mon (Thanks to bt_bruno)

Animal
18 Mar 2010, 5:36 AM
This should be part of the core really. An uppercase: true config is really needed. It's a common requirement.

wemerson.januario
18 Mar 2010, 8:35 PM
Nice Work

bt_bruno
19 Mar 2010, 11:09 AM
Nice! I'd just suggest using .mon() instead of .on() in this case... (Memory Management Improvements (http://www.extjs.com/blog/2009/08/10/ext-js-30-be-outstanding/))


field.mon(field.el,'keyup',function() { ... });

pkullmann
23 Mar 2010, 4:10 AM
@bt_bruno: Thanks for the hint. I've updated the first post accordingly!

Peter

w_menzies
2 Apr 2010, 3:16 PM
I am new ExtJs and would like to use this plugin.
Please provide example of how to use.
Thanks.

w_menzies
4 Apr 2010, 12:26 AM
Not to worry...I figured out...easy when you know...;)
...for fellow newbies....
simply add the config option...

},{
fieldLabel : 'First name',
allowBlank : false,
plugins : new Ext.ux.Uppercase()
},{

mschwartz
4 Oct 2010, 8:17 AM
Ext.namespace('Ext.ux.form');

Ext.ux.form.UCTextField = Ext.extend(Ext.form.TextField, {
onRender: function() {
Ext.ux.form.UCTextField.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());
});
}
});
Ext.reg('uctextfield', Ext.ux.form.UCTextField);


I like this way better, because I can do a mass edit and change
xtype: 'textfield'
to
xtype: 'uctextfield'

(wherever I want upper case text fields)

Not sure if this is more efficient memory and speed wise though.

I only tested it in Chrome - it was a quick hack.

mschwartz
4 Oct 2010, 11:21 AM
animal -

So how do you accomplish uppercasing the input with a combobox with typeahead?

Doing the keyup listener bit clears the field, even if you set this.el.dom.value (the textfield of the combo).

Animal
4 Oct 2010, 10:06 PM
I use the CSS method of just displaying as uppercase:

http://www.w3.org/TR/CSS21/text.html#propdef-text-transform

And then I do the actual uppercasing of the data on blur

mschwartz
7 Oct 2010, 6:56 AM
With Animal's suggestion:




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

Ext.ux.form.UCComboBox = Ext.extend(Ext.form.ComboBox, {
onRender: function() {
Ext.ux.form.UCComboBox.superclass.onRender.apply(this, arguments);
var me = this;
var el = this.el;

el.applyStyles({ textTransform: 'uppercase' });
this.mon(el, 'blur', function() {
me.setValue(me.getValue().toUpperCase());
});
},
getValue: function() {
return Ext.ux.form.UCComboBox.superclass.getValue.apply(this, arguments).toUpperCase();
}
});
Ext.reg('uccombo', Ext.ux.form.UCComboBox);


Perhaps the getValue() method is not required, but it sure can't hurt (other than adding a few bytes to the .js file)

Animal
7 Oct 2010, 7:59 AM
The old problem of creating utility extensions applies.

What if you want this functionality in other classes? They're "stranded".

You need a plugin:



Ext.namespace('Ext.ux.form');
Ext.ux.form.UCField = new function() {

function onFieldRender() {
var me = this;
me.constructor.prototype.onRender.apply(this, arguments);
me.mon(me.el.applyStyles({ textTransform: 'uppercase' }), 'blur', onFieldBlur, me);
}

function onFieldBlur() {
this.setValue(getUppercaseValue.call(this));
}

function getUppercaseValue() {
return this.constructor.prototype.getValue.apply(this, arguments).toUpperCase();
}

this.init = function(field) {
field.onRender = onFieldRender;
field.getValue = getUppercaseValue;
};
};
Ext.preg('ucfield', Ext.ux.form.UCField);


Usage:



{
xtype: 'textfield',
fieldLabel: 'This is uppercase',
plugins: 'ucfield'
}