ExtJS NumberField и пустые поля

Задумались мы на днях, что неправильно это — при редактировании циферных полей каждый раз, прежде чем написать число, стирать ноль. То есть, если до этого в строке ничего не было, то выводится ноль, который при редактировании надо выделить мышкой. В итоге получается от двух лишних щелчков до некоторого количества нажатий клавиш, если догадаться стирать ноль клавишами Delete или BackSpace. Поэтому я решил исправить эту ситуацию.

Решение очень простое — переопределим приватные методы onBlur() и onFocus(). Даже не буду пояснять, все видно на примере:

Ext.override(Ext.form.NumberField, {
   onFocus:function() {if (this.value == 0) this.setValue("");},
   onBlur: function() {if (!this.value) this.setValue(0);}
});

Так как у нас Numberfield, в нем не может быть ничего, кроме цифр. А значит, такое решение пригодится абсолютно для всех Numberfield’ов.

Update:
Казалось бы, вполне логично и понятно всем. Не стоит даже об этом писать здесь, но спустя два месяца было обнаружено, что перестали корректно работать placeholder’ы у фильтров в этих самых числовых столбцах. Я не сразу вспомнил про свою модификацию… А когда нашел, сообразил, что мой код перетирает какую-то полезную стандартную функцию очистки плейсхолдера. Решение тоже не шибко сложное, но может кому-то пригодится:

    Ext.override(Ext.form.NumberField, {
        onFocus: function() {this.callParent(arguments);if (!this.value && !this.emptyText) this.setValue("");},
        onBlur: function () {this.callParent(arguments);if (!this.value && !this.emptyText) this.setValue(0); }
    });

Ну и напоследок я руссифицировал этот текст в числовых фильтрах «Enter Number…» вот таким куском кода в подключаемом файле /extjs/locale/ext-lang-ru.js:

Ext.onReady(function () {
   /* здесь уже была куча других руссификаций разных элементов интерфейса */
   Ext.define("Ext.locale.ru.ux.grid.menu.RangeMenu", {
        override: "Ext.ux.grid.menu.RangeMenu",
        menuItemCfgs : {
            emptyText: 'Введите число...',
            selectOnFocus: true,
            width: 155
        }
    });
});
Опубликовано в категории ExtJS с тегами . Прямая ссылка на данную запись: permalink.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *