Search the Community

I find this method very practical, so I wrote the following code and wanted to share it with you. If you have any suggestions for improvement, please let me know. function afterrender(sender, eOpts) { var combo = sender; Ext.onReady(function() { var findPanel = function() { var panel = null; if (window.uniGUI && window.uniGUI.Forms && window.uniGUI.Forms.MainForm) { panel = window.uniGUI.Forms.MainForm.UniPanel1; } if (!panel && window.MainForm) { panel = window.MainForm.UniPanel1; } if (!panel) { panel = Ext.ComponentManager.get('UniPanel1'); } return panel; }; var panel = findPanel(); if (panel) { console.log('Panel found:', panel); panel.getEl().setStyle({ 'position': 'absolute', 'z-index': '10000', 'display': 'none', 'overflow': 'auto' }); var isManualCollapse = false; combo.on('expand', function() { isManualCollapse = false; var picker = combo.getPicker(); if (picker) { picker.el.hide(); } panel.show(); var comboEl = combo.getEl(); var comboXY = comboEl.getXY(); var comboBox = comboEl.getBox(); var rect = { x: comboXY[0], y: comboXY[1], width: comboBox.width, height: comboBox.height }; var viewport = Ext.getBody().getViewSize(); var panelWidth = rect.width; var panelOriginalWidth = panel.getWidth(); if (panelOriginalWidth && panelOriginalWidth > rect.width) { panelWidth = panelOriginalWidth; } if (rect.x + panelWidth > viewport.width - 10) { panelWidth = Math.max(rect.width, viewport.width - rect.x - 20); } var panelHeight = panel.getHeight() || 250; var maxHeight = viewport.height - rect.y - rect.height - 20; if (panelHeight > maxHeight) { panelHeight = maxHeight; } var panelY = rect.y + rect.height; if (panelY + panelHeight > viewport.height - 10) { panelY = Math.max(10, rect.y - panelHeight); } var panelX = rect.x; if (panelX + panelWidth > viewport.width - 10) { panelX = viewport.width - panelWidth - 10; } console.log('Positioning:', { combo: {x: rect.x, y: rect.y, width: rect.width, height: rect.height}, panel: {x: panelX, y: panelY, width: panelWidth, height: panelHeight}, viewport: viewport }); panel.getEl().animate({ to: { x: panelX, y: panelY, width: panelWidth, height: panelHeight }, duration: 100 }); }); combo.on('collapse', function() { if (!isManualCollapse) { if (combo.isExpanded) { combo.expand(); return false; } } else { panel.hide(); } }); panel.on('click', function(e) { e.stopPropagation(); }); panel.on('element', 'click', function(e) { e.stopPropagation(); }); window.closeCustomComboPanel = function() { isManualCollapse = true; combo.collapse(); panel.hide(); }; Ext.getBody().on('click', function(e) { var target = e.target; var comboEl = combo.getEl().dom; var panelEl = panel.getEl().dom; if (!comboEl.contains(target) && !panelEl.contains(target)) { isManualCollapse = true; combo.collapse(); panel.hide(); } }); } else { console.warn('Panel not found, retrying...'); setTimeout(findPanel, 500); } }); }

Currently I'm using Unigui 1.90.0.1559. I've been trying to find a solution to drag and drop TUniPanels in order to make a Dinamic layout for placing DashBoards. Normally all you had to do is to code around the mouse events to capture mouse position and then alter the Left and Top property of the object you're draggin. The problem is that neither my form nor my Objects have the "OnMouseMove" event, without this event I cannot implement the code to capture mouse position in real time while draggin the object. If anyone know a solution to this problem I would apreciate it.

Hello, using licensed UniGUI 1.95.0 build 1583 here, I would like to completely hide the title header panel of a collapsible TUniPanel used with LayoutConfig.Split = true, arranged in a border panel on "west" region. Infact, I would like to manipulate the collapsing of the panel with another button, instead of the default one provided by the title panel. I see property TitleVisible has not effect on that. Offcourse, when the panel is collapsed, the title bar to un-collapse it, should be visible as usual. How to? Thx Luca

У панели TuniPanel есть свойство для кнопок типа UniButtonItems. Это же свойство есть и у uniDBGrid. Не могу найти CSS-классы, которые бы помогли увеличить интервал между кнопками. Слишком близко расположены кнопки. Спасибо.

Не могу понять, это у меня только так? Справа в заголовке TUniPanel какой-то мусор рядом с кнопкой. uniGUI 1545.

Hi, in Ext there is a property "floatable" for panels on a border-layout, which is a very good feature. Clicking a collapsed panel doesn't change the layout of the page, it only floats above it. Very nice for sidebars that are only needed occasionally. Can you implement this some time in uniGUI? Regards Steve

how to collapse with click in header?

Hi group, If I drop a TUniContainerPanel in a form and set the Color property to any value, if I drop a TUniPanel in the container and set the ParentColor property to true, at the design stage the panel has the same color as the container, but in the process of execution the panel has clBtnface color. UniGUI version is 1.70.0.1493.

I have knowledge to share to you all, to make unipanel more beauty you can set panel to round by this in ExtEvents function afterrender(sender, eOpts) { sender.setBodyStyle('border-radius','12px'); }

Hi, maybe this is a bug: I have some controls (TUniLabel, TUniButton) on a TUniPanel. When I call UniPanel1.ComponentCount the result always is 0. On a Form the result is correct. Can someone please check this? Thanks...

Hi, Is it possible to make rounded corners in TuniPanel? Thank you.

I'm using " Accordion Layout" similar to Demo ( LayoutManagementAccordionLayout ) . I would like to switch panels via Code... as with TUniPageControl with " ActivePage ". How to make? UniPanelA.ActivePanel ???