Наверх

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

Страница компонента в 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");
    }
  }
});
// ...

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


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

  1. Tanya 16 июля 2016, 13:07 # +1
    очень интересный способ! Но возможно ли такое проделать с обычными тв-полями?
    1. Илья Уткин 18 июля 2016, 10:27 # +1
      Да, можно. Я думаю, для ТВ можно будет обойтись только плагином — не надо даже компонент свой писать. Но готового решения у меня пока нет.
    2. Tim 23 января 2017, 13:14 # 0
      Илья, приветствую!
      На сайте реализован импорт ресурсов из xml ссылок, которые прописаны в категориях, в общей сложности по всем категориям собирается порядка 100 тыс. При добавлении/ обновлении ссылок, чтобы не запускать целиком весь импорт, который может затянуться на несколько часов, а то и суток, придумали следующее:

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

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

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

      Спасибо! :)
      1. Илья Уткин 23 января 2017, 13:33 # 0
        Посмотрите modImporter. Тем более, что один час на консультации и мелкую помощь включен в стоимость.
      2. Slava 16 марта 2017, 22:24 # 0
        А как подключить не сторонний плагин, а установленный TinyMCE?

        Илья, спасибо за ваши уроки. Они мне здорово помогли.
        1. Илья Уткин 20 марта 2017, 09:19 # 0
          Я как-то так когда-то делал:
          {
              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);
                      }
                  }
              }
          }
          1. Slava 30 марта 2017, 22:10 # 0
            Илья, спасибо! Все получилось.
            1. Дмитрий 13 июля 2020, 21:56 # 0
              У меня не пашет. Вот. Не сохраняется.
              {
              				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);
              							}
              						}
              					}
              				}
              			}

          Авторизация

          через сервис Loginza:


          Шаблоны MODX

          1 2 Дальше »

          Объектная
          модель
          MODX