ExtJS — это мощная платформа JavaScript для создания веб-приложений с богатым пользовательским интерфейсом. При работе с текстовым полем в ExtJS вы можете столкнуться со сценариями, в которых вы хотите ограничить ввод пользователя только числовыми значениями. В этой статье блога будут рассмотрены несколько методов проверки числового ввода в текстовом поле ExtJS, а также приведены примеры кода.

Метод 1: использование регулярного выражения
Один из подходов к принятию только чисел в текстовом поле ExtJS — использовать регулярное выражение для проверки ввода. Вот пример:

Ext.create('Ext.form.Panel', {
    title: 'Number Field Example',
    width: 400,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Enter a Number',
        listeners: {
            change: function(field, newValue) {
                var regex = /^[0-9]*$/;
                if (!regex.test(newValue)) {
                    field.setValue('');
                }
            }
        }
    }]
});

Метод 2: использование пользовательской функции проверки
Другой подход заключается в определении пользовательской функции проверки, которая проверяет, является ли ввод допустимым числом. Вот пример:

Ext.create('Ext.form.Panel', {
    title: 'Number Field Example',
    width: 400,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Enter a Number',
        validator: function(value) {
            if (isNaN(value)) {
                return 'Please enter a valid number.';
            }
            return true;
        }
    }]
});

Метод 3: использование конфигурации inputType
ExtJS предоставляет параметр конфигурации inputType, для которого можно установить значение 'number'для принудительного ввода числовых значений. Вот пример:

Ext.create('Ext.form.Panel', {
    title: 'Number Field Example',
    width: 400,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Enter a Number',
        inputType: 'number'
    }]
});

В этой статье блога мы рассмотрели три метода приема только чисел в текстовом поле ExtJS. Используя регулярные выражения, пользовательские функции проверки или параметр конфигурации inputType, вы можете обеспечить проверку числового ввода и обеспечить удобство взаимодействия с пользователем. Выберите метод, который лучше всего соответствует вашим требованиям, и реализуйте его в своем приложении ExtJS.

Реализуя эти методы, вы можете гарантировать, что пользователи смогут вводить только числовые значения в текстовые поля ExtJS, что снижает вероятность ошибок и улучшает общее взаимодействие с пользователем.