Comment donner à un panneau superposé dans Sencha Touch un fond transparent

Question

Le code ci-dessous ne change que la couleur de la bordure autour du panneau mais pas du panneau lui-même.

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

Vous devez changer la classe x-panel-inner pour votre panneau lorsqu'il est centré. Ce que vous voulez faire, c'est donner à votre panneau une cls par exemple : cls: my-panel.

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

Maintenant dans votre feuille de style personnalisée :

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

Donc maintenant votre panneau centré devrait avoir un fond transparent.