如何在 sencha touch 中为 Overlay Panel 赋予透明背景

Posted 2023-02-26

【中文标题】如何在 sencha touch 中为 Overlay Panel 赋予透明背景

【英文标题】：How to Give a Overlay Panel in sencha touch a transparent background

【发布时间】：2013-03-16 23:47:25

【问题描述】：

下面的代码只改变面板周围边框的颜色，而不是面板本身。

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】：

当面板居中时，您需要更改面板的x-panel-inner cls。所以你想要做的是给你的面板一个cls 例如：cls: my-panel。

var overlay = Ext.Viewport.add(
    xtype: 'panel',
    centered: true,
    style:'background-color: transparent;',
    cls: 'my-panel',
    ....
);             

现在在您的自定义样式表中：

.my-panel .x-panel-inner 
    background-color: transparent !important;

所以现在你的居中面板的背景应该是透明的。

【讨论】：

它使背景变内背景变黑

确保您的 style 配置也设置为：background-color:transparent;。