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

Привет всем.

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

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

ExtJS всё еще JS и обходится без магии работая с процессорами
На данный момент есть много компонентов (барабанная дробь) которые работают на чистом js или используя библиотеки. Shopkeeper3 (Angular), imgArea (частично jQuery), ModxMinify (jQuery)
Об использовании vue писали и раньше

Самый смешной аргумент звучал так: «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

2 610

+42

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

Алексей Соин

13 ноября 2019, 08:12

Интересная статья, спасибо?

Алексей Шумаев

13 ноября 2019, 08:24

Действительно нужная информация. Спасибо!

Антон Тарасов

13 ноября 2019, 09:19

А что, так можно было?))

Спасибо большое, надо пробовать!

Баха Волков

14 ноября 2019, 11:14

Ага)

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

Если кто-то отправит PR то я и сообщество (кому нужен будет этот компонент) только будем рады этому. Спасибо всем за обратную связь!

Павел Голубев

13 ноября 2019, 11:27

Можно и 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

Можно при желании и через axios сделать. Вопрос то не в технологии, а в принципе работы, как я понял.
Для начала стоит задача показать что и так можно, и не extJS единым может MODX жить

Павел Голубев

14 ноября 2019, 10:32

Если задача такая, то внутри 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

Было бы круто, если бы такой компонент появился в modstore

Здоров Александр

13 ноября 2019, 22:16

поддерживаю добавление в modstore)
от себя один момент — может расширенную заметку или внутренний скролл, вижу его использование в качестве карточек для клиента, что где искать в админке

Баха Волков

14 ноября 2019, 11:18

Выложу обязательно в таком случае, сразу после того как несколько issue будут реализованы мной или кем-то из сообщества, а то неправильно будет выкладывать без определенного функционала. Список недостающего функционала можно увидеть тут, работы немного но у меня и вправду времени критически не хватает