问题
The code below only changes the color of the border around the panel but not the panel itself.
var overlay = Ext.Viewport.add({
xtype: 'panel',
centered: true,
style:'background-color: transparent;',
modal: {
style: 'opacity: 0'
},
hideOnMaskTap:true,
width:'20%',
height: '50%',
styleHtmlContent:true,
items:[{
xtype:'button',
test:'hey',
cls:'notrans',
style: 'opacity: 1'
}]
});
回答1:
You need to change the x-panel-inner
cls for your panel when it is centered. So what you want to do is give your panel a cls
e.g: cls: my-panel
.
var overlay = Ext.Viewport.add({
xtype: 'panel',
centered: true,
style:'background-color: transparent;',
cls: 'my-panel',
....
});
Now in your custom stylesheet:
.my-panel .x-panel-inner {
background-color: transparent !important;
}
So now your centered panel should have its background transparent.
来源:https://stackoverflow.com/questions/15456061/how-to-give-a-overlay-panel-in-sencha-touch-a-transparent-background