1. #1
    Ext User
    Join Date
    Sep 2007
    Posts
    5
    Vote Rating
    0
    prdstrctn is on a distinguished road

      0  

    Default [Solved]Ext.Window mask question

    [Solved]Ext.Window mask question


    Hi,

    I've recently been upgrading my Ext 1.1 stuff to 2.0, and came across an issue with the mask for the Window object.

    Previously in my CSS I left the .ext-el-mask class as-is, but modified the .x-dlg-mask class so that my modal windows would have a much darker background.

    Now, since the concept of Dialogs has been replaced by Window, it doesn't seem as though there is a Window-specific mask class, only the global element mask. The .x-dlg-mask class was still in the 2.0 CSS, but doesn't appear to be used.

    Is there a simple way to make the mask for a modal window darker than other masked elements?

    I was reading a solution posted at http://extjs.com/forum/showthread.php?t=22411, and it seems as though this would work, but I'm wondering...

    a) is there no simpler way to achieve this?
    b) do I have to extend Window onRender function for every modal Window in every page?

    Thanks so much in advance for any help you can provide.

    Jake

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      1  

    Default


    The class used for the mask is the same as used for all masks: ext-el-mask

    If you only want to modify the mask for windows you will need to do something like:

    Code:
    var login = new Ext.Window({
        title: 'Login',
        width: 300,
        height: 300,
        modal: true
    });
    login.render(document.body);
    login.mask.addClass('login-mask');
    login.show();
    with:

    Code:
    <style type="text/css">
    	.login-mask {opacity: 1; -moz-opacity: 1; filter: none; background: red;}
    </style>

  3. #3
    Ext User
    Join Date
    Sep 2007
    Posts
    5
    Vote Rating
    0
    prdstrctn is on a distinguished road

      0  

    Default


    Worked great, thanks!

Thread Participants: 1