Разработка компонента без злосчастного ExtJS

Привет всем.

Во время выступления Steffan Blockx (Building a CMP without ExtJS) в этом году на митапе MODX AMSTERDAM я вдоволь насмеялся, потому, что для меня тема и содержание его выступления были не содержательными. Он 45 мин. говорил, что компонент для MODX можно написать и без ExtJS. Но как же я ошибался по поводу очевидности его слов. Для кого-то — да, а для некоторых оказывается, что не совсем.

Несколько причин очевидности:

Самый смешной аргумент звучал так: «Wordpress хорош тем, что там можно использовать что угодно!». Читатель, тут нужно смеяться.

Это была первая причина, а вторая поинтереснее. Как же устаешь от нытья в чате телеграм по поводу ExtJS. Каждый клянется, что он точно не является некрофилом и ему противно вступать в половые отношения с «мертвым» MODX.

Третья причина банальная, несколько людей попросили показать.
_________________________________________________________

Итак, для быстрого старта можно взять modExtra, удаляем все js файлы, создаем файл test.js по пути assets/components/modextra/js/mgr/ с таким содержанием:

modExtra.init = function() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', modExtra.config.connector_url + '?action=mgr/item/getlist');
    xhr.setRequestHeader('Powered-By', 'MODx');
    xhr.setRequestHeader('modAuth', MODx.siteId);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            try {
                var data = JSON.parse(xhr.responseText);
                console.log(data);
            } catch(err) {
                console.log(err.message + ' in ' + xhr.responseText);
                return;
            }
        }
    }
    xhr.send();
}

Теперь открываем файл core/components/modextra/controllers/home.class.php 67-ую строку заменяем на:
Ext.onReady(function() {modExtra.init();});    // Это единственная строка которая хоть как-то относится к ExtJS

Заодно удалим вызовы метода addJavascript с 56 по 62 строку и добавляем:
$this->addJavascript($this->modExtra->config['jsUrl'] . 'mgr/test.js');

Запускаем build, заходим в панели управления на страницу компонента и заглядываем в консоль браузера, там будет подарок. Естественно, предварительно нужно создать пару записей в БД чтобы получить их.

Пара слов об этих строчках:
xhr.setRequestHeader('Powered-By', 'MODx');
xhr.setRequestHeader('modAuth', MODx.siteId);
Если в нашем запросе не будет этих заголовков, то мы ничего из коннектора не сможем получить.
В js объекте MODx в свойстве siteId хранится результат метода getUserToken пользователя. Можно поступить и другим способом:

xhr.open('GET', modExtra.config.connector_url + '?action=mgr/item/getlist&HTTP_MODAUTH=' + MODx.siteId);

Либо самостоятельно в классе контроллера его можно получить след. образом:
$this->addHtml('<script type="text/javascript">
modExtra.config.http_modauth= "' . $this->modx->user->getUserToken($this->modx->context->get('key')) . '";
</script>');
и потом:
xhr.open('GET', modExtra.config.connector_url + '?action=mgr/item/getlist&HTTP_MODAUTH=' + modExtra.config.http_modauth);

Еще один не очевидный факт для меня, это то что процессор modObjectGetListProcessor в запросе ждёт не offset а start, т.е. при пагинации записей нужно отправлять именно start.

Итог


Хотел побольше примеров написать в этой статье, но случайно получился целый компонент modNotes



Репозиторий на github.com, вы можете ознакомится с ним.

Если он нужен будет кому-то, то отпишитесь в комментариях чтобы я его выложил на modstore.pro. Спасибо за внимание.

P.S. Прошу без бомбежки в комментариях, я прекрасно осознаю недостатки ExtJS который имплементирован в MODX.
Баха Волков
13 ноября 2019, 05:49
modx.pro
17
966
+42

Комментарии: 13

Алексей Соин
13 ноября 2019, 08:12
0
Интересная статья, спасибо?
    Алексей Шумаев
    13 ноября 2019, 08:24
    0
    Действительно нужная информация. Спасибо!
      Антон Тарасов
      13 ноября 2019, 09:19
      0
      А что, так можно было?))

      Спасибо большое, надо пробовать!
        Баха Волков
        14 ноября 2019, 11:14
        +2
        Ага)

        А еще его можно будет развить и т.к. у меня уже времени нет предлагаю тем у кого есть желание и это самое время его допилить, создал несколько issues

        Если кто-то отправит PR то я и сообщество (кому нужен будет этот компонент) только будем рады этому. Спасибо всем за обратную связь!
        Павел Голубев
        13 ноября 2019, 11:27
        +4
        Можно и fetch'ем забирать данные

        fetch(modExtra.config.connector_url,
        {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
                'X-Requested-With': 'XMLHttpRequest',
                'modAuth': MODx.siteId
            },
            credentials: 'include',
            body:  `action=mgr/item/getlis&HTTP_MODAUTH=${MODx.siteId}`
        })
          Николай Савин
          13 ноября 2019, 13:10
          +1
          Можно при желании и через axios сделать. Вопрос то не в технологии, а в принципе работы, как я понял.
          Для начала стоит задача показать что и так можно, и не extJS единым может MODX жить
            Павел Голубев
            14 ноября 2019, 10:32
            +3
            Если задача такая, то внутри Ext можно Vue использовать.
            Например, требуется дополнительный таб в ресурсах, а внутри таба уже будем Vue использовать.

            Ext.ComponentMgr.onAvailable("modx-resource-tabs", function() {
                let tabs = this;
                tabs.on("beforerender", () => {
                    tabs.add({
                        title: _('tab-name'),
                        id: "tab-id",
                        layout: 'form',
                        labelAlign: 'top',
                        items: [{
                            html: '<div id="for-vue-wrapper"><vue-component></vue-component></div>',
                            listeners: {
                                afterrender() {
                                    new Vue({el: '#for-vue-wrapper'});
                                }
                            }
                        }]
                    });
                });
            });
          Павел
          13 ноября 2019, 13:55
          +1
          Было бы круто, если бы такой компонент появился в modstore
            Здоров Александр
            13 ноября 2019, 22:16
            +1
            поддерживаю добавление в modstore)
            от себя один момент — может расширенную заметку или внутренний скролл, вижу его использование в качестве карточек для клиента, что где искать в админке
              Баха Волков
              14 ноября 2019, 11:18
              +1
              Выложу обязательно в таком случае, сразу после того как несколько issue будут реализованы мной или кем-то из сообщества, а то неправильно будет выкладывать без определенного функционала. Список недостающего функционала можно увидеть тут, работы немного но у меня и вправду времени критически не хватает
              Сергей Шлоков
              14 ноября 2019, 07:23
              +2
              Одно замечание. Префикс «mod» зарезервирован для системного функционала. А твой компонент явно никак не связан с ядром. Лучше не нарушать правила!
              Вася
              17 ноября 2019, 19:56
              0
              Благодарю. Очень полезно!
                Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
                13