Results 1 to 3 of 3

Thread: Error: [E] Ext.field.Number.initialize(): NumberFields cannot use input masks

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha MVP Team Member
    Join Date
    Sep 2016
    Location
    Kennewick, WA
    Posts
    147

    Default Error: [E] Ext.field.Number.initialize(): NumberFields cannot use input masks



    Per the documentation of ExtJS 6.6 Modern toolkit on xtype: numberfield it states about inputMask

    inputMask : String / Ext.field.InputMask BINDABLE
    Important: To use this config you must require Ext.field.InputMask or use a complete framework build. The logic to implement an inputMask is not automatically included in a build.

    Defaults to:

    null


    So why would I get the error stating in the subject of this ticket? I've required Ext.field.InputMask as the documentation states but it throws this error.

    The bug was discovered while trying to use a number field for a phone number and setting an input mask.

    Another side note issue, setting inputType: 'tel' does not bring up a telephone keyboard on either Android or iOS.

    Added:
    My code in the development environment
    Code:
    Ext.define('ezWeb360Mobile.view.employee.myinformation.EmployeeBasicInfo',{
        extend: 'Ext.panel.Panel',
        xtype: 'employeeBasicInfo',
    
    
        requires: [
            'ezWeb360Mobile.view.employee.myinformation.EmployeeBasicInfoController',
            'ezWeb360Mobile.view.employee.myinformation.EmployeeBasicInfoModel',
            'Ext.field.InputMask'
        ],
    
    
        controller: 'employee-myinformation-employeebasicinfo',
        viewModel: {
            type: 'employee-myinformation-employeebasicinfo'
        },
    
    
        listeners: {
            added: function () {
                let store = this.getViewModel().get('basicInfoStore');
                store.load({
                    callback: function (records, operation, success) {
                        let rec = store.getAt(0);
                        Ext.ComponentQuery.query('#dfCompanyName')[0].setValue(rec.get('companyName'));
                        Ext.ComponentQuery.query('#tfFirstName')[0].setValue(rec.get('firstName'));
                        Ext.ComponentQuery.query('#tfLastName')[0].setValue(rec.get('lastName'));
                        Ext.ComponentQuery.query('#tfAddress1')[0].setValue(rec.get('address1'));
                        Ext.ComponentQuery.query('#tfAddress2')[0].setValue(rec.get('address2'));
                        Ext.ComponentQuery.query('#tfCity')[0].setValue(rec.get('city'));
                        Ext.ComponentQuery.query('#tfState')[0].setValue(rec.get('state'));
                        Ext.ComponentQuery.query('#tfZipCode')[0].setValue(rec.get('zipCode'));
                        if (rec.get('homePhone').length == 10) {
                            Ext.ComponentQuery.query('#tfHomePhone')[0].setValue('(' + rec.get('homePhone').substr(0, 3) + ') ' + rec.get('homePhone').substr(3, 3) + '-' + rec.get('homePhone').substr(6, 4));
                        }
                        if (rec.get('workPhone').length == 10) {
                            Ext.ComponentQuery.query('#tfWorkPhone')[0].setValue('(' + rec.get('workPhone').substr(0, 3) + ') ' + rec.get('workPhone').substr(3, 3) + '-' + rec.get('workPhone').substr(6, 4));
                        }
                    }
                }); 
            }
        },
    
    
        items: [{
            xtype: 'formpanel',
            itemId: 'frmPnlPersonalInfo',
            title: 'Basic Information',
            iconCls: 'x-fa fa-vcard',
            defaults: {
                xtype: 'textfield',
                editable: false,
                clearable: false
            },
            bbar: ['->', {
                xtype: 'toolbar',
                items: [{
                    xtype: 'button',
                    itemId: 'btnEditPersonalInfo',
                    text: 'Edit',
                    iconCls: 'x-fa fa-edit',
                    handler: 'editPersonalInfo'
                }, {
                    xtype: 'button',
                    itemId: 'btnSavePersonalInfo',
                    text: 'Save',
                    hidden: true,
                    iconCls: 'x-fa fa-save',
                    handler: 'savePersonalInfo'
                }, {
                    xtype: 'button',
                    itemId: 'btnCancelEditPersonalInfo',
                    text: 'Cancel',
                    hidden: true,
                    iconCls: 'x-fa fa-ban',
                    handler: 'cancelEditPersonalInfo'
                }]
            }],
            items: [{
                xtype: 'displayfield',
                label: 'Company Name',
                itemId: 'dfCompanyName'
            }, {
                label: 'First Name',
                itemId: 'tfFirstName'
            }, {
                label: 'Last Name',
                itemId: 'tfLastName'
            }, {
                label: 'Address 1',
                itemId: 'tfAddress1'
            }, {
                label: 'Address 2',
                itemId: 'tfAddress2'
            }, {
                label: 'City',
                itemId: 'tfCity'
            }, {
                label: 'State',
                itemId: 'tfState'
            }, {
                xtype: 'numberfield',
                label: 'Zip Code',
                itemId: 'tfZipCode',
                placeholder: '#####',
                inputMask: '00000'
            }, {
                xtype: 'numberfield',
                inputType: 'tel',
                label: 'Home Phone',
                itemId: 'tfHomePhone',
                placeholder: '(###) ###-####',
                inputMask: '(000) 000-0000'
            }, {
                xtype: 'numberfield',
                inputType: 'tel',
                label: 'Work Phone',
                itemId: 'tfWorkPhone',
                placeholder: '(###) ###-####',
                inputMask: '(000) 000-0000'
            }]
        }]
    });
    As you can see Ext.field.InputMask is required and this doesn't cause any errors.
    Andy Allord
    Sencha MVP/Software Engineer

  2. #2
    Sencha MVP Team Member
    Join Date
    Sep 2016
    Location
    Kennewick, WA
    Posts
    147

    Default

    This has been reported to Sencha in a bug report.

    The issue is currently the numberfield does not support inputMask and the documentation is incorrect in stating how to implement it.
    Andy Allord
    Sencha MVP/Software Engineer

  3. #3
    Sencha MVP Team Member
    Join Date
    Sep 2016
    Location
    Kennewick, WA
    Posts
    147

    Default

    Closing this report based on a bug report being filed.
    Andy Allord
    Sencha MVP/Software Engineer

Posting Permissions

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