PDA

View Full Version : Ext.ux.form.DisplayTextField - uneditable TextField



mschwartz
21 May 2010, 6:46 AM
This tiny extension is useful if you need a textfield for displaying some value but you don't want to allow the user to edit it. Disabling an Ext.form.TextField makes it so you can't select/copy/paste the value, but sometimes you want to display something (like a URL) for the user to only be able to select and copy.

Ext.ux.form.DisplayTextField extends Ext.form.TextField. It allows the user to activate the field and copy the value. Any Keystroke will force the field's displayed value to be selected. Clicking on the field (the first time) will also select the text.

Unfortunately, Ext.TextField does not provide a click event, so once it is focused, a 2nd click on it will unselect the text. Again, a keystroke or blur then focus will reselect the value. Of course, the user can click+drag+select any portion as well.

Use as you see fit.




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

Ext.ux.form.DisplayTextField = Ext.extend(Ext.form.TextField, {
initComponent: function() {
this.enableKeyEvents = true;
Ext.ux.form.DisplayTextField.superclass.initComponent.apply(this, arguments);
this.on('keydown', function(me, e) {
switch (e.keyCode) {
case e.CTRL:
break;
case e.C:
if (e.ctrlKey) {
return;
}
e.stopEvent();
default:
this.selectText();
e.stopEvent();
break;
}
});
this.on('focus', function() {
var me = this;
(function() {
me.selectText();
}).defer(10);
});
}
});
Ext.reg('ux-displaytextfield', Ext.ux.form.DisplayTextField);