Ext JS désactivé Masque de panneau Opacité

Question

Comment contrôler l'opacité d'un panneau désactivé avec un masque. Je voudrais désactiver le panneau (ce qui signifie qu'il sera touchable) et laisser son opacité telle quelle. Thx

Answer 1

Vous pouvez créer votre propre feuille de style CSS qui remplace la feuille de style par défaut d'ExtJS pour les éléments désactivés. Dans ext-all.css, il existe plusieurs configurations de style pour la classe .x-item-disabled que vous pouvez consulter. Par exemple, ils précisent l'opacité pour les icônes de la barre d'outils comme ceci:

.x-toolbar .x-item-disabled .x-btn-icon { 
    opacity: .35; 
    -moz-opacity: .35; 
    filter: alpha(opacity=35); 
} 

vous aurez donc besoin de regarder en quelle classe votre panneau appartient et construire une feuille de style qui comprend les spécifications pour vos sélecteurs particuliers.

CSS Syntax (Wikipedia)

Answer 2

Je recommande à tous ceux qui atterrit sur ce poste, pour créer une classe pour le panneau état désactivé dans votre propre fichier css, puis configurer la classe d'état désactivé du panneau comme suit, donc vous n'affecter la panneau souhaité et non l'ensemble de l'application:

dans votre CSS

.my-disabled-panel { 
    opacity: .35; 
    -moz-opacity: .35; 
    filter: alpha(opacity=35); 
} 

et dans la configuration du panneau ...

Ext.create('Ext.panel.Panel', {  
    [...], 
    disabledCls: 'my-disabled-panel', 
    [...] 
}