PDA

View Full Version : Why does making window background transparent mess up the layout?



xjscrafter
16 Jan 2014, 3:40 PM
I was able to make the window background transparent with baseCls, but then the layout is messed up.

How to avoid that?


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

slemmon
18 Jan 2014, 1:24 PM
Using the baseCls config replaces the x-window class with whatever you're setting there. The rest of the window layout is dependent on that x-window class for its styling, so it's best not to change the baseCls unless you're prepared to completely own the styling of the underlying dom nodes making up the window component.

Generally what you'll want to tinker with is the cls or bodyCls configs not the baseCls config.