如何在sencha中给叠加面板触摸透明背景

时间:2013-03-16 23:47:25

标签: sencha-touch sencha-touch-2 sencha-touch-2.1

以下代码仅更改面板周围边框的颜色,而不更改面板本身的颜色。

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 个答案:

答案 0 :(得分:5)

居中时,您需要更改面板的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;
}

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