ru.coon 2.8.65 → 3.0.2

package/src/report/selectionModels/MixedRowSelectionModel.js

@@ -1,3 +1,11 @@
+/**
+ * selection model для ReportGrid работающая в двух режимах:
+ *
+ * Режим выбора одной строки - можно выбрать с помощью клика по строке (чекбоксы не выбраны).
+ * Режим множественного выбора - активируется если хотя бы один чекбокс установлен/выбран. В этом режиме в таблице остается визуальный фокус
+ * при клике мышью на любой строке, но не происходит выбора строки.
+ * Пометка выбранных записей происходит только с помощью чекбоксов.
+ */
 Ext.define('Ext.selection.MixedRowSelectionModel', {
     extend: 'Ext.selection.RowModel',
     alias: 'selection.mixedRowModel',
@@ -42,7 +50,7 @@ Ext.define('Ext.selection.MixedRowSelectionModel', {
         const shift = e.shiftKey;
         switch (me.selectionMode) {
         case 'MULTI':
-            this.customSelectWithEventMulti(record, e, isSelected); // Кастомное выделение
+            this.customSelectWithEventMulti(record, isSelected); // Кастомное выделение
             break;
 
         case 'SIMPLE':
@@ -64,13 +72,10 @@ Ext.define('Ext.selection.MixedRowSelectionModel', {
             }
         }
     },
-    customSelectWithEventMulti: function(record, e, isSelected) {
-        const me = this;
-        const shift = false;
-        const ctrl = false;
-        const start = shift ? (me.getSelectionStart()) : null;
-        const selected = me.getSelection();
+    customSelectWithEventMulti: function(record, isSelected) {
+        const selected = this.getSelection();
         const len = selected.length;
+
         let toDeselect;
         let i;
         let item;
@@ -89,16 +94,8 @@ Ext.define('Ext.selection.MixedRowSelectionModel', {
                 isSelected = view.getRow(recordIndex).hasAttribute('aria-selected');
             }
         }
-        if (shift && start) {
-            me.selectRange(start, record, ctrl);
-        } else if (ctrl && isSelected) {
-            if (me.allowDeselect) {
-                me.doDeselect(record, false);
-            }
-        } else if (ctrl) {
-            me.doSelect(record, true, false);
-        } else if (isSelected && !shift && !ctrl && len > 1) {
-            if (me.allowDeselect) {
+        if (isSelected && len > 1) {
+            if (this.allowDeselect) {
                 toDeselect = [];
 
                 for (i = 0; i < len; ++i) {
@@ -108,15 +105,15 @@ Ext.define('Ext.selection.MixedRowSelectionModel', {
                         toDeselect.push(item);
                     }
                 }
-                me.doDeselect(toDeselect);
+                this.doDeselect(toDeselect);
             }
         } else if (!isSelected) {
             if (record.get('checked')) {
-                me.doSelect(record, true);
+                this.doSelect(record, true);
             } else {
                 for (const view of views) {
                     const recordIndex = view.indexOf(record);
-                    if (recordIndex!== -1) {
+                    if (recordIndex !== -1) {
                         view.addItemCls(recordIndex, view.selectedItemCls);
                         const rowNode = view.getRow(recordIndex);
                         if (rowNode) {
@@ -126,37 +123,40 @@ Ext.define('Ext.selection.MixedRowSelectionModel', {
                 }
             }
         }
-        this.fireEvent('mixedrowselectionchange');
     },
     refreshView() {
         const views = this.views || [this.view];
         for (const view of views) {
-            view.refresh();
+            if (view.bufferedRenderer) {
+                view.bufferedRenderer.refreshView();
+            } else {
+                view.refresh();
+            }
         }
     },
     clearCheckedRecords() {
         for (const record of this.checkedRecords) {
-            record.set('checked', false);
+            record.set('checked', false, {dirty: false});
         }
         this.updateCheckedRecords();
     },
     beforeViewRender: function(view) {
-        const me = this;
         const northPanel = view.up('ReportPanel').down('NorthPanel');
-        northPanel.searchButton.on('click', () => {
-            this.clearCheckedRecords();
-        }, this);
-        northPanel.clearButton.on('click', () => {
-            this.clearCheckedRecords();
+        northPanel.searchButton.on('click', this.clearCheckedRecords, this);
+        northPanel.clearButton.on('click', this.clearCheckedRecords, this);
+        view.grid.on('datachanged', this.updateCheckedRecords, this);
+        view.grid.on('cellcontextmenu', function(view, td, cellIndex, record) {
+            this.customSelectWithEventMulti(record);
         }, this);
-        view.grid.on('datachanged', () => {
-            this.updateCheckedRecords();
-        }, this);
-        me.callParent(arguments);
-        me.addCheckbox(view);
+        this.callParent(arguments);
+        this.addCheckbox(view);
     },
     addCheckbox: function(view) {
         const me = this;
+        if (view.getStore().isBufferedStore) {
+            me.showHeaderCheckbox = false;
+        }
+        Ext.suspendLayouts();
         view.headerCt.add(0, {
             xtype: 'checkcolumn',
             dataIndex: 'checked',
@@ -189,17 +189,7 @@ Ext.define('Ext.selection.MixedRowSelectionModel', {
             cls: Ext.baseCSSPrefix + 'selmodel-column',
             listeners: {
                 checkchange: (col, rowIndex, checked, record) => {
-                    if (checked) {
-                        me.customSelectWithEventMulti(record, {
-                            shiftKey: false,
-                            ctrlKey: false,
-                        }, false);
-                    } else {
-                        me.customSelectWithEventMulti(record, {
-                            shiftKey: false,
-                            ctrlKey: false,
-                        }, true);
-                    }
+                    me.customSelectWithEventMulti(record, !checked);
                 },
                 headercheckchange: (col, checked) => {
                     if (checked) {
@@ -212,5 +202,6 @@ Ext.define('Ext.selection.MixedRowSelectionModel', {
                 },
             },
         });
+        Ext.resumeLayouts();
     },
 });

package/src/report/toolbar/dropdown/ToolbarOverflowButton.js

@@ -39,7 +39,8 @@ Ext.define('Coon.report.toolbar.dropdown.ToolbarOverflowButton', {
     },
 
     onHidePanel: function() {
-        this.setHidden(false);
+        Coon.util.VisualLinker.unlink(this, this.dropDownMenu);
+        // this.setHidden(false);
         if (this.dropDownMenu.shadowElem) {
             document.body.removeChild(this.dropDownMenu.shadowElem);
         }
@@ -81,13 +82,23 @@ Ext.define('Coon.report.toolbar.dropdown.ToolbarOverflowButton', {
         div.style.zIndex = style.zIndex + 1;
         div.style.top = (xy[1] - 36) + 'px';
         div.style.left = (xy[0] + Number(style.width.replace('px', '')) - 40) + 'px';
-        this.dropDownMenu.shadowElem = document.body.appendChild(div);
-        this.setHidden(true);
+        // this.dropDownMenu.shadowElem = document.body.appendChild(div);
+        // this.setHidden(true);
+
+        Coon.util.VisualLinker.createLinkedPair(
+            this,
+            this.dropDownMenu,
+            {
+                alignment: 'br',
+                bgColor: 'white',
+            }
+        );
+        Coon.util.VisualLinker.link(this, this.dropDownMenu);
     },
     listeners: {
         render: function() {
-            if (this.reportToolbar.up('WindowWrap')) {
-                this.reportToolbar.up('WindowWrap').on({
+            if (this.reportToolbar) {
+                this.reportToolbar.on({
                     beforeclose: () => this.dropDownMenu.hide(),
                     beforecollapse: () => this.dropDownMenu.hide(),
                     beforehide: () => this.dropDownMenu.hide(),

package/src/report/toolbar/dropdown/ToolbarOverflowPanel.scss

@@ -1,19 +1,19 @@
 .ToolbarOverflowPanel {
 
-  border: 1px solid #9DB2BF;
-  border-top: none;
+  border: 1px solid #3d6780;
+  // border-top: none;
   .x-btn-button > .fix-btn-width  {
     width: 30px;
   }
-  .white-space{
-    background-color: transparent;
-    border-top: 1px solid #9DB2BF;
-    width: 100%;
-    height: 1px;
-    position: absolute;
-    top: 0;
-    right: 32px;
-  }
+  // .white-space{
+  //   background-color: transparent;
+  //   border-top: 1px solid #3d6780;
+  //   width: 100%;
+  //   height: 1px;
+  //   position: absolute;
+  //   top: 0;
+  //   right: 32px;
+  // }
 
   .panel-body-buttons > .x-panel-bodyWrap > .x-panel-body{
     border-bottom: 1px solid #9DB2BF !important;
@@ -26,12 +26,24 @@
   }
 
 
+}
+.shadow-elem-main{
+  background-color: #ffffff;
+  position: absolute;
+  cursor: pointer;
+  width: 40px;
+  height: 37px;
 }
 .shadow-elem{
+  /*mask-repeat: no-repeat;
+  mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzggMzUiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzM0NjNfNzU3NikiPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTQgMEMxMC42ODYzIDAgOCAyLjY4NjI5IDggNlYyNkM4IDI3LjA1MDYgNy43OTMwNyAyOC4wOTA5IDcuMzkxMDQgMjkuMDYxNUM2Ljk4OSAzMC4wMzIxIDYuMzk5NzIgMzAuOTE0IDUuNjU2ODUgMzEuNjU2OUM0LjkxMzk5IDMyLjM5OTcgNC4wMzIwNyAzMi45ODkgMy4wNjE0NyAzMy4zOTFDMi4wOTA4NiAzMy43OTMxIDEuMDUwNTggMzQgMCAzNFYzNUg4SDlIMzhWNkMzOCAyLjY4NjI5IDM1LjMxMzcgMCAzMiAwSDE0WiIgZmlsbD0id2hpdGUiLz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTI5LjUzMDMgMTguNTMwM0MyOS4yMzc0IDE4LjgyMzIgMjguNzYyNiAxOC44MjMyIDI4LjQ2OTcgMTguNTMwM0wyMyAxMy4wNjA3TDE3LjUzMDMgMTguNTMwM0MxNy4yMzc0IDE4LjgyMzIgMTYuNzYyNiAxOC44MjMyIDE2LjQ2OTcgMTguNTMwM0MxNi4xNzY4IDE4LjIzNzQgMTYuMTc2OCAxNy43NjI2IDE2LjQ2OTcgMTcuNDY5N0wyMi40Njk3IDExLjQ2OTdDMjIuNzYyNiAxMS4xNzY4IDIzLjIzNzQgMTEuMTc2OCAyMy41MzAzIDExLjQ2OTdMMjkuNTMwMyAxNy40Njk3QzI5LjgyMzIgMTcuNzYyNiAyOS44MjMyIDE4LjIzNzQgMjkuNTMwMyAxOC41MzAzWiIgZmlsbD0iIzNENjc4MCIvPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOSA2QzkgMy4yMzg1OCAxMS4yMzg2IDEgMTQgMUgzMkMzNC43NjE0IDEgMzcgMy4yMzg1OCAzNyA2VjI2VjM0VjM1SDM4VjZDMzggMi42ODYyOSAzNS4zMTM3IDAgMzIgMEgxNEMxMC42ODYzIDAgOCAyLjY4NjI5IDggNlYyNkM4IDI3LjA1MDYgNy43OTMwNyAyOC4wOTA5IDcuMzkxMDQgMjkuMDYxNUM2Ljk4OSAzMC4wMzIxIDYuMzk5NzIgMzAuOTE0IDUuNjU2ODUgMzEuNjU2OUM0LjkxMzk5IDMyLjM5OTcgNC4wMzIwNyAzMi45ODkgMy4wNjE0NyAzMy4zOTFDMi4wOTA4NiAzMy43OTMxIDEuMDUwNTggMzQgMCAzNFYzNUMxLjE4MTkgMzUgMi4zNTIyMiAzNC43NjcyIDMuNDQ0MTUgMzQuMzE0OUMzLjY3NTExIDM0LjIxOTIgMy45MDE2MSAzNC4xMTQyIDQuMTIzMSAzNEM0Ljk0ODc5IDMzLjU3NDQgNS43MDUgMzMuMDIyOSA2LjM2Mzk2IDMyLjM2NEM2LjQ2ODQzIDMyLjI1OTUgNi41NzAxOSAzMi4xNTI2IDYuNjY5MTkgMzIuMDQzM0M3LjM2MjEzIDMxLjI3ODYgNy45MTkxNiAzMC4zOTk2IDguMzE0OTIgMjkuNDQ0MkM4Ljc2NzIxIDI4LjM1MjIgOSAyNy4xODE5IDkgMjZWNloiIGZpbGw9IiMzRDY3ODAiIGZpbGwtb3BhY2l0eT0iMC41Ii8+PC9nPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDBfMzQ2M183NTc2Ij48cmVjdCB3aWR0aD0iMzgiIGhlaWdodD0iMzUiIGZpbGw9IndoaXRlIi8+PC9jbGlwUGF0aD48L2RlZnM+PC9zdmc+");
+  mask-position-y: center;
+  background-color: #FFF;*/
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzggMzUiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzM0NjNfNzU3NikiPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTQgMEMxMC42ODYzIDAgOCAyLjY4NjI5IDggNlYyNkM4IDI3LjA1MDYgNy43OTMwNyAyOC4wOTA5IDcuMzkxMDQgMjkuMDYxNUM2Ljk4OSAzMC4wMzIxIDYuMzk5NzIgMzAuOTE0IDUuNjU2ODUgMzEuNjU2OUM0LjkxMzk5IDMyLjM5OTcgNC4wMzIwNyAzMi45ODkgMy4wNjE0NyAzMy4zOTFDMi4wOTA4NiAzMy43OTMxIDEuMDUwNTggMzQgMCAzNFYzNUg4SDlIMzhWNkMzOCAyLjY4NjI5IDM1LjMxMzcgMCAzMiAwSDE0WiIgZmlsbD0id2hpdGUiLz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTI5LjUzMDMgMTguNTMwM0MyOS4yMzc0IDE4LjgyMzIgMjguNzYyNiAxOC44MjMyIDI4LjQ2OTcgMTguNTMwM0wyMyAxMy4wNjA3TDE3LjUzMDMgMTguNTMwM0MxNy4yMzc0IDE4LjgyMzIgMTYuNzYyNiAxOC44MjMyIDE2LjQ2OTcgMTguNTMwM0MxNi4xNzY4IDE4LjIzNzQgMTYuMTc2OCAxNy43NjI2IDE2LjQ2OTcgMTcuNDY5N0wyMi40Njk3IDExLjQ2OTdDMjIuNzYyNiAxMS4xNzY4IDIzLjIzNzQgMTEuMTc2OCAyMy41MzAzIDExLjQ2OTdMMjkuNTMwMyAxNy40Njk3QzI5LjgyMzIgMTcuNzYyNiAyOS44MjMyIDE4LjIzNzQgMjkuNTMwMyAxOC41MzAzWiIgZmlsbD0iIzNENjc4MCIvPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOSA2QzkgMy4yMzg1OCAxMS4yMzg2IDEgMTQgMUgzMkMzNC43NjE0IDEgMzcgMy4yMzg1OCAzNyA2VjI2VjM0VjM1SDM4VjZDMzggMi42ODYyOSAzNS4zMTM3IDAgMzIgMEgxNEMxMC42ODYzIDAgOCAyLjY4NjI5IDggNlYyNkM4IDI3LjA1MDYgNy43OTMwNyAyOC4wOTA5IDcuMzkxMDQgMjkuMDYxNUM2Ljk4OSAzMC4wMzIxIDYuMzk5NzIgMzAuOTE0IDUuNjU2ODUgMzEuNjU2OUM0LjkxMzk5IDMyLjM5OTcgNC4wMzIwNyAzMi45ODkgMy4wNjE0NyAzMy4zOTFDMi4wOTA4NiAzMy43OTMxIDEuMDUwNTggMzQgMCAzNFYzNUMxLjE4MTkgMzUgMi4zNTIyMiAzNC43NjcyIDMuNDQ0MTUgMzQuMzE0OUMzLjY3NTExIDM0LjIxOTIgMy45MDE2MSAzNC4xMTQyIDQuMTIzMSAzNEM0Ljk0ODc5IDMzLjU3NDQgNS43MDUgMzMuMDIyOSA2LjM2Mzk2IDMyLjM2NEM2LjQ2ODQzIDMyLjI1OTUgNi41NzAxOSAzMi4xNTI2IDYuNjY5MTkgMzIuMDQzM0M3LjM2MjEzIDMxLjI3ODYgNy45MTkxNiAzMC4zOTk2IDguMzE0OTIgMjkuNDQ0MkM4Ljc2NzIxIDI4LjM1MjIgOSAyNy4xODE5IDkgMjZWNloiIGZpbGw9IiMzRDY3ODAiIGZpbGwtb3BhY2l0eT0iMC41Ii8+PC9nPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDBfMzQ2M183NTc2Ij48cmVjdCB3aWR0aD0iMzgiIGhlaWdodD0iMzUiIGZpbGw9IndoaXRlIi8+PC9jbGlwUGF0aD48L2RlZnM+PC9zdmc+");;
   background-repeat: no-repeat;
-  background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzggMzUiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzM0NjNfNzU3NikiPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTQgMEMxMC42ODYzIDAgOCAyLjY4NjI5IDggNlYyNkM4IDI3LjA1MDYgNy43OTMwNyAyOC4wOTA5IDcuMzkxMDQgMjkuMDYxNUM2Ljk4OSAzMC4wMzIxIDYuMzk5NzIgMzAuOTE0IDUuNjU2ODUgMzEuNjU2OUM0LjkxMzk5IDMyLjM5OTcgNC4wMzIwNyAzMi45ODkgMy4wNjE0NyAzMy4zOTFDMi4wOTA4NiAzMy43OTMxIDEuMDUwNTggMzQgMCAzNFYzNUg4SDlIMzhWNkMzOCAyLjY4NjI5IDM1LjMxMzcgMCAzMiAwSDE0WiIgZmlsbD0id2hpdGUiLz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTI5LjUzMDMgMTguNTMwM0MyOS4yMzc0IDE4LjgyMzIgMjguNzYyNiAxOC44MjMyIDI4LjQ2OTcgMTguNTMwM0wyMyAxMy4wNjA3TDE3LjUzMDMgMTguNTMwM0MxNy4yMzc0IDE4LjgyMzIgMTYuNzYyNiAxOC44MjMyIDE2LjQ2OTcgMTguNTMwM0MxNi4xNzY4IDE4LjIzNzQgMTYuMTc2OCAxNy43NjI2IDE2LjQ2OTcgMTcuNDY5N0wyMi40Njk3IDExLjQ2OTdDMjIuNzYyNiAxMS4xNzY4IDIzLjIzNzQgMTEuMTc2OCAyMy41MzAzIDExLjQ2OTdMMjkuNTMwMyAxNy40Njk3QzI5LjgyMzIgMTcuNzYyNiAyOS44MjMyIDE4LjIzNzQgMjkuNTMwMyAxOC41MzAzWiIgZmlsbD0iIzNENjc4MCIvPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOSA2QzkgMy4yMzg1OCAxMS4yMzg2IDEgMTQgMUgzMkMzNC43NjE0IDEgMzcgMy4yMzg1OCAzNyA2VjI2VjM0VjM1SDM4VjZDMzggMi42ODYyOSAzNS4zMTM3IDAgMzIgMEgxNEMxMC42ODYzIDAgOCAyLjY4NjI5IDggNlYyNkM4IDI3LjA1MDYgNy43OTMwNyAyOC4wOTA5IDcuMzkxMDQgMjkuMDYxNUM2Ljk4OSAzMC4wMzIxIDYuMzk5NzIgMzAuOTE0IDUuNjU2ODUgMzEuNjU2OUM0LjkxMzk5IDMyLjM5OTcgNC4wMzIwNyAzMi45ODkgMy4wNjE0NyAzMy4zOTFDMi4wOTA4NiAzMy43OTMxIDEuMDUwNTggMzQgMCAzNFYzNUMxLjE4MTkgMzUgMi4zNTIyMiAzNC43NjcyIDMuNDQ0MTUgMzQuMzE0OUMzLjY3NTExIDM0LjIxOTIgMy45MDE2MSAzNC4xMTQyIDQuMTIzMSAzNEM0Ljk0ODc5IDMzLjU3NDQgNS43MDUgMzMuMDIyOSA2LjM2Mzk2IDMyLjM2NEM2LjQ2ODQzIDMyLjI1OTUgNi41NzAxOSAzMi4xNTI2IDYuNjY5MTkgMzIuMDQzM0M3LjM2MjEzIDMxLjI3ODYgNy45MTkxNiAzMC4zOTk2IDguMzE0OTIgMjkuNDQ0MkM4Ljc2NzIxIDI4LjM1MjIgOSAyNy4xODE5IDkgMjZWNloiIGZpbGw9IiMzRDY3ODAiIGZpbGwtb3BhY2l0eT0iMC41Ii8+PC9nPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDBfMzQ2M183NTc2Ij48cmVjdCB3aWR0aD0iMzgiIGhlaWdodD0iMzUiIGZpbGw9IndoaXRlIi8+PC9jbGlwUGF0aD48L2RlZnM+PC9zdmc+");
+  width: 100%;
+  height: 100%;
+  mask-size: 100%;
   position: absolute;
   cursor: pointer;
-  width: 40px;
-  height: 40px;
 }

package/src/report/toolbar/layout/ReportToolbarOverflow.js

@@ -138,11 +138,14 @@ Ext.define('Coon.report.toolbar.layout.ReportToolbarOverflow', {
         me.systemContainer = Ext.create({
             xtype: 'container',
             itemId: 'systemContainer',
-            layout: 'hbox',
+            layout: {
+                type: 'hbox',
+                pack: 'end',
+            },
             minWidth: 3,
             defaults: {
                 style: {
-                    marginLeft: '10px',
+                    marginLeft: '8px',
                 },
             },
             style: {

package/src/ringBuffer.js

@@ -6,11 +6,15 @@ Ext.define('Coon.ringBuffer', {
     constructor(cfg) {
         const buffer = [];
         let cursor = 0;
-        this.getLength = () => (cfg.length || this.self.maxLength) - 1;
+        this.getLength = () => (cfg && cfg.length ? cfg.length : this.self.maxLength);
         this.getBuffer = () => buffer;
         this.getCursor = () => cursor;
+        this.reset = () => {
+            buffer.splice(0);
+            cursor = 0;
+        };
         this.advanceCursor = () => {
-            if (cursor < this.getLength()) {
+            if (cursor < this.getLength() - 1) {
                 cursor += 1;
             } else {
                 cursor = 0;
@@ -27,7 +31,7 @@ Ext.define('Coon.ringBuffer', {
     },
 
     get() {
-        return this.getBuffer().sort((a, b) => a.idx - b.idx);
+        return [...this.getBuffer()].sort((a, b) => a.idx - b.idx);
     },
 
     getElements() {

package/src/uielement/command/GetUIElementCommand.js

@@ -24,7 +24,6 @@ Ext.define('Coon.uielement.command.GetUIElementCommand', {
                     }
                     props.uiElementCd = this.uiElementCd;
                     props.accessDecision = data.accessDecision;
-                    Coon.log.debug('GetUIElementCommand.props', props);
                     data.propertyData = JSON5.stringify(props);
                 } catch (ex) {
                     Coon.log.error('GetUIElementCommand.UiCustomPanel: invalid propertyData JSON5');

package/src/uielement/component/UiCPWrapper.js

@@ -1,3 +1,4 @@
+
 /**
  * Компонент для встраивания UiPanel внутри других компонентов и панелей
  * Пример:
@@ -30,17 +31,19 @@ Ext.define('Coon.uielement.component.UiCPWrapper', {
         autoLoad: true,
         initConfig: {},
         doInitParams: {},
-        isDynamic: false,
-        bubbleEvents: [],
     },
     defaults: {
         layout: 'fit',
     },
 
     initComponent: function() {
+        const parentCustomPanel = this.findParentByType('UiCustomPanel');
+        if (parentCustomPanel) {
+            parentCustomPanel.isParentCP = true;
+        }
         this.getUiElementCd() ?
             this.getUiPanel(this.getUiElementCd(), this.renderPanel.bind(this)) :
-            !this.isDynamic && this.showError();
+            this.showError();
 
         this.callParent();
     },
@@ -56,7 +59,6 @@ Ext.define('Coon.uielement.component.UiCPWrapper', {
         }, this);
 
         command.on('failure', function() {
-            this.loadMask && this.loadMask.hide();
             this.showError();
         }, this);
 
@@ -70,18 +72,9 @@ Ext.define('Coon.uielement.component.UiCPWrapper', {
             const parentViewModel = this.findParentByType('UiCustomPanel').getViewModel();
             config.viewModel = parentViewModel;
         }
+        config.isChildCP = true;
         const panel = Ext.create('widget.UiCustomPanel', config);
         this.uiPanel = panel;
-        const relayEvents = Array.isArray(this.bubbleEvents) ? this.bubbleEvents : [];
-        const initialListeners = this.getInitialConfig()?.listeners;
-        if (typeof initialListeners === 'object') {
-            Object.keys(initialListeners).forEach((event) => {
-                if (event.startsWith('panel:')) {
-                    relayEvents.push(event);
-                }
-            });
-        }
-        relayEvents.length && this.relayEvents(panel, relayEvents);
         panel.on('afterrender', function() {
             this.autoLoad && this.panelDoInit(this.doInitParams);
             const doInitPanel = panel.getController() && panel.getController().doInit;
@@ -90,7 +83,25 @@ Ext.define('Coon.uielement.component.UiCPWrapper', {
             }
         }, this);
         this.add(panel);
-        this.loadMask && this.loadMask.hide();
+        if (Array.isArray(this.customBubbleEvents) && this.customBubbleEvents.length) {
+            this.setCustomBubbleEvents(panel);
+        }
+        this.on('activate', () => {
+            panel.fireEvent('activate');
+        });
+        this.on('deactivate', () => {
+            panel.fireEvent('deactivate');
+        });
+        panel.on('dirtychange', (component, state) => {
+            this.fireEvent('dirtychange', this, state);
+        });
+    },
+
+    setCustomBubbleEvents(srcComponent) {
+        const parent = this.up(this.parentComponent || 'UiCustomPanel');
+        if (typeof parent.__processCustomBubbleEvents === 'function') {
+            parent.__processCustomBubbleEvents.call(parent, srcComponent, this.customBubbleEvents);
+        }
     },
 
     setDoInitParams: function(doInitParams) {
@@ -112,25 +123,4 @@ Ext.define('Coon.uielement.component.UiCPWrapper', {
                               <span class="x-fa fa-exclamation-circle"/> Неверно сконфигурирован UICPWrapper
                            </div>`);
     },
-    /**
-     * Вызывается автоматически перед вызовом setUiElementCd.
-     * @param {String} uiElementCd
-     * @returns {String} uiElementCd
-     */
-    applyUiElementCd(uiElementCd) {
-        if (this.isDynamic && uiElementCd && this.uiElementCd !== uiElementCd) {
-            if (this.uiPanel && this.uiPanel.isComponent) {
-                this.remove(this.uiPanel);
-            }
-            if (!this.loadMask) {
-                this.loadMask = new Ext.LoadMask({
-                    target: this,
-                    msg: 'Загрузка...',
-                });
-            }
-            this.loadMask.show();
-            this.getUiPanel(uiElementCd, this.renderPanel.bind(this));
-        }
-        return uiElementCd;
-    },
 });

package/src/uielement/component/UiCustomController.js

@@ -125,4 +125,11 @@ Ext.define('Coon.uielement.component.UiCustomController', {
         );
     },
 
+    setCustomPanelTitle(title) {
+        if (!['string', 'integer'].includes(typeof title)) {
+            return;
+        }
+        this.getView().fireEvent('titlechange', this.getView(), title);
+    },
+
 });

package/src/uielement/component/UiCustomPanel.js

@@ -8,8 +8,7 @@ Ext.define('Coon.uielement.component.UiCustomPanel', {
         'Coon.uielement.plugin.CustomPanelPlugin',
         'Coon.uielement.component.UiCustomPanelTraceWindow'
     ],
-    controller: {type: 'UiCustomController'},
-    // viewModel: {type: 'UiCustomPanelViewModel'},
+    controller: 'UiCustomController',
 
     keyMap: {
         'Ctrl+Shift+Alt+F8': {
@@ -84,4 +83,49 @@ Ext.define('Coon.uielement.component.UiCustomPanel', {
         return data;
     },
 
+    /*
+        customBubbleEvent: [
+            {
+                sourceEventName - string
+                targetEventName - string
+                targetComponent // 'reference' || '[itemId=item1]' || view - string || object
+                targetHandlerName - string
+            }
+        ]
+     */
+    __processCustomBubbleEvents(srcComponent, bubbleEvents) {
+        if (!srcComponent) {
+            return;
+        }
+        if (Array.isArray(bubbleEvents) && bubbleEvents.length) {
+            bubbleEvents.forEach((el) => {
+                if (!Ext.isObject(el)) {
+                    return;
+                }
+                let {sourceEventName, targetEventName, targetComponent = this, targetHandlerName} = el;
+                if (typeof sourceEventName !== 'string' || !sourceEventName) {
+                    return;
+                }
+                srcComponent.on(sourceEventName, function(...args) {
+                    if (typeof targetComponent === 'string') {
+                        if (targetComponent[0] === '[') {
+                            targetComponent = this.down(targetComponent);
+                        } else {
+                            targetComponent = this.down(`[reference=${targetComponent}]`);
+                        }
+                    }
+                    const eventName = targetEventName || sourceEventName;
+                    targetComponent.fireEvent(eventName, ...args);
+                    const controller = targetComponent.getController();
+                    if (targetHandlerName) {
+                        if (typeof controller[targetHandlerName] === 'function') {
+                            controller[targetHandlerName].call(controller, ...args);
+                        } else if (typeof targetComponent[targetHandlerName] === 'function') {
+                            targetComponent[targetHandlerName].call(targetComponent, ...args);
+                        }
+                    }
+                }, this);
+            });
+        }
+    },
 });