Программирование

Чтобы использовать маски ввода в проектах необходимо добавить модуль “MultiMaskEdit”, в dependency страницы и в секцию define, а в diff поля указать, что необходимо использовать класс MultiMaskEdit и его маску. Класс расширяет базовый TextEdit. Например, маску ввода для мобильных телефонов России и Украины можно определить так:

diff: /**SCHEMA_DIFF*/[ { "operation" : "merge", "name" : "MobilePhone", "values" : { "controlConfig" : { "className": "Terrasoft. MultiMaskEdit", "mask": { "bindTo": "getPhoneMask" } "onBeforePasteFormatValue" : TSCCommon. getDigitsFromString } } } ]/**SCHEMA_DIFF*/, methods: { getPhoneMask: function() { return { formats: ["[phone]", "[phone]"] } } }

Если метод getPhoneMask вернет пустой массив или null, контрол будет вести себя так же, как TextEdit.

Метод onBeforePasteFormatValue указываете, если хотите обработать значения перед вставкой из буфера обмена в контрол. Этот метод необязательный – контрол вставит только допустимые значения, но, например, если предварительно обработать вставляемую строку и оставить только цифры, то для маски выше телефон вставиться полностью, независимо от того какие символы использовались дополнительно во вставляемом номере телефона.

По умолчанию в качестве символов подстановки в шаблонах маски используются:

{ //цифры "9" : { re : "[0-9]" }, //кириллица "к" : { re : "[а-яА-ЯёЁ]" }, //латинские "l" : { re : "[a-zA-Z]" }, //любая буква "c" : { re : "[а-яА-ЯёЁa-zA-Z]" }, //любая буква или цифра "#" : { re : "[а-яА-ЯёЁA-Za-z0-9]" } }

Вы можете задать собственный символ для шаблона ввода с помощью maskConfig, например, если вам нужна 9-ка как обычный символ, то можно указать что для подстановки цифр использовать «0». В re мы указываем регулярное выражение для проверки. Также необходимо указать символ заменяющие пустые значение в параметреplaceHolderChar.

Например, так можно задать маску позволяющая вводить книжные коды (ISBN), где 978 это просто цифры, а «0» - подстановочный символ:

{ "className" : 'Terrasoft. controls. MultiMaskEdit', "value" : { "bindTo" : 'ISBN' }, "mask" : { "bindTo": "getPhoneMask" }, "maskConfig" : { "definitions" : { //цифры "0" : { "re" : "[0-9]" }, "placeHolderChar" : "_" } } } //... methods: { getPhoneMask: function() { return { formats: ["978-0-000-00000-0"] } } }

Известная проблема – валидация контрола не передается в модель карточки, т. е. хотя контролл показывает что значение не верно, карточка все равно сохраняется. Пока что надо делать дополнительные проверки в карточке вручную.

Использование в детали "Средства связи"

Чтобы, например, добавить маску для телефонов необходимо добавить замещающий клиентский модуль BaseCommunicationDetail, добавить в dependencies MultiMaskEdit и написать примерно такой код:

define("BaseCommunicationDetail", ["BaseCommunicationDetailResources", "CtiConstants", "ConfigurationConstants", "ViewUtilities", "MultiMaskEdit" ], function(resources, CTIBaseConstants, ConfigurationConstants, ViewUtilities) { var emailTypeId = munications. UseForAccounts. Other. Email. value; var currentItemConfigIndex = 0; function validateNumber(value) { var invalidMessage = ""; var isValid = true; var communicationType = this. get("CommunicationType"); var number = value || this. get("Number"); if (ConfigurationConstants. PhonesCommunicationTypes. indexOf(communicationType. value) !== -1) { isValid = (Ext. isEmpty(number) || new RegExp("^\\+7\\([0-9][0-9][0-9]\\)[0-9][0-9][0-9]-[0-9][0-9]-[0-9][0-9]$").test(number)); if (!isValid) { invalidMessage = "Некорректный номер"; } } return { invalidMessage: invalidMessage, isValid: isValid }; } return { methods: { /** * получить только цифры из строки */ getDigitsFromString: function(value) { return value. replace(/\D/g, ""); }, getMask: function(communicationType) { if (this. isPhoneTypeForMask(communicationType)) { return { formats: ["[phone]"] }; } return []; }, // исключает тип "Внутренний номер" isPhoneTypeForMask: function(communicationType) { communicationType = communicationType. value || communicationType; return ConfigurationConstants. PhonesCommunicationTypes. indexOf(communicationType) !== -1; }, getMaskEditConfig: function(maskConfig) { var result = { className: "Terrasoft. MultiMaskEdit", mask: { bindTo: "Masks" }, onBeforePasteFormatValue: this. getDigitsFromString }; if (maskConfig) { result. maskConfig = maskConfig; } return result; }, /** * @inheritdoc Terrasoft. BaseCommunicationDetail#getItemViewConfig * @overridden */ getItemViewConfig: function(itemConfig, item) { this. callParent(arguments); this. set("itemViewConfig", null); var items = itemConfig. config. items; var textEditIndex = 1; //TODO: Добавить константу var testEdit = items[textEditIndex]; Ext. apply(testEdit, this. getMaskEditConfig()); //получаем маску по типу var communicationType = item. get("CommunicationType"); item. set("Masks", this. getMask(communicationType)); }, initItem: function(detailModel) { this. set("PhoneCommunicationTypes", detailModel. get("PhoneCommunicationTypes")); detailModel. addColumnValidator("Number", validateNumber, this); }, onItemChanged: function(item, config) { this. callParent(arguments); var communicationType = item. get("CommunicationType"); item. set("Masks", this. getMask(communicationType)); }, addItem: function(tag) { var collection = this. get("Collection"); var items = collection. getItems(); var itemsLength = items. length; this. callParent(arguments); var newItemsLength = items. length; if (itemsLength === newItemsLength) { return; } var itemViewModel = items[newItemsLength - 1]; this. initItem. call(itemViewModel, this); }, initItems: function() { if (this. get("IsDataLoaded")) { var collection = this. get("Collection"); Terrasoft. each(collection. getItems(), function(item) { this. initItem. call(item, this); }, this); } }, /** * Загружает средства связи * @protected * @virtual * @param {Function} callback callback-функция * @param {Terrasoft. BaseSchemaViewModel} scope Контекст выполнения callback-функции */ loadContainerListData: function(callback, scope) { this. callParent([function() { // Добавляем валидатор перед сохранением записи this. initItems(); callback. call(scope); }, this]); } //TODO: добавить свою валидацию, регулярное выражение для валидации поля можно скопировать // из mask. re. full в MultiMaskEdit } }; });