1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    131
    Vote Rating
    6
    Answers
    7
    klaus777 is on a distinguished road

      0  

    Default Unanswered: numberfield with only 3 numbers no comma

    Unanswered: numberfield with only 3 numbers no comma


    I try to get a numberfield that allows only 3 numbers and no comma or anything else

    like

    Code:
    987
    377
    1
    12

    Not allowed:
    Code:
    abc
    1234445
    123.44
    123,44
    123ab

    How would I do that? Tried some stuff that didn't work so far (the number field always allowed abadfadsf or 1334234234.34034 and stuff.... :-)

  2. #2
    Sencha User bluehipy's Avatar
    Join Date
    Mar 2010
    Location
    Romania
    Posts
    618
    Vote Rating
    29
    Answers
    67
    bluehipy will become famous soon enough bluehipy will become famous soon enough

      0  

    Default


    Hm,

    Code:
    /*
     * @author: Andrei Patriciu, bluehipy@yahoo.com
     */
    
    
    Ext.define('Ux.com.CurrencyInput',{
        extend:'Ext.field.Input',
        xtype:'currencyinput',
        config:{
        },
        initElement:function()
        {
            this.callParent(arguments);
            var me =this;
             this.input.on({
                scope: me,
                keypress    : 'onKeyPress'
            });
            this.input.dom.type='text';
        },
        onKeyPress: function(e) {
            this.fireEvent('keypress', e);
        },
        setCurrency:function(value)
        {
            this.currency.dom.innerHTML = value;
        },
        getTemplate: function() {
            var items = [
            {
                reference:'inpcontainer',
                cls:'w-currency-input-container',
                children:[
                {
                    reference: 'input',
                    tag: this.tag,
                    cls:'w-currency-input',
                    maxlength:3, //for you
                    pattern:'[0-9]*'
                },
    //you don 't need this money container :)
                {
                    reference: 'currency',
                    tag:'span',
                    cls:'w-currency-span',
                    html: 'USD'
                },
                {
                    reference:'icocontainer',
                    cls:'w-currency-icon-container',
                    children:[
                    {
                        reference: 'clearIcon',
                        cls: 'x-clear-icon'
                    }
                    ]
                }
                ]
            }
            ];
    
    
            items.push({
                reference: 'mask',
                classList: [this.config.maskCls]
            });
    
    
            return items;
        }
    });
    
    
    
    /*
     * @author: Andrei Patriciu, bluehipy@yahoo.com
     */
    
    
    
    
    Ext.define('Ux.com.CurrencyField',{
        extend:'Ext.field.Text',
        requires:['Ux.com.CurrencyInput'],
        xtype:'currencyfield',
        config:{
            cls:'w-currency-field',
            selectCls:'',
            component:{
                xtype:'currencyinput'
            },
        },
        initialize: function() {
            var me = this;
    
    
            me.callParent();
    
    
            me.getComponent().on({
                scope: this,
                keypress  : 'onInpKeyPress',
                keyup  : 'onInpKeyUp',
                change :'onInputChange'
            });
        },
        onInpKeyUp:function(e)
        {
          /*.....*/
    
    
            return true;
        },
        onInpKeyPress:function(e)
        {
            //acccept TB , BackSpace, ENTER normal behaviour
            e.preventDefault();
            e.stopPropagation();
    //add more keycodes if you want to allow arrow keys , delete , etc
            if(e.browserEvent.keyCode == 8 ||  e.browserEvent.keyCode == 9 || e.browserEvent.keyCode == 13)
            {
                return true
            }
    
    
            var s = String.fromCharCode(e.browserEvent.keyCode);
            if( s.match(/[0-9]/) )
            {
                this.showClearIcon();
                return true;
            }
            return false;
        }
    });

    something like that

  3. #3
    Sencha User
    Join Date
    May 2012
    Posts
    131
    Vote Rating
    6
    Answers
    7
    klaus777 is on a distinguished road

      0  

    Default


    yes Sir, but it's not working :-)

    Still allowing me to enter endless numbers, and if i enter an alphabetic character it will also allow it and delete it after focus goes away from numberfield... maybe i have to ask a css master of the 51th grade and do this in css ????

    Code:
    xtype: 'numberfield',id: 'kwSelectField',
    width: 24,
    maxlength:3,
    pattern:'[0-9]*',
    style: {
    	'background': 'transparent',
    	'width': '24px',
    	'text-align': 'right'
    },
    left: 42,
    top: 47,
    clearIcon: false

  4. #4
    Sencha User bluehipy's Avatar
    Join Date
    Mar 2010
    Location
    Romania
    Posts
    618
    Vote Rating
    29
    Answers
    67
    bluehipy will become famous soon enough bluehipy will become famous soon enough

      0  

    Default


    So far as I see you didn't do what I described... This is not about the numberfield but about a custom field I have wrote, so a new component.


    If you can handle all restrictions via css then you can define a style and add it to your field by specifying the inputCls property in config (but I am not aware of css properties equivalent for pattern attribute)

Thread Participants: 1