How to Give a Overlay Panel in sencha touch a transparent background

Question

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'
    }]
});             

Answer 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.