Light Mask Plugin

[raphac]

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]

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]

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

[madcity]

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]

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]

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]

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]

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]

is this the most up to date?

Thanks, Marty

[kroxus]

What about ExtJs 4 ?