Question

我能够使用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();
});

Answer 1

更改baseCls实际上将x-window更改为myclass，导致所有与布局相关的css与Ext的基本主题css文件绑定到.x-window类（可能是default-theme-all.css，具体取决于你设置的内容）基本主题是）不被应用。这就是你的布局破裂的原因。

正如埃文建议的那样，改用cls。你的CSS可以简单地是.myclass {background-color：yourcolor;在那种情况下。

编辑：哦，除此之外，如果你想让整个窗口透明，你可能需要设置.myclass .x-window-body和.myclass .x-window-header来拥有透明背景。不知道你的目的是什么。

为什么制作窗口背景透明搞乱布局？

1 个答案: