src/core/Element.fx-more.js

   1 /*!
   2  * Ext JS Library 3.3.1
   3  * Copyright(c) 2006-2010 Sencha Inc.
   4  * licensing@sencha.com
   5  * http://www.sencha.com/license
   6  */
   7 /**
   8  * @class Ext.Element
   9  */
  10 Ext.Element.addMethods(
  11     function() {
  12         var VISIBILITY      = "visibility",
  13             DISPLAY         = "display",
  14             HIDDEN          = "hidden",
  15             NONE            = "none",
  16             XMASKED         = "x-masked",
  17             XMASKEDRELATIVE = "x-masked-relative",
  18             data            = Ext.Element.data;
  19
  20         return {
  21             /**
  22              * Checks whether the element is currently visible using both visibility and display properties.
  23              * @param {Boolean} deep (optional) True to walk the dom and see if parent elements are hidden (defaults to false)
  24              * @return {Boolean} True if the element is currently visible, else false
  25              */
  26             isVisible : function(deep) {
  27                 var vis = !this.isStyle(VISIBILITY, HIDDEN) && !this.isStyle(DISPLAY, NONE),
  28                     p   = this.dom.parentNode;
  29
  30                 if (deep !== true || !vis) {
  31                     return vis;
  32                 }
  33
  34                 while (p && !(/^body/i.test(p.tagName))) {
  35                     if (!Ext.fly(p, '_isVisible').isVisible()) {
  36                         return false;
  37                     }
  38                     p = p.parentNode;
  39                 }
  40                 return true;
  41             },
  42
  43             /**
  44              * Returns true if display is not "none"
  45              * @return {Boolean}
  46              */
  47             isDisplayed : function() {
  48                 return !this.isStyle(DISPLAY, NONE);
  49             },
  50
  51             /**
  52              * Convenience method for setVisibilityMode(Element.DISPLAY)
  53              * @param {String} display (optional) What to set display to when visible
  54              * @return {Ext.Element} this
  55              */
  56             enableDisplayMode : function(display) {
  57                 this.setVisibilityMode(Ext.Element.DISPLAY);
  58
  59                 if (!Ext.isEmpty(display)) {
  60                     data(this.dom, 'originalDisplay', display);
  61                 }
  62
  63                 return this;
  64             },
  65
  66             /**
  67              * Puts a mask over this element to disable user interaction. Requires core.css.
  68              * This method can only be applied to elements which accept child nodes.
  69              * @param {String} msg (optional) A message to display in the mask
  70              * @param {String} msgCls (optional) A css class to apply to the msg element
  71              * @return {Element} The mask element
  72              */
  73             mask : function(msg, msgCls) {
  74                 var me  = this,
  75                     dom = me.dom,
  76                     dh  = Ext.DomHelper,
  77                     EXTELMASKMSG = "ext-el-mask-msg",
  78                     el,
  79                     mask;
  80
  81                 if (!(/^body/i.test(dom.tagName) && me.getStyle('position') == 'static')) {
  82                     me.addClass(XMASKEDRELATIVE);
  83                 }
  84                 if (el = data(dom, 'maskMsg')) {
  85                     el.remove();
  86                 }
  87                 if (el = data(dom, 'mask')) {
  88                     el.remove();
  89                 }
  90
  91                 mask = dh.append(dom, {cls : "ext-el-mask"}, true);
  92                 data(dom, 'mask', mask);
  93
  94                 me.addClass(XMASKED);
  95                 mask.setDisplayed(true);
  96
  97                 if (typeof msg == 'string') {
  98                     var mm = dh.append(dom, {cls : EXTELMASKMSG, cn:{tag:'div'}}, true);
  99                     data(dom, 'maskMsg', mm);
 100                     mm.dom.className = msgCls ? EXTELMASKMSG + " " + msgCls : EXTELMASKMSG;
 101                     mm.dom.firstChild.innerHTML = msg;
 102                     mm.setDisplayed(true);
 103                     mm.center(me);
 104                 }
 105
 106                 // ie will not expand full height automatically
 107                 if (Ext.isIE && !(Ext.isIE7 && Ext.isStrict) && me.getStyle('height') == 'auto') {
 108                     mask.setSize(undefined, me.getHeight());
 109                 }
 110
 111                 return mask;
 112             },
 113
 114             /**
 115              * Removes a previously applied mask.
 116              */
 117             unmask : function() {
 118                 var me      = this,
 119                     dom     = me.dom,
 120                     mask    = data(dom, 'mask'),
 121                     maskMsg = data(dom, 'maskMsg');
 122
 123                 if (mask) {
 124                     if (maskMsg) {
 125                         maskMsg.remove();
 126                         data(dom, 'maskMsg', undefined);
 127                     }
 128
 129                     mask.remove();
 130                     data(dom, 'mask', undefined);
 131                     me.removeClass([XMASKED, XMASKEDRELATIVE]);
 132                 }
 133             },
 134
 135             /**
 136              * Returns true if this element is masked
 137              * @return {Boolean}
 138              */
 139             isMasked : function() {
 140                 var m = data(this.dom, 'mask');
 141                 return m && m.isVisible();
 142             },
 143
 144             /**
 145              * Creates an iframe shim for this element to keep selects and other windowed objects from
 146              * showing through.
 147              * @return {Ext.Element} The new shim element
 148              */
 149             createShim : function() {
 150                 var el = document.createElement('iframe'),
 151                     shim;
 152
 153                 el.frameBorder = '0';
 154                 el.className = 'ext-shim';
 155                 el.src = Ext.SSL_SECURE_URL;
 156                 shim = Ext.get(this.dom.parentNode.insertBefore(el, this.dom));
 157                 shim.autoBoxAdjust = false;
 158                 return shim;
 159             }
 160         };
 161     }()
 162 );