Привязываем сторонние плагины к полям формы ExtJS

05 июля 2016, 16:59

Страница компонента в MODX — это такой же интерфейс, как и везде. Он нужен для пользователей, поэтому, нужно упростить им жизнь. Представим, что одно из полей кастомного объекта — это телефон. Чтобы пользователь не путался — в каком формате вводить телефон в это поле, установим для него маску.

Можно было, конечно, написать функционал маски для поля ввода на ExtJS, но это сложно и долго. Мы «прикрутим» к форме jQuery MaskedInput.

Я покажу, как «прикрутить» его к CustomExtra, но такой метод можно использовать и в своих компонентах.

Плагин нужно загрузить в папку компонента, а jQuery мы будем подключать с CDN, хотя можно тоже загрузить на сайт, чтобы ни от чего не зависеть.

Дополнительные JS-файлы подключаются в контроллере core/components/customextra/controllers/home.class.php:

/**
* @return void
*/
public function loadCustomCssJs() {
  // ...
  $this->addJavascript('https://code.jquery.com/jquery-2.2.4.min.js');
  $this->addJavascript($this->customExtra->config['jsUrl'] . 'lib/jquery.maskedinput.min.js');
  // ...
}

После того, как файлы подключены, мы можем использовать плагин в наших формах. Добавим вызов плагина во время рендера окон (создания и редактирования объектов)

// ...
var w = MODx.load({
  xtype: 'customextra-item-window-create',
  id: Ext.id(),
  listeners: {
    success: {
      fn: function () {
        this.refresh();
      }, scope: this
    },
    // Добавляем плагин после рендера формы
    afterrender: function() {
      $('input[name="string1"]').mask("+7 (999) 999-9999");
    }
  }
});
// ...

Теперь при вводе номера телефона, пользователь не ошибётся

← Добавляем массовые операции в грид ExtJS

Добавляем загрузку файла в окно ExtJS →

+1 Илья Уткин Блог ExtJS G+

{ xtype: 'textarea', cls: 'modx-richtext', fieldLabel: _('commonwidget_item_content'), name: 'content', id: config.id + '-content', anchor: '99%', height: 100, listeners: { render: function () { if (MODx.loadRTE) { window.setTimeout(function() { MODx.loadRTE(config.id + '-content'); // id поля }, 300); } } } }

{ xtype: 'textarea', fieldLabel: _('bannery.ads.description'), name: 'description', id: 'bannery.ads.description', cls: 'modx-richtext', anchor: '99%', height: 100, allowBlank: true, resize: true, listeners: { render: function () { let showDisriptionRTE = true; if (showDisriptionRTE) { if (MODx.loadRTE) { window.setTimeout(function() { MODx.loadRTE('bannery.ads.description'); }, 50); } } } } }

8 комментариев

Tanya 16 июля 2016, 13:07 # ↓ +1

очень интересный способ! Но возможно ли такое проделать с обычными тв-полями?

ответить
1. Илья Уткин 18 июля 2016, 10:27 # ↑ ↓ +1
  
  Да, можно. Я думаю, для ТВ можно будет обойтись только плагином — не надо даже компонент свой писать. Но готового решения у меня пока нет.
  
  ответить
Tim 23 января 2017, 13:14 # ↓ 0

Илья, приветствую!
На сайте реализован импорт ресурсов из xml ссылок, которые прописаны в категориях, в общей сложности по всем категориям собирается порядка 100 тыс. При добавлении/ обновлении ссылок, чтобы не запускать целиком весь импорт, который может затянуться на несколько часов, а то и суток, придумали следующее:

Что если добавить виджет в панель управления MODX, в котором будут перечислены категории со ссылками, и чекбоксы (чтобы отметить нужные категории) После того, как отмечу все необходимые категории, нажимаю – ИМПОРТ, и запускается консольный импорт ресурсов из xml только отмеченных категорий. Причем всё в цикле (как, например, при запуске индексации mSearch2 из админки).

Пытался найти что-то похожее на просторах интернета, и не нашел. Может не так искал.

Так вот вопрос, с высоты вашего опыта, что можете посоветовать почитать или может подскажете, куда копать, чтобы реализовать подобное (а может и что-то более удобное сможете подсказать)

Спасибо! :)

ответить
1. Илья Уткин 23 января 2017, 13:33 # ↑ ↓ 0
  
  Посмотрите modImporter. Тем более, что один час на консультации и мелкую помощь включен в стоимость.
  
  ответить