1 | /*! |
---|
2 | * Ext JS Library 3.4.0 |
---|
3 | * Copyright(c) 2006-2011 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 | ); |
---|