Extjs 为什么使窗口背景透明会破坏布局？

我可以用baseCls使窗口背景透明，但是布局混乱了

如何避免这种情况

.myclass .x-window {
    background-color: rgba(1, 1, 1, 1);
}

Ext.onReady(function() {
    Ext.create('Ext.window.Window', {
        title: 'Hello',
        height: 400,
        itemId: 'mywin',
        width: 600,
        baseCls: 'myclass',
        items: [{
            xtype: 'button',
            text: 'Show MessageBox',
            listeners: {
                click: function() {                
                    Ext.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
                        if (btn == 'ok'){
                            // process text value and close...
                        }
                    });
                }
            }
        }]
    }).show();
});

---

更改baseCls实际上会将x-window更改为myclass，从而导致Ext的基本主题css文件中与.x-window类关联的所有布局相关css（可能是默认的-theme-all.css，具体取决于您将基本主题设置为什么）都不会应用。这就是你的布局被破坏的原因

正如Evan所建议的，使用cls代替。在这种情况下，css可以是.myclass{background color:yourcolor；}

---

编辑：哦，为了增加这一点，如果您希望整个窗口透明，您可能需要将.myclass.x-window-body和.myclass.x-window-header设置为具有透明背景。不确定您要做什么。

不要修改BASECL。使用

cls

或

componentCls

。它无论如何都不会工作，因为

myclass

将被添加到元素中，因此选择器永远不会匹配。它需要是

myclass.x-window

。