How to display a UniPanel in a UniComboBox

[WSIINNDA]

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