Разработка компонента без злосчастного 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.

☕ Угостить чашкой кофе

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}`
})