ExtJS 自定義 showExtWin 彈窗關閉按鈕實現：分析自定義函數與標準 Window 配置

代碼調用 top.showExtWin(url, 600, 350, "新增")，彈出窗口右上角關閉按鈕不明顯，需添加明顯關閉按鈕。window.close() 無效。

核心問題：showExtWin 是自定義封裝，非 ExtJS 原生 API

• ExtJS 原生窗口用 Ext.create('Ext.window.Window', {...}).show()。
• showExtWin 專案組內部封裝，源碼中可能未配置 closable: true、tools: [{type:'close'}] 或模態遮罩層遮擋。

解決路徑

1. 查找 showExtWin 定義 (通常在公共 JS 文件如 common.js, utils.js)：
   搜索 function showExtWin 或 var showExtWin =。
2. 修改源碼添加關閉工具：

function showExtWin(url, width, height, title) {
    var win = Ext.create('Ext.window.Window', {
        title: title,
        width: width,
        height: height,
        layout: 'fit',
        modal: true,
        closable: true, // 關鍵：顯示右上角關閉按鈕
        items: [{
            xtype: 'component',
            autoEl: { tag: 'iframe', src: url, style: 'width:100%;height:100%;border:none' }
        }],
        // 可選：底部工具欄添加關閉按鈕
        buttons: [{
            text: '關閉',
            handler: function() { win.close(); }
        }]
    });
    win.show();
    return win;
}

若無法修改公共函數：調用方傳參擴展

若 showExtWin 支持傳遞配置對象：

top.showExtWin({
    url: _url,
    width: 600,
    height: 350,
    title: '新增',
    closable: true,
    buttons: [{text:'關閉', handler:function(btn){btn.up('window').close();}}]
});

關鍵配置項

• closable: true：顯示右上角原生關閉工具 (×)。
• buttons: [...]：底部工具欄按鈕，handler 中 win.close() 或 btn.up('window').close() 關閉窗口。
• modal: true：模態遮罩，防止背景操作。

不直接用 window.close()，因 iframe 內 window 指向 iframe 自身，關閉不了父窗口的 Ext Window 組件。必須獲取 Ext Window 實例調用 .close()。