ru.coon 2.6.8 → 2.6.9

package/src/uielement/component/UiCPVisualEditor.js

@@ -0,0 +1,896 @@
+Ext.define('Coon.uielement.component.UiCPVisualEditor', {
+    extend: 'Ext.panel.Panel',
+    cls: 'UiCPVisualEditor',
+    alias: 'widget.UiCPVisualEditor',
+    xtype: 'UiCPVisualEditor',
+    header: false,
+    layout: 'border',
+    requires: [
+        'Coon.uielement.component.UiCPVisualEditorConfigWindow'
+    ],
+    controller: {
+        defaultPixelsSize: 200,
+        bindingRegister: [],
+        plugins: [],
+        isTipOpened: false,
+        onTreeItemContextMenu: function(view, record, item, index, event, opt) {
+            this.onContextClick(event, item, {
+                'cmp': this.getEditorPanel().down('[dataId=' + record.get('dataId') + ']'),
+                'target': Ext.get(item.id).el,
+            });
+            return false;
+        },
+        deselectAllCmp: function() {
+            this.getEditorPanel().query('[dataId]').map((item) => {
+                if (item.el) {
+                    item.el.dom.classList.remove('hover-item');
+                }
+            });
+        },
+        selectCmp: function(id) {
+            const cmp = this.getEditorPanel().down('[dataId=' + id + ']');
+            if (cmp && cmp.el) {
+                cmp.el.dom.classList.add('hover-item');
+            }
+        },
+        onTreeSelectionChange: function(tree, selection) {
+            this.deselectAllCmp();
+            if (selection.length) {
+                this.selectCmp(selection[0].get('dataId'));
+            }
+        },
+        getEditorPanel: function() {
+            return this.getView().down('[dataId=editorPanel]');
+        },
+        onRenderMainPanel: function() {
+            this.renderTemplate();
+        },
+        getFirstContainer: function(formData) {
+            return formData.find((item) => {
+                if (item.xtype === 'panel' || item.xtype === 'container') {
+                    return item;
+                }
+                if (item.items && item.items.length) {
+                    return this.getFirstContainer(item.items);
+                }
+            });
+        },
+        normaliseMainPluginsCfg: function(data) {
+            data.map((item) => {
+                if (item.cmpParams) {
+                    if (item.cmpParams.mainPlugins && item.cmpParams.mainPlugins.length) {
+                        this.plugins = item.cmpParams.mainPlugins;
+                        delete item.cmpParams['mainPlugins'];
+                    }
+                    if (item.items && item.items.length) {
+                        this.normaliseMainPluginsCfg(item.items);
+                    }
+                }
+            });
+        },
+        renderTemplate: function(data) {
+            this.getEditorPanel().removeAll(true);
+            const formData = this.getTemplate(data);
+            const firstContainer = this.getFirstContainer(formData);
+            this.plugins = [];
+            this.normaliseMainPluginsCfg(formData);
+            if (this.plugins.length) {
+                firstContainer.plugins = this.plugins;
+                firstContainer.cmpParams.mainPlugins = this.plugins;
+            }
+            firstContainer['controller'] = {};
+            firstContainer['viewModel'] = {};
+            this.reloadTreeStore(formData);
+            try {
+                this.getEditorPanel().add(formData);
+            } catch (e) {
+                Ext.Msg.alert('Ошибка', e.message);
+            }
+        },
+        reloadTreeStore: function(formData) {
+            this.getView().down('[dataId=treeEditorPanel]').setRootNode(this.getNodeCfg(formData)[0]);
+        },
+        getNodeCfg: function(items) {
+            if (!items) {
+                return [];
+            }
+            return items.map((item) => {
+                const subItems = item.uiElementCd ? false : this.getNodeCfg(item.items);
+                let obj = {};
+                if (item.isContainer) {
+                    obj = {leaf: false, children: []};
+                } else {
+                    obj = {leaf: true};
+                }
+                const result = Ext.apply({
+                    'text': item.cmpParams.xtype,
+                    'dataId': item.cmpParams.dataId,
+                }, subItems && subItems.length ? {children: subItems, expanded: true} : obj);
+                return result;
+            });
+        },
+        getTemplate: function(data) {
+            if (!data) {
+                data = [this.getDefaultData()];
+            }
+            return data.map((item) => {
+                return this.getTemplateCmp(item);
+            });
+        },
+        getDefaultsByLayoutType: function(layout) {
+            switch (layout) {
+            case 'vbox':
+                return {width: '100%', flex: 1};
+            case 'hbox':
+                return {height: '100%', flex: 1};
+            }
+        },
+        modifyObject: function(obj) {
+            const newObject = {};
+            newObject.cmpParams = obj;
+            delete newObject.cmpParams['uiElementCd'];
+            // delete newObject.cmpParams['plugins'];
+            if (obj.xtype === 'ReportPanel') {
+                delete newObject.cmpParams['items'];
+            }
+            if (!obj.xtype) {
+                newObject.cmpParams.xtype = 'panel';
+            }
+
+            return newObject;
+        },
+        getTemplateCmp: function(cfg) {
+            const modifiedObject = typeof cfg.cmpParams !== 'undefined' ? cfg : this.modifyObject(cfg);
+            if (typeof modifiedObject.cmpParams.items !== 'undefined' && modifiedObject.cmpParams.items.length) {
+                modifiedObject.items = modifiedObject.cmpParams.items;
+                delete modifiedObject.cmpParams['items'];
+            }
+            if (!modifiedObject.cmpParams.dataId) {
+                modifiedObject.cmpParams.dataId = Ext.id() + '-interface-node';
+            }
+            const layout = typeof modifiedObject.cmpParams.layout === 'undefined' ? 'fit' :
+                modifiedObject.cmpParams.layout === 'object' ? modifiedObject.cmpParams.layout.type : modifiedObject.cmpParams.layout;
+            const newCmp = Ext.apply({
+                'defaults': this.getDefaultsByLayoutType(layout),
+                'cmpParams': modifiedObject.cmpParams,
+            }, modifiedObject.cmpParams);
+            if (modifiedObject.items && modifiedObject.items.length) {
+                newCmp.items = this.getTemplate(modifiedObject.items);
+            }
+            if (!newCmp.items || newCmp.items.length === 0) {
+                newCmp.cls = 'borders-default';
+                newCmp.listeners = {'render': this.onGetTemplateCmp.bind(this)};
+            }
+            return newCmp;
+        },
+        getCurrentPanelIndex: function(panel) {
+            let panelIndex = 0;
+            panel.up().items.items.map((item, index) => {
+                if (item.id === panel.id) {
+                    panelIndex = index;
+                }
+            });
+            return panelIndex;
+        },
+        addCmp: function(cmp, side, inParent, xtype) {
+            if (inParent && cmp.up().xtype === cmp.xtype) {
+                cmp = cmp.up();
+            }
+            const parent = cmp.up();
+            if (!parent) {
+                return false;
+            }
+            const parentLayout = parent.layout.type || false;
+            const index = this.getCurrentPanelIndex(cmp);
+            let container = {};
+            let newIndex = index;
+            const needLayout = side === 'left' || side === 'right' ? 'hbox' : 'vbox';
+            if (side === 'down' || side === 'right') {
+                newIndex = Number(index) + 1;
+            }
+            if (parentLayout === needLayout) {
+                parent.insert(newIndex, this.getTemplateCmp(this.getDefaultCmp(xtype)));
+            } else {
+                container = {
+                    xtype: xtype,
+                    cmpParams: {
+                        xtype: xtype,
+                        layout: needLayout,
+                        flex: cmp.flex || 1,
+                    },
+                    layout: needLayout,
+                    flex: cmp.flex || 1,
+                    items: [],
+                };
+                const currentTemplate = this.getTemplate(this.getData([cmp])).pop();
+                const defaultTemplate = this.getTemplateCmp(this.getDefaultCmp(xtype));
+                if (side === 'down' || side === 'right') {
+                    container.items = [currentTemplate, defaultTemplate];
+                } else {
+                    container.items = [defaultTemplate, currentTemplate];
+                }
+                parent.remove(cmp, true);
+                parent.insert(index, [container]);
+            }
+            this.renderTemplate(this.getData(this.getEditorPanel().items.items));
+        },
+        getData: function(items) {
+            if (!items) {
+                return [];
+            }
+            return items.map((item) => {
+                const subItems = !item.cmpParams ||
+                    item.xtypesMap.grid ||
+                    item.cmpParams.xtype === 'ReportPanel' ||
+                    (!item.items ?
+                        false :
+                        this.getData(item.items.items)
+                    );
+                const result = Ext.apply({
+                    'cmpParams': item.cmpParams,
+                }, subItems ? {items: subItems} : {});
+                return result;
+            });
+        },
+
+        onDeleteCmpClick: function(elem) {
+            const me = this;
+            Ext.Msg.show({
+                title: 'Внимание',
+                message: 'Вы действительно хотите удалить элемент рабочего стола?',
+                buttons: Ext.Msg.YESNO,
+                icon: Ext.Msg.QUESTION,
+                fn: function(btn) {
+                    if (btn === 'yes') {
+                        const branch = me.getDeletedBranch(elem);
+                        const xtype = branch.xtype;
+                        const parent = branch.up();
+                        branch.destroy();
+                        if (parent.xtype === xtype && parent.items.items.length === 1) {
+                            parent.cmpParams = parent.items.items[0].cmpParams;
+                            parent.cmpParams.items = me.getData(parent.items.items[0].items.items);
+                            parent.removeAll(true);
+                        }
+                        me.reloadView();
+                    }
+                },
+            });
+        },
+        getDeletedBranch: function(panel) {
+            if (panel.up().items.items.length > 1 || panel.xtype !== panel.up().xtype || panel.up().dataId === 'editorPanel') {
+                return panel;
+            }
+            return this.getDeletedBranch(panel.up());
+        },
+        clearBindRegister: function() {
+            this.bindingRegister.map((bind) => {
+                bind.destroy();
+            });
+        },
+        reloadView: function() {
+            this.clearBindRegister();
+            this.renderTemplate(this.getData(this.getEditorPanel().items.items));
+        },
+        onContextClick: function(event, dom, opt) {
+            const cmp = opt.cmp;
+            const target = !opt.target ? cmp : opt.target;
+            const contextMenu = new Ext.menu.Menu({
+                closeAction: 'destroy',
+                items: this.getMenuCfgByXtype(cmp.cmpParams.xtype, cmp),
+                listeners: {
+                    hide: function() {
+                        const me = this;
+                        Ext.defer(() => me.destroy(), 2000);
+                    },
+                },
+            });
+            contextMenu.showAt(target.getX(), target.getY());
+            event.preventDefault();
+            return false;
+        },
+        onGetTemplateCmp: function(elem) {
+            const cmp = Ext.get(elem.id);
+            cmp.on('mouseover', this.enableBorders.bind(this, cmp, true));
+            cmp.on('mouseout', this.enableBorders.bind(this, cmp, false));
+            cmp.on('contextmenu', this.onContextClick, this, {'cmp': elem});
+            /* elem.el.dom.addEventListener('mouseover', this.enableBorders.bind(this, true), this);
+            elem.el.dom.addEventListener('mouseout', this.enableBorders.bind(this, false), this);*/
+        },
+        enableBorders: function(elem, flag, event) {
+            if (flag) {
+                elem.dom.classList.add('hover-item');
+            } else {
+                elem.dom.classList.remove('hover-item');
+            }
+            // }
+        },
+        onClickButtonAddPanel: function(panel, event) {
+            this.addCmp(panel, event.target.getAttribute('data-side'), event.target.getAttribute('data-in-parent') === 'true', 'container');
+        },
+        renderMenu: function(panel, xtype, event) {
+            const me = this;
+            if (!me.isTipOpened) {
+                me.isTipOpened = true;
+                const tip = Ext.create('Ext.tip.Tip', {
+                    autoShow: false,
+                    target: event.target,
+                    closeAction: 'destroy',
+                    closable: true,
+                    layout: 'fit',
+                    cls: 'menu-tip',
+                    listeners: {
+                        'beforeclose': function() {
+                            me.isTipOpened = false;
+                        },
+                    },
+                    items: [
+                        {
+                            xtype: 'treelist',
+                            store: {
+                                root: me.getMenuCfgByXtype(xtype),
+                            },
+                            listeners: {
+                                'itemclick': me.menuItemClick.bind(me, panel),
+                            },
+                        }
+                    ],
+                });
+                tip.show();
+                // tip.setXY([event.clientX, event.clientY]);
+            }
+        },
+        getIndex: function(panel) {
+            let index = 0;
+            panel.up().items.keys.find((item, number) => {
+                if (panel.id === item) {
+                    index = number;
+                    return item;
+                }
+            });
+            return index;
+        },
+        getMenuCfgByXtype: function(xtype, panel) {
+            const me = this;
+            let buttons = [];
+            if (panel.isContainer) {
+                buttons = buttons.concat([{
+                    iconCls: 'x-fa fa-file-invoice',
+                    text: 'Добавить элемент',
+                    handler: () => me.onAddCmpClick(panel),
+                },
+                {
+                    iconCls: 'x-fa fa-file-invoice',
+                    text: 'Импортировать существующую настраиваемую панель',
+                    handler: () => me.onAddExistingPanelCmpClick(panel),
+                },
+                {iconCls: 'x-fa fa-copy', text: 'Копировать содержимое'},
+                {iconCls: 'x-fa fa-paste', text: 'Вставить содержимое'},
+                {iconCls: 'x-fa fa-pastafarianism', text: 'Заменить содержимое'}]
+                );
+                const firstContainer = this.getFirstContainer(this.getEditorPanel().items.items);
+                if (firstContainer.dataId !== panel.dataId) {
+                    buttons = buttons.concat([
+                        {
+                            iconCls: 'x-fa fa-file-invoice',
+                            text: 'Прикрепить отчет',
+                            handler: () => me.onAddReportCmpClick(panel),
+                        }
+                    ]
+                    );
+                }
+            }
+            if (panel.successUserEditingOptions && panel.successUserEditingOptions.length) {
+                buttons = buttons.concat([
+                    {iconCls: 'x-fa fa-cog', text: 'Настройки', handler: () => me.onSettingsCmpClick(panel)}
+                ]);
+            }
+            if (panel.up().dataId !== 'editorPanel') {
+                buttons = buttons.concat([{
+                    iconCls: 'x-fa fa-remove',
+                    text: 'Удалить',
+                    handler: () => me.onDeleteCmpClick(panel),
+                }]);
+            }
+            buttons = buttons.concat([{
+                iconCls: 'x-fa fa-save',
+                text: 'Сохранить',
+                handler: () => me.onSaveCmpClick(panel),
+            }]);
+
+            if (panel.up().layout.type !== 'border' && panel.up().isContainer && panel.up().items.length > 1) {
+                const curIndex = this.getIndex(panel);
+                if (curIndex === 0 || curIndex === panel.up().items.length - 1) {
+                    if (curIndex === 0) {
+                        buttons = buttons.concat([{
+                            iconCls: 'x-fa fa-chevron-circle-down',
+                            text: 'Переместить вниз',
+                            handler: () => me.onMoveCmpClick(panel, curIndex + 1),
+                        }]);
+                    }
+                    if (curIndex === panel.up().items.length - 1) {
+                        buttons = buttons.concat([{
+                            iconCls: 'x-fa fa-chevron-circle-up',
+                            text: 'Переместить вверх',
+                            handler: () => me.onMoveCmpClick(panel, curIndex - 1),
+                        }]);
+                    }
+                } else {
+                    buttons = buttons.concat([{
+                        iconCls: 'x-fa fa-chevron-circle-up',
+                        text: 'Переместить вверх',
+                        handler: () => me.onMoveCmpClick(panel, curIndex - 1),
+                    }, {
+                        iconCls: 'x-fa fa-chevron-circle-down',
+                        text: 'Переместить вниз',
+                        handler: () => me.onMoveCmpClick(panel, curIndex + 1),
+                    }]);
+                }
+            }
+
+            switch (xtype) {
+            case 'container':
+                buttons = [
+                    {
+                        iconCls: 'x-fa fa-angle-left',
+                        text: 'Добавить влево',
+                        handler: () => me.addCmp(panel, 'left', false, xtype),
+                    },
+                    {
+                        iconCls: 'x-fa fa-angle-right',
+                        text: 'Добавить вправо',
+                        handler: () => me.addCmp(panel, 'right', false, xtype),
+                    },
+                    {
+                        iconCls: 'x-fa fa-angle-up',
+                        text: 'Добавить панель вверх',
+                        handler: () => me.addCmp(panel, 'up', false, xtype),
+                    },
+                    {
+                        iconCls: 'x-fa fa-angle-down',
+                        text: 'Добавить вниз',
+                        handler: () => me.addCmp(panel, 'down', false, xtype),
+                    },
+                    {
+                        iconCls: 'x-fa fa-angle-double-left',
+                        text: 'Добавить в родителя влево',
+                        handler: () => me.addCmp(panel, 'left', true, xtype),
+                    },
+                    {
+                        iconCls: 'x-fa fa-angle-double-right',
+                        text: 'Добавить в родителя вправо',
+                        handler: () => me.addCmp(panel, 'right', true, xtype),
+                    },
+                    {
+                        iconCls: 'x-fa fa-angle-double-up',
+                        text: 'Добавить в родителя вверх',
+                        handler: () => me.addCmp(panel, 'up', true, xtype),
+                    },
+                    {
+                        iconCls: 'x-fa fa-angle-double-down',
+                        text: 'Добавить в родителя вниз',
+                        handler: () => me.addCmp(panel, 'down', true, xtype),
+                    }
+                ].concat(buttons);
+                break;
+            }
+            return buttons;
+        },
+        menuItemClick: function(panel, list, opt) {
+            switch (opt.node.data.action) {
+            case 'add':
+                this.addCmp(panel, opt.node.data.side, opt.node.data.inParent, 'container');
+                break;
+            case 'addCmp':
+                this.onAddCmpClick(panel);
+                break;
+            case 'remove':
+                this.onDeleteCmpClick(panel);
+                break;
+            case 'save':
+                this.onSaveCmpClick(panel);
+                break;
+            }
+            list.up().close();
+        },
+        onMoveCmpClick: function(panel, needIndex) {
+            const parent = panel.up();
+            parent.remove(panel, false);
+            parent.insert(needIndex, panel);
+            this.reloadView();
+        },
+        onSaveCmpClick: function() {
+            JSON.stringify(this.getData(this.getEditorPanel().items.items));
+        },
+        enablePanelControls: function(div, flag) {
+            div.style.display = flag ? 'unset' : 'none';
+        },
+        onAddCmpClick: function(panel) {
+            const me = this;
+            let value = 'container';
+            let data = [
+                {'id': 'container', 'name': 'Контенер'},
+                {'id': 'panel', 'name': 'Панель'},
+                {'id': 'tabpanel', 'name': 'Таб панель'},
+                {'id': 'fieldset', 'name': 'fieldset'},
+                {'id': 'textfield', 'name': 'Текстовое поле'},
+                {'id': 'numberfield', 'name': 'Числовое поле'},
+                {'id': 'datefield', 'name': 'Дата'}
+            ];
+            if (panel.xtype === 'tabpanel') {
+                data = [{'id': 'panel', 'name': 'Панель'}];
+                value = 'panel';
+            }
+            Ext.create('Ext.window.Window', {
+                closable: true,
+                parentPanel: panel,
+                closeAction: 'destroy',
+                width: 400,
+                title: 'Добавлние элемента',
+                height: 170,
+                modal: true,
+                maximazible: false,
+                minimazible: false,
+                items: [
+                    {
+                        margin: '10px 5px',
+                        fieldLabel: 'Тип элемента',
+                        flex: 1,
+                        width: '100%',
+                        xtype: 'combo',
+                        queryMode: 'local',
+                        value: value,
+                        displayField: 'name',
+                        valueField: 'id',
+                        store: {
+                            fields: ['id', 'name'],
+                            data: data,
+                        },
+                    }
+                ],
+                buttons: [
+                    {
+                        text: 'Применить',
+                        handler: me.insertCmp.bind(me, panel),
+                    },
+                    {
+                        text: 'Отмена',
+                        handler: function() {
+                            this.up('window').close();
+                        },
+                    }
+                ],
+            }).show();
+        },
+        insertCmp: function(panel, btn) {
+            const cmpXtype = btn.up('window').down('combo').getValue();
+            if (!panel.items.length) {
+                switch (cmpXtype) {
+                case 'textfield':
+                case 'numberfield':
+                case 'datefield':
+                    panel.cmpParams.layout = 'anchor';
+                    break;
+                case 'panel':
+                case 'tabpanel':
+                case 'fieldset':
+                case 'container':
+                    panel.cmpParams.layout = 'fit';
+                    break;
+                }
+            }
+            panel.add(this.getCfgCmpByXtype(cmpXtype));
+            this.reloadView();
+            btn.up('window').close();
+        },
+        getCfgCmpByXtype: function(xtype) {
+            switch (xtype) {
+            case 'panel':
+                return {
+                    xtype: 'panel',
+                    layout: 'fit',
+                    cmpParams: {
+                        xtype: 'panel',
+                        layout: 'fit',
+                        title: 'Новая панель',
+                    },
+                    title: 'Новая панель',
+                };
+                break;
+            case 'tabpanel':
+                return {
+                    xtype: 'tabpanel',
+                    layout: 'fit',
+                    cmpParams: {
+                        xtype: 'tabpanel',
+                        layout: 'fit',
+                        title: 'Новая панель',
+                    },
+                    title: 'Новая панель',
+                };
+                break;
+            case 'container':
+                return {
+                    xtype: 'container',
+                    cmpParams: {
+                        xtype: 'container',
+                        layout: 'fit',
+                    },
+                    layout: 'fit',
+                };
+                break;
+            case 'fieldset':
+                return {
+                    xtype: 'fieldset',
+                    cmpParams: {
+                        xtype: 'fieldset',
+                        layout: 'fit',
+                        title: 'Филдсет',
+                    },
+                };
+                break;
+            case 'textfield':
+                return {
+                    xtype: 'textfield',
+                    cmpParams: {
+                        xtype: 'textfield',
+                        anchor: '100%',
+                        fieldLabel: 'Текствое поле',
+                    },
+                };
+                break;
+            case 'numberfield':
+                return {
+                    xtype: 'numberfield',
+                    cmpParams: {
+                        anchor: '100%',
+                        xtype: 'numberfield',
+                        fieldLabel: 'Числовое поле',
+                    },
+                };
+                break;
+            case 'datefield':
+                return {
+                    xtype: 'datefield',
+                    cmpParams: {
+                        anchor: '100%',
+                        xtype: 'datefield',
+                        fieldLabel: 'Дата поле',
+                    },
+                };
+                break;
+            }
+        },
+
+        getDefaultData: function() {
+            return {
+                'cmpParams': {'xtype': 'container', 'layout': 'fit', 'flex': 1, 'dataId': Ext.id() + '-interface-node'},
+
+            };
+        },
+        getDefaultCmp: function(xtype) {
+            return {
+                'cmpParams': {
+                    'layout': 'fit',
+                    'flex': 1,
+                    'xtype': xtype || 'container',
+                },
+            };
+        },
+        onSettingsCmpClick(panel) {
+            const window = Ext.create('Coon.uielement.component.UiCPVisualEditorConfigWindow', {
+                'parentPanel': panel,
+                'parentController': this,
+            });
+            window.show();
+        },
+        getValueJson: function(str) {
+            try {
+                return JSON5.parse(str);
+            } catch (e) {
+                return str;
+            }
+        },
+        valueIsValidJson: function(str) {
+            try {
+                return JSON5.parse(str);
+            } catch (e) {
+                return false;
+            }
+        },
+        onAddReportCmpClick: function(panel) {
+            const me = this;
+            Ext.create('Ext.window.Window', {
+                height: '80%',
+                width: 700,
+                layout: 'fit',
+                closeAction: 'destroy',
+                modal: true,
+                resizable: false,
+                minimazible: false,
+                maximazible: false,
+
+                items: [
+                    {
+                        xtype: 'grid',
+                        store: {
+                            type: 'json',
+                            pageSize: 0,
+                        },
+                        listeners: {
+                            itemdblclick: function(element, record) {
+                                const reportCfg = me.getDefaultCmp('ReportPanel');
+                                reportCfg.cmpParams.reportId = record.get('CM_REPORT_CD');
+                                panel.cmpParams = reportCfg.cmpParams;
+                                me.reloadView();
+                                element.up('window').close();
+                            },
+                            render: function(grid) {
+                                Promise.all([
+                                    Ext.Ajax.request({
+                                        url: 'ReportFormData/get',
+                                        method: 'POST',
+                                        params: {
+                                            reportId: 'REPORTS',
+                                            parameterList: '[]',
+                                        },
+                                    })
+                                ]).then(function(valArray) {
+                                    const panels = Ext.decode(valArray[0].responseText).list;
+                                    const data = panels.map((item) => {
+                                        return {
+                                            'CM_REPORT_CD': item.CM_REPORT_CD,
+                                            'DESCR': item.DESCR,
+                                        };
+                                    });
+                                    grid.getStore().loadData(data);
+                                });
+                            },
+                        },
+                        plugins: [
+                            {ptype: 'gridfilterbar', clicksToEdit: 2}
+                        ],
+                        columns: [
+                            {
+                                dataIndex: 'CM_REPORT_CD', text: 'Наименование', flex: 1, filter: {type: 'string'},
+                            },
+                            {dataIndex: 'DESCR', text: 'Описание', flex: 2, filter: {type: 'string'}}
+
+                        ],
+                    }
+                ],
+                buttons: [{
+                    text: 'Закрыть',
+                    handler: (elem) => elem.up('window').close(),
+                }],
+            }).show();
+        },
+        getDataFromTemplateObj: function(template) {
+
+        },
+        onAddExistingPanelCmpClick: function(panel) {
+            const me = this;
+            Ext.create('Ext.window.Window', {
+                height: '80%',
+                width: 700,
+                layout: 'fit',
+                closeAction: 'destroy',
+                modal: true,
+                resizable: false,
+                minimazible: false,
+                maximazible: false,
+
+                items: [
+                    {
+                        xtype: 'grid',
+                        store: {
+                            type: 'json',
+                            pageSize: 0,
+                        },
+                        listeners: {
+                            itemdblclick: function(element, record) {
+                                const command = Ext.create('command.GetUIElementCommand');
+                                command.on('complete', function(UIElementBean) {
+                                    const value = me.valueIsValidJson(UIElementBean.propertyData);
+                                    if (!value) {
+                                        Ext.Msg.alert('Ошибка', 'Не корректный JSON объект');
+                                        return false;
+                                    }
+                                    try {
+                                        const check = Ext.create('Ext.panel.Panel', value);
+                                        check.destroy();
+                                    } catch (e) {
+                                        element.up('window').close();
+                                        Ext.Msg.alert('Ошибка', e.message);
+                                        return false;
+                                    }
+                                    panel.removeAll(true);
+                                    if (value && value.plugins && value.plugins.length) {
+                                        panel.cmpParams.mainPlugins = value.plugins;
+                                        delete value['plugins'];
+                                    }
+                                    const content = me.getTemplate([value]);
+                                    panel.add(content);
+                                    me.reloadView();
+                                    element.up('window').close();
+                                    /*
+                                    */
+                                }, this);
+                                command.execute(record.get('CM_REPORT_CD'));
+                            },
+                            render: function(grid) {
+                                Promise.all([
+                                    Ext.Ajax.request({
+                                        url: 'ReportFormData/get',
+                                        method: 'POST',
+                                        params: {
+                                            reportId: 'UI_CUSTOM_PANELS_LIST',
+                                            parameterList: '[]',
+                                        },
+                                    })
+                                ]).then(function(valArray) {
+                                    const panels = Ext.decode(valArray[0].responseText).list;
+                                    const data = panels.map((item) => {
+                                        return {
+                                            'CM_REPORT_CD': item.UI_ELEMENT_CD,
+                                            'DESCR': item.DESCR,
+                                        };
+                                    });
+                                    grid.getStore().loadData(data);
+                                });
+                            },
+                        },
+                        plugins: [
+                            {ptype: 'gridfilterbar', clicksToEdit: 2}
+                        ],
+                        columns: [
+                            {
+                                dataIndex: 'CM_REPORT_CD', text: 'Наименование', flex: 1, filter: {type: 'string'},
+                            },
+                            {dataIndex: 'DESCR', text: 'Описание', flex: 2, filter: {type: 'string'}}
+
+                        ],
+                    }
+                ],
+                buttons: [{
+                    text: 'Закрыть',
+                    handler: (elem) => elem.up('window').close(),
+                }],
+            }).show();
+        },
+    },
+    items: [
+        {
+            xtype: 'panel',
+            region: 'center',
+            flex: 4,
+            layout: 'fit',
+            header: false,
+            dataId: 'editorPanel',
+            split: true,
+        },
+        {
+            xtype: 'treepanel',
+            store: {
+                type: 'tree',
+                rootVisible: false,
+                root: {
+                    expanded: true,
+                    children: [],
+                },
+            },
+            title: 'Структура',
+            cls: 'tree-container',
+            collapsible: true,
+            region: 'east',
+            flex: 1,
+            dataId: 'treeEditorPanel',
+            listeners: {
+                'selectionchange': 'onTreeSelectionChange',
+                'itemcontextmenu': 'onTreeItemContextMenu',
+            },
+        }
+    ],
+    listeners: {
+        render: 'onRenderMainPanel',
+    },
+});