Как подключить вкладку в ресурсе

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

Ext.onReady(function () {
    var mainPanel = Ext.getCmp("modx-panel-resource");
    if (!mainPanel) return;

    if (mainPanel.config.record.id > 0) {
        sOneRapBattles.config.docid = mainPanel.config.record.id;

        MODx.addTab("modx-resource-tabs", {
            title: _("sonerapbattles_items"),
            id: "sonerapbattles-tab",
            width: "95%",
            items: [{
                xtype: "sonerapbattles-grid-items",
                width: "95%"
            }]
        });
    }
});

Добавил запись в home.class.php

$this->addJavascript($this->sOneRapBattles->config['jsUrl'] . 'mgr/filestab.js');
Думаю что ответ кроется тут

id: "sonerapbattles-tab",
Откуда взять этот id?

Не могу понять, почему не генерится вкладка. Что нужно ещё сделать? Может кто-нибудь описать алгоритм?
SEQUEL.ONE
29 мая 2020, 00:40
modx.pro
2
156
0

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

Наумов Алексей
29 мая 2020, 09:25
+1
Я делаю так (именно для создания вкладки у ресурса!):
1. Плагин на OnDocFormRender, для новых ресурсов вкладку не показываю:
<?php
/** @var array $scriptProperties */
switch ($modx->event->name) {
    case 'OnDocFormRender':
        /** @var modResource $resource */
        if ($mode == 'new') {
            return;
        }
...
2. Далее подключаю все нужные js файлы, их у компонента много может быть, я для пример 2 показываю, но по факту их 10+:
$url = $easyComm->config['assetsUrl'];
$modx->controller->addJavascript($url . 'js/mgr/easycomm.js');
.... и остальные файлы
 $modx->controller->addLastJavascript($url . 'js/mgr/widgets/page.panel.js');
3. Далее есть сценарий, что установлен AjaxManager, тогда 2 варианта создания вкладки, немного разных:
if ($modx->getCount('modPlugin', array('name' => 'AjaxManager', 'disabled' => false))) {
            $modx->controller->addHtml('
			<script type="text/javascript">
				Ext.onReady(function() {
					window.setTimeout(function() {
						var tabs = Ext.getCmp("modx-resource-tabs");
						if (tabs) {
							tabs.add({
								xtype: "ec-panel-page",
								id: "ec-panel-page",
								title: _("ec"),
								record: {
									id: ' . $resource->get('id') . '
								}
							});
						}
					}, 10);
				});
			</script>');
        }
        else {
            $modx->controller->addHtml('
			<script type="text/javascript">
				Ext.ComponentMgr.onAvailable("modx-resource-tabs", function() {
					this.on("beforerender", function() {
						this.add({
							xtype: "ec-panel-page",
							id: "ec-panel-page",
							title: _("ec"),
							record: {
								id: ' . $resource->get('id') . '
							}
						});
					});
					Ext.apply(this, {
							stateful: true,
							stateId: "modx-resource-tabs-state",
							stateEvents: ["tabchange"],
							getState: function() {return {activeTab:this.items.indexOf(this.getActiveTab())};
						}
					});
				});
			</script>');
        }
4. ec-panel-home это уже панель вашего компонента, описана в page.panel.js, который был подключен на странице в плагине, ну типа:
easyComm.panel.Page = function (config) {
    config = config || {};
    Ext.apply(config, {
        baseCls: 'modx-formpanel',
        layout: 'anchor',

        hideMode: 'offsets',
        items: [ а здесь все содержимое, вкладки, формы и т.д. ]
    });
    easyComm.panel.Page.superclass.constructor.call(this, config);
};
Ext.extend(easyComm.panel.Page, MODx.Panel);
Ext.reg('ec-panel-page', easyComm.panel.Page);
    Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
    1