PDA

View Full Version : Light Mask Plugin



raphac
7 Aug 2009, 9:54 AM
Light Mask Plugin

based on:
http://extjs.net/forum/showthread.php?t=61153

The only new feature, that works as plugin, and not as a function.
I post in new thread, because works with Ext3.



{
xtype: 'textfield',
...
plugins: [new Ext.ux.Mask('(##) ####-####')]
}




Ext.ux.Mask = function(mask) {
var config = {
mask: mask
};
Ext.apply(this, config);
};
Ext.extend(Ext.ux.Mask, Object, {
init: function(c) {
this.LetrasL = 'abcdefghijklmnopqrstuvwxyz';
this.LetrasU = Ext.util.Format.uppercase(this.LetrasL);
this.Letras = this.LetrasL + this.LetrasU;
this.Numeros = '0123456789';
this.Fixos = '().-:/ ';
this.Charset = " !\"#$%&\'()*+,-./0123456789:;<=>?@" + this.LetrasU + "[\]^_/`" + this.LetrasL + "{|}~";
c.enableKeyEvents = true;
c.on('keypress', function(field, evt) { return this.press(field, evt) }, this);
},
press: function(field, evt) {
var value = field.getValue();
var key = evt.getKey();
var mask = this.mask;
if(evt){
var tecla = this.Charset.substr(key - 32, 1);
if(key < 32 || evt.isNavKeyPress() || key == evt.BACKSPACE){
return true;
}
if(Ext.isGecko || Ext.isGecko2 || Ext.isGecko3)
if((evt.charCode == 0 && evt.keyCode == 46) || evt.isSpecialKey()) return true; // DELETE (conflict with dot(.))
var tamanho = value.length;
if(tamanho >= mask.length){
field.setValue(value);
evt.stopEvent();
return false;
}
var pos = mask.substr(tamanho,1);
while(this.Fixos.indexOf(pos) != -1){
value += pos;
tamanho = value.length;
if(tamanho >= mask.length){
evt.stopEvent();
return false;
}
pos = mask.substr(tamanho,1);
}
switch(pos){
case '#' : if(this.Numeros.indexOf(tecla) == -1){evt.stopEvent(); return false;} break;
case 'A' : if(this.LetrasU.indexOf(tecla) == -1){evt.stopEvent(); return false;} break;
case 'a' : if(this.LetrasL.indexOf(tecla) == -1){evt.stopEvent(); return false;} break;
case 'Z' : if(this.Letras.indexOf(tecla) == -1) {evt.stopEvent(); return false;} break;
case '*' : field.setValue(value + tecla); break;
default : field.setValue(value); break;
}
}
field.setValue(value + tecla);
evt.stopEvent();
return false;
}
});

mystix
7 Aug 2009, 10:08 AM
how does this plugin differ from the one @erico posted (at least i know his plugin simply masks Fields -- that much i gathered from his thread title)?

i don't see any description / screenshots / demos of what new features your code adds. :-?

raphac
7 Aug 2009, 11:02 AM
The only new feature, that works as plugin, and not as a function.
I post in new thread, because works with Ext3.

madcity
23 Sep 2009, 9:03 PM
This is a handy plugin for formatting numbers, but it does defeat common text field editing practices by not allowing you to select and edit any of the number. You can't double click to select part of the number, then edit that part of the number, nor can you edit the number after drag selecting the number. It would be great if you could allow these editing functions and still be able to format the number!?!

Even as is, this is a nice masking tool.

Thanks.

moussetique
24 Nov 2009, 5:40 AM
Light Mask Plugin

based on:
http://extjs.net/forum/showthread.php?t=61153

The only new feature, that works as plugin, and not as a function.
I post in new thread, because works with Ext3.



{
xtype: 'textfield',
...
plugins: [new Ext.ux.Mask('(##) ####-####')]
}


Ext.ux.Mask = function(mask) {
var config = {
mask: mask
};
Ext.apply(this, config);
};
Ext.extend(Ext.ux.Mask, Object, {
init: function(c) {
this.LetrasL = 'abcdefghijklmnopqrstuvwxyz';
this.LetrasU = Ext.util.Format.uppercase(this.LetrasL);
this.Letras = this.LetrasL + this.LetrasU;
this.Numeros = '0123456789';
this.Fixos = '().-:/ ';
this.Charset = " !\"#$%&\'()*+,-./0123456789:;<=>?@" + this.LetrasU + "[\]^_/`" + this.LetrasL + "{|}~";
c.enableKeyEvents = true;
c.on('keypress', function(field, evt) { return this.press(field, evt) }, this);
},
press: function(field, evt) {
var value = field.getValue();
var key = evt.getKey();
var mask = this.mask;
if(evt){

var objDom = field.el.dom;
if((objDom.selectionEnd - objDom.selectionStart) > 0){
return true;
}

var tecla = this.Charset.substr(key - 32, 1);
if(key < 32 || evt.isNavKeyPress() || key == evt.BACKSPACE){
return true;
}
if(Ext.isGecko || Ext.isGecko2 || Ext.isGecko3)
if((evt.charCode == 0 && evt.keyCode == 46) || evt.isSpecialKey()) return true; // DELETE (conflict with dot(.))
var tamanho = value.length;
if(tamanho >= mask.length){
field.setValue(value);
evt.stopEvent();
return false;
}
var pos = mask.substr(tamanho,1);
while(this.Fixos.indexOf(pos) != -1){
value += pos;
tamanho = value.length;
if(tamanho >= mask.length){
evt.stopEvent();
return false;
}
pos = mask.substr(tamanho,1);
}
switch(pos){
case '#' : if(this.Numeros.indexOf(tecla) == -1){evt.stopEvent(); return false;} break;
case 'A' : if(this.LetrasU.indexOf(tecla) == -1){evt.stopEvent(); return false;} break;
case 'a' : if(this.LetrasL.indexOf(tecla) == -1){evt.stopEvent(); return false;} break;
case 'Z' : if(this.Letras.indexOf(tecla) == -1) {evt.stopEvent(); return false;} break;
case '*' : field.setValue(value + tecla); break;
default : field.setValue(value); break;
}
}
field.setValue(value + tecla);
evt.stopEvent();
return false;
}
});


Before this small update, you must select the text, press backspace, then write.
Now you can write directly an another text, without use the key backspace (like a classic field text).

++

madcity
7 Dec 2009, 12:35 AM
Before this small update, you must select the text, press backspace, then write.
Now you can write directly an another text, without use the key backspace (like a classic field text).

++

moussetique,

Thanks for making this change; very cool. There is a slight problem though if you select any of the numbers other than the ending numbers. Say you have a US phone number 123-456-7890. If you select the 456 and try to change it, the first number changes and the remaining numbers are appended to the end. I am using Ext 3.03, Firefox 3.5.5, OS X.

moussetique
7 Dec 2009, 3:08 AM
Try this :



if((objDom.selectionEnd - objDom.selectionStart) > 0){
return true;
}
if((objDom.selectionStart > 0) && (objDom.selectionStart < objDom.textLength)){
return true;
}


It's not perfect, because when you enter a text in replacement of your selection, the mask is not reactivate. But in the first time this solution can be used.

++

clayton.d3
29 Jan 2010, 11:19 AM
switch(pos){
case '#' : if(this.Numeros.indexOf(tecla) == -1){evt.stopEvent(); return false;} break;
case 'A' : tecla = tecla.toUpperCase(); if(this.LetrasU.indexOf(tecla) == -1){evt.stopEvent(); return false;} break;
case 'a' : tecla = tecla.toLowerCase(); if(this.LetrasL.indexOf(tecla) == -1){evt.stopEvent(); return false;} break;
case 'Z' : if(this.Letras.indexOf(tecla) == -1) {evt.stopEvent(); return false;} break;
case '*' : field.setValue(value + tecla); break;
default : field.setValue(value); break;
}

Will correct the case, not simply ignore the key.

moegal
20 Jul 2010, 2:04 PM
is this the most up to date?

Thanks, Marty

kroxus
16 Jul 2011, 11:45 PM
What about ExtJs 4 ?