Results 1 to 10 of 10

Thread: Light Mask Plugin

  1. #1
    Sencha User
    Join Date
    Jun 2008
    Posts
    18

    Default Light Mask Plugin

    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.

    Code:
    {
    xtype: 'textfield',
    ...
    plugins: [new Ext.ux.Mask('(##) ####-####')]
    }
    Code:
    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:;<=>[email protected]" + 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;
        }
    });
    Last edited by raphac; 7 Aug 2009 at 11:49 AM. Reason: more info

  2. #2
    Sencha User mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,232

    Default

    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.

  3. #3
    Sencha User
    Join Date
    Jun 2008
    Posts
    18

    Default

    The only new feature, that works as plugin, and not as a function.
    I post in new thread, because works with Ext3.
    Last edited by raphac; 7 Aug 2009 at 11:08 AM. Reason: correct text

  4. #4
    Ext User
    Join Date
    Jul 2009
    Location
    madison, wi
    Posts
    17

    Default useful plugin

    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.

  5. #5

    Smile small update behavior

    Quote Originally Posted by raphac View Post
    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.

    Code:
    {
    xtype: 'textfield',
    ...
    plugins: [new Ext.ux.Mask('(##) ####-####')]
    }
    Code:
    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:;<=>[email protected]" + 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).

    ++

  6. #6
    Ext User
    Join Date
    Jul 2009
    Location
    madison, wi
    Posts
    17

    Default

    Quote Originally Posted by moussetique View Post
    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.

  7. #7

    Post

    Try this :

    Code:
    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.

    ++

  8. #8

    Default

    Code:
    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.

  9. #9
    Sencha User
    Join Date
    Mar 2008
    Posts
    566

    Default

    is this the most up to date?

    Thanks, Marty

  10. #10

    Default

    What about ExtJs 4 ?
    http://kroxus.ru Extjs Projects

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •