load mask for body

  1. #1

    load mask for body

    
    var myMask = new Ext.LoadMask(Ext.getBody(), {msg: message});
    myMask.show();

    is this suppose to mask the whole page? because the mask (overlay which prevents user from interacting with page) is not showing, but the message is showing, please help, thanks
  2. #2

    RE: load mask for body

    just noticed something, your server time is advanced by an hour :-)
  3. #3

    RE: load mask for body

    Hi,

    This code using by AjaxEvent to mask whole page


    var theHeight = "100%";
    if (window.innerHeight) {
        theHeight = window.innerHeight + "px";
    }
    ese if (document.documentElement && document.documentElement.clientHeight) {
          theHeight = document.documentElement.clientHeight + "px";
    }
    else if (document.body) {
           theHeight = document.body.clientHeight + "px";
    }


    var el = Ext.getBody().createChild({ style: "position:absolute;left:0;top:0;width:100%;height: " + theHeight + ";z-index:20000;background-color:Transparent;" });
    var scroll = Ext.getBody().getScroll();
    el.setLeftTop(scroll.left, scroll.top);

    el.mask(em.msg || "Working...", em.msgCls || "x-mask-loading");



    Please note that you need call el.unmask() and remove element el.remove() when it is required by your business logic



    Vladimir Shcheglov
    Sr. Developer
  4. #4

    RE: load mask for body

    there is nothing happening with the page after the script has been executed, no javascript error either, and i cannot interact with the page anymore after the code has been executed. i tried checking the code after the line el.mask(em.msg || "Working...", em.msgCls || "x-mask-loading"); nothing is happening. where did variable "em" came from?
  5. #5

    RE: load mask for body

    Hi,

    Just remove em (it is copy-past from coolite-core.js) , try
    el.mask("Working...",  "x-mask-loading");



    Vladimir Shcheglov
    Sr. Developer
  6. #6

    RE: load mask for body

    ok, im able to show the body mask now but unable to remove it afterwards, i'm using the following code but i am not able to get the masked element ("x-mask-loading"), it is turning out to be null and i am getting script error in IE. if i add .getEl(), or change the css selector to "x-masked" same thing... i have also tried Ext.getBody().unmask(); but no difference

    var el = Ext.getBody().child("x-mask-loading");
    el.unmask();
    el.remove();
  7. #7

    RE: load mask for body

    ok, after trial and error i finally got it to work as desired, i just added an empty css class attribute to the child element being created

    var
    el = Ext.getBody().createChild({ cls:"x-masked-main", style:
    "position:absolute;left:0;top:0;width:100%;height:" + theHeight +
    ";z-index:20000;background-color:Transparent;" });
    then use the same code


    var el = Ext.getBody().child("div.x-masked-main");
    el.unmask();
    el.remove();
    then that did it, using the default css class name for the created child ("x-masked") did something different which was delete the body part of the window behind the mask
  8. #8

    RE: load mask for body

    Hi,

    Try to add dot to child selector name


    var el = Ext.getBody().child(".x-mask-loading"); 
    Vladimir Shcheglov
    Sr. Developer

Similar Threads

  1. Load mask from code behind
    By maephisto in forum 1.x Help
    Replies: 11
    Last Post: Apr 13, 2011, 2:33 PM
  2. [CLOSED] [1.0] How to Mask all of window - not just body
    By bsnezw in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 30, 2010, 5:54 PM
  3. Load Mask via JS?
    By Tbaseflug in forum 1.x Help
    Replies: 6
    Last Post: Feb 16, 2010, 12:34 PM
  4. window mask scrolls body to top
    By [WP]joju in forum 1.x Help
    Replies: 0
    Last Post: Nov 18, 2009, 2:00 AM
  5. Disable Load Mask On Event
    By Tbaseflug in forum 1.x Help
    Replies: 3
    Last Post: Jan 09, 2009, 3:06 PM

Posting Permissions