/**
+ * @class Ext.Element
*/
(function(){
- Ext.core.Element.boxMarkup = '<div class="{0}-tl"><div class="{0}-tr"><div class="{0}-tc"></div></div></div><div class="{0}-ml"><div class="{0}-mr"><div class="{0}-mc"></div></div></div><div class="{0}-bl"><div class="{0}-br"><div class="{0}-bc"></div></div></div>';
// local style camelizing for speed
- var supports = Ext.supports,
+ var ELEMENT = Ext.Element,
+ supports = Ext.supports,
view = document.defaultView,
opacityRe = /alpha\(opacity=(.*)\)/i,
trimRe = /^\s+|\s+$/g,
@@ -48,18 +48,28 @@
borders = {l: BORDER + LEFT + WIDTH, r: BORDER + RIGHT + WIDTH, t: BORDER + TOP + WIDTH, b: BORDER + BOTTOM + WIDTH},
paddings = {l: PADDING + LEFT, r: PADDING + RIGHT, t: PADDING + TOP, b: PADDING + BOTTOM},
margins = {l: MARGIN + LEFT, r: MARGIN + RIGHT, t: MARGIN + TOP, b: MARGIN + BOTTOM},
- data = Ext.core.Element.data;
+ data = ELEMENT.data;
- Ext.override(Ext.core.Element, {
-
- /**
+ ELEMENT.boxMarkup = '<div class="{0}-tl"><div class="{0}-tr"><div class="{0}-tc"></div></div></div><div class="{0}-ml"><div class="{0}-mr"><div class="{0}-mc"></div></div></div><div class="{0}-bl"><div class="{0}-br"><div class="{0}-bc"></div></div></div>';
+
+ // These property values are read from the parentNode if they cannot be read
+ // from the child:
+ ELEMENT.inheritedProps = {
+ fontSize: 1,
+ fontStyle: 1,
+ opacity: 1
+ };
+
+ Ext.override(ELEMENT, {
+
+ /**
* TODO: Look at this
*/
// private ==> used by Fx
adjustWidth : function(width) {
var me = this,
isNum = (typeof width == 'number');
-
+
if(isNum && me.autoBoxAdjust && !me.isBorderBox()){
width -= (me.getBorderWidth("lr") + me.getPadding("lr"));
}
@@ -70,7 +80,7 @@
adjustHeight : function(height) {
var me = this,
isNum = (typeof height == "number");
-
+
if(isNum && me.autoBoxAdjust && !me.isBorderBox()){
height -= (me.getBorderWidth("tb") + me.getPadding("tb"));
}
@@ -78,21 +88,21 @@
},
- /**
+ /**
* Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.
- * @param {String/Array} className The CSS classes to add separated by space, or an array of classes
- * @return {Ext.core.Element} this
+ * @param {String/String[]} className The CSS classes to add separated by space, or an array of classes
+ * @return {Ext.Element} this
*/
addCls : function(className){
var me = this,
cls = [],
space = ((me.dom.className.replace(trimRe, '') == '') ? "" : " "),
i, len, v;
- if (!Ext.isDefined(className)) {
+ if (className === undefined) {
return me;
}
// Separate case is for speed
- if (!Ext.isArray(className)) {
+ if (Object.prototype.toString.call(className) !== '[object Array]') {
if (typeof className === 'string') {
className = className.replace(trimRe, '').split(spacesRe);
if (className.length === 1) {
@@ -118,18 +128,18 @@
return me;
},
- /**
+ /**
* Removes one or more CSS classes from the element.
- * @param {String/Array} className The CSS classes to remove separated by space, or an array of classes
- * @return {Ext.core.Element} this
+ * @param {String/String[]} className The CSS classes to remove separated by space, or an array of classes
+ * @return {Ext.Element} this
*/
removeCls : function(className){
var me = this,
i, idx, len, cls, elClasses;
- if (!Ext.isDefined(className)) {
+ if (className === undefined) {
return me;
}
- if (!Ext.isArray(className)){
+ if (Object.prototype.toString.call(className) !== '[object Array]') {
className = className.replace(trimRe, '').split(spacesRe);
}
if (me.dom && me.dom.className) {
@@ -140,7 +150,7 @@
cls = cls.replace(trimRe, '');
idx = Ext.Array.indexOf(elClasses, cls);
if (idx != -1) {
- elClasses.splice(idx, 1);
+ Ext.Array.erase(elClasses, idx, 1);
}
}
}
@@ -149,10 +159,10 @@
return me;
},
- /**
+ /**
* Adds one or more CSS classes to this element and removes the same class(es) from all siblings.
- * @param {String/Array} className The CSS class to add, or an array of classes
- * @return {Ext.core.Element} this
+ * @param {String/String[]} className The CSS class to add, or an array of classes
+ * @return {Ext.Element} this
*/
radioCls : function(className){
var cn = this.dom.parentNode.childNodes,
@@ -167,10 +177,10 @@
return this.addCls(className);
},
- /**
+ /**
* Toggles the specified CSS class on this element (removes it if it already exists, otherwise adds it).
* @param {String} className The CSS class to toggle
- * @return {Ext.core.Element} this
+ * @return {Ext.Element} this
* @method
*/
toggleCls : Ext.supports.ClassList ?
@@ -182,7 +192,7 @@
return this.hasCls(className) ? this.removeCls(className) : this.addCls(className);
},
- /**
+ /**
* Checks if the specified CSS class exists on this element's DOM node.
* @param {String} className The CSS class to check for
* @return {Boolean} True if the class exists, else false
@@ -207,11 +217,11 @@
return className && (' ' + this.dom.className + ' ').indexOf(' ' + className + ' ') != -1;
},
- /**
+ /**
* Replaces a CSS class on the element with another. If the old name does not exist, the new name will simply be added.
* @param {String} oldClassName The CSS class to replace
* @param {String} newClassName The replacement CSS class
- * @return {Ext.core.Element} this
+ * @return {Ext.Element} this
*/
replaceCls : function(oldClassName, newClassName){
return this.removeCls(oldClassName).addCls(newClassName);
@@ -221,13 +231,13 @@
return this.getStyle(style) == val;
},
- /**
+ /**
* Normalizes currentStyle and computedStyle.
* @param {String} property The style property whose value is returned.
* @return {String} The current value of the style property for this element.
* @method
*/
- getStyle : function(){
+ getStyle : function() {
return view && view.getComputedStyle ?
function(prop){
var el = this.dom,
@@ -236,52 +246,83 @@
if(el == document){
return null;
}
- prop = Ext.core.Element.normalize(prop);
+ prop = ELEMENT.normalize(prop);
out = (v = el.style[prop]) ? v :
(cs = view.getComputedStyle(el, "")) ? cs[prop] : null;
-
+
// Ignore cases when the margin is correctly reported as 0, the bug only shows
// numbers larger.
if(prop == 'marginRight' && out != '0px' && !supports.RightMargin){
- cleaner = Ext.core.Element.getRightMarginFixCleaner(el);
+ cleaner = ELEMENT.getRightMarginFixCleaner(el);
display = this.getStyle('display');
el.style.display = 'inline-block';
out = view.getComputedStyle(el, '').marginRight;
el.style.display = display;
cleaner();
}
-
+
if(prop == 'backgroundColor' && out == 'rgba(0, 0, 0, 0)' && !supports.TransparentColor){
out = 'transparent';
}
return out;
} :
- function(prop){
+ function (prop) {
var el = this.dom,
m, cs;
if (el == document) {
return null;
}
-
- if (prop == 'opacity') {
- if (el.style.filter.match) {
- m = el.style.filter.match(opacityRe);
- if(m){
- var fv = parseFloat(m[1]);
- if(!isNaN(fv)){
- return fv ? fv / 100 : 0;
+ prop = ELEMENT.normalize(prop);
+
+ do {
+ if (prop == 'opacity') {
+ if (el.style.filter.match) {
+ m = el.style.filter.match(opacityRe);
+ if(m){
+ var fv = parseFloat(m[1]);
+ if(!isNaN(fv)){
+ return fv ? fv / 100 : 0;
+ }
}
}
+ return 1;
}
- return 1;
- }
- prop = Ext.core.Element.normalize(prop);
- return el.style[prop] || ((cs = el.currentStyle) ? cs[prop] : null);
- };
+
+ // the try statement does have a cost, so we avoid it unless we are
+ // on IE6
+ if (!Ext.isIE6) {
+ return el.style[prop] || ((cs = el.currentStyle) ? cs[prop] : null);
+ }
+
+ try {
+ return el.style[prop] || ((cs = el.currentStyle) ? cs[prop] : null);
+ } catch (e) {
+ // in some cases, IE6 will throw Invalid Argument for properties
+ // like fontSize (see in /examples/tabs/tabs.html).
+ }
+
+ if (!ELEMENT.inheritedProps[prop]) {
+ break;
+ }
+
+ el = el.parentNode;
+ // this is _not_ perfect, but we can only hope that the style we
+ // need is inherited from a parentNode. If not and since IE won't
+ // give us the info we need, we are never going to be 100% right.
+ } while (el);
+
+ //<debug>
+ Ext.log({
+ level: 'warn',
+ msg: 'Failed to get ' + this.dom.id + '.currentStyle.' + prop
+ });
+ //</debug>
+ return null;
+ }
}(),
- /**
+ /**
* Return the CSS color for the specified CSS attribute. rgb, 3 digit (like #fff) and valid values
* are convert to standard 6 digit hex color.
* @param {String} attr The css attribute
@@ -309,11 +350,11 @@
return(color.length > 5 ? color.toLowerCase() : defaultValue);
},
- /**
+ /**
* Wrapper for setting style properties, also takes single object parameter of multiple styles.
* @param {String/Object} property The style property to be set, or an object of multiple styles.
* @param {String} value (optional) The value to apply to the given property, or null if an object was passed.
- * @return {Ext.core.Element} this
+ * @return {Ext.Element} this
*/
setStyle : function(prop, value){
var me = this,
@@ -322,8 +363,7 @@
if (!me.dom) {
return me;
}
-
- if (!Ext.isObject(prop)) {
+ if (typeof prop === 'string') {
tmp = {};
tmp[prop] = value;
prop = tmp;
@@ -335,19 +375,19 @@
me.setOpacity(value);
}
else {
- me.dom.style[Ext.core.Element.normalize(style)] = value;
+ me.dom.style[ELEMENT.normalize(style)] = value;
}
}
}
return me;
},
- /**
+ /**
* Set the opacity of the element
- * @param {Float} opacity The new opacity. 0 = transparent, .5 = 50% visibile, 1 = fully visible, etc
+ * @param {Number} opacity The new opacity. 0 = transparent, .5 = 50% visibile, 1 = fully visible, etc
* @param {Boolean/Object} animate (optional) a standard Element animation config object or <tt>true</tt> for
* the default animation (<tt>{duration: .35, easing: 'easeIn'}</tt>)
- * @return {Ext.core.Element} this
+ * @return {Ext.Element} this
*/
setOpacity: function(opacity, animate) {
var me = this,
@@ -391,9 +431,9 @@
},
- /**
+ /**
* Clears any opacity settings from this element. Required in some cases for IE.
- * @return {Ext.core.Element} this
+ * @return {Ext.Element} this
*/
clearOpacity : function(){
var style = this.dom.style;
@@ -406,11 +446,11 @@
}
return this;
},
-
- /**
+
+ /**
* @private
* Returns 1 if the browser returns the subpixel dimension rounded to the lowest pixel.
- * @return {Number} 0 or 1
+ * @return {Number} 0 or 1
*/
adjustDirect2DDimension: function(dimension) {
var me = this,
@@ -420,7 +460,7 @@
inlinePosition = dom.style['position'],
originIndex = dimension === 'width' ? 0 : 1,
floating;
-
+
if (display === 'inline') {
dom.style['display'] = 'inline-block';
}
@@ -430,17 +470,17 @@
// floating will contain digits that appears after the decimal point
// if height or width are set to auto we fallback to msTransformOrigin calculation
floating = (parseFloat(me.getStyle(dimension)) || parseFloat(dom.currentStyle.msTransformOrigin.split(' ')[originIndex]) * 2) % 1;
-
+
dom.style['position'] = inlinePosition;
-
+
if (display === 'inline') {
dom.style['display'] = inlineDisplay;
}
return floating;
},
-
- /**
+
+ /**
* Returns the offset height of the element
* @param {Boolean} contentHeight (optional) true to get the height minus borders and padding
* @return {Number} The element's height
@@ -487,8 +527,8 @@
}
return height;
},
-
- /**
+
+ /**
* Returns the offset width of the element
* @param {Boolean} contentWidth (optional) true to get the width minus borders and padding
* @return {Number} The element's width
@@ -506,8 +546,8 @@
overflow = style.overflow;
me.setStyle({overflow: 'hidden'});
}
-
- // Fix Opera 10.5x width calculation issues
+
+ // Fix Opera 10.5x width calculation issues
if (Ext.isOpera10_5) {
if (dom.parentNode.currentStyle.position === 'relative') {
parentPosition = dom.parentNode.style.position;
@@ -516,7 +556,7 @@
dom.parentNode.style.position = parentPosition;
}
width = Math.max(width || 0, dom.offsetWidth);
-
+
// Gecko will in some cases report an offsetWidth that is actually less than the width of the
// text contents, because it measures fonts with sub-pixel precision but rounds the calculated
// value down. Using getBoundingClientRect instead of offsetWidth allows us to get the precise
@@ -542,11 +582,11 @@
width++;
}
}
-
+
if (contentWidth) {
width -= (me.getBorderWidth("lr") + me.getPadding("lr"));
}
-
+
if (Ext.isIEQuirks) {
me.setStyle({ overflow: overflow});
}
@@ -557,14 +597,14 @@
return width;
},
- /**
+ /**
* Set the width of this Element.
- * @param {Mixed} width The new width. This may be one of:<div class="mdetail-params"><ul>
+ * @param {Number/String} width The new width. This may be one of:<div class="mdetail-params"><ul>
* <li>A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels).</li>
* <li>A String used to set the CSS width style. Animation may <b>not</b> be used.
* </ul></div>
* @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
- * @return {Ext.core.Element} this
+ * @return {Ext.Element} this
*/
setWidth : function(width, animate){
var me = this;
@@ -585,7 +625,7 @@
return me;
},
- /**
+ /**
* Set the height of this Element.
* <pre><code>
// change the height to 200px and animate with default configuration
@@ -598,12 +638,12 @@ Ext.fly('elId').setHeight(150, {
callback: function(){ this.{@link #update}("finished"); }
});
* </code></pre>
- * @param {Mixed} height The new height. This may be one of:<div class="mdetail-params"><ul>
+ * @param {Number/String} height The new height. This may be one of:<div class="mdetail-params"><ul>
* <li>A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels.)</li>
* <li>A String used to set the CSS height style. Animation may <b>not</b> be used.</li>
* </ul></div>
* @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
- * @return {Ext.core.Element} this
+ * @return {Ext.Element} this
*/
setHeight : function(height, animate){
var me = this;
@@ -624,7 +664,7 @@ Ext.fly('elId').setHeight(150, {
return me;
},
- /**
+ /**
* Gets the width of the border(s) for the specified side(s)
* @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,
* passing <tt>'lr'</tt> would get the border <b><u>l</u></b>eft width + the border <b><u>r</u></b>ight width.
@@ -634,7 +674,7 @@ Ext.fly('elId').setHeight(150, {
return this.addStyles(side, borders);
},
- /**
+ /**
* Gets the width of the padding(s) for the specified side(s)
* @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,
* passing <tt>'lr'</tt> would get the padding <b><u>l</u></b>eft + the padding <b><u>r</u></b>ight.
@@ -644,9 +684,9 @@ Ext.fly('elId').setHeight(150, {
return this.addStyles(side, paddings);
},
- /**
+ /**
* Store the current overflow setting and clip overflow on the element - use <tt>{@link #unclip}</tt> to remove
- * @return {Ext.core.Element} this
+ * @return {Ext.Element} this
*/
clip : function(){
var me = this,
@@ -666,9 +706,9 @@ Ext.fly('elId').setHeight(150, {
return me;
},
- /**
+ /**
* Return clipping (overflow) to original clipping before <tt>{@link #clip}</tt> was called
- * @return {Ext.core.Element} this
+ * @return {Ext.Element} this
*/
unclip : function(){
var me = this,
@@ -678,14 +718,14 @@ Ext.fly('elId').setHeight(150, {
if(data(dom, ISCLIPPED)){
data(dom, ISCLIPPED, false);
clip = data(dom, ORIGINALCLIP);
- if(o.o){
- me.setStyle(OVERFLOW, o.o);
+ if(clip.o){
+ me.setStyle(OVERFLOW, clip.o);
}
- if(o.x){
- me.setStyle(OVERFLOWX, o.x);
+ if(clip.x){
+ me.setStyle(OVERFLOWX, clip.x);
}
- if(o.y){
- me.setStyle(OVERFLOWY, o.y);
+ if(clip.y){
+ me.setStyle(OVERFLOWY, clip.y);
}
}
return me;
@@ -709,19 +749,19 @@ Ext.fly('elId').setHeight(150, {
},
margins : margins,
-
- /**
+
+ /**
* More flexible version of {@link #setStyle} for setting style properties.
* @param {String/Object/Function} styles A style specification string, e.g. "width:100px", or object in the form {width:"100px"}, or
* a function which returns such a specification.
- * @return {Ext.core.Element} this
+ * @return {Ext.Element} this
*/
applyStyles : function(style){
- Ext.core.DomHelper.applyStyles(this.dom, style);
+ Ext.DomHelper.applyStyles(this.dom, style);
return this;
},
- /**
+ /**
* Returns an object with properties matching the styles requested.
* For example, el.getStyles('color', 'font-size', 'width') might return
* {'color': '#FFFFFF', 'font-size': '13px', 'width': '100px'}.
@@ -734,7 +774,7 @@ Ext.fly('elId').setHeight(150, {
var styles = {},
len = arguments.length,
i = 0, style;
-
+
for(; i < len; ++i) {
style = arguments[i];
styles[style] = this.getStyle(style);
@@ -742,14 +782,14 @@ Ext.fly('elId').setHeight(150, {
return styles;
},
- /**
+ /**
* <p>Wraps the specified element with a special 9 element markup/CSS block that renders by default as
* a gray container with a gradient background, rounded corners and a 4-way shadow.</p>
* <p>This special markup is used throughout Ext when box wrapping elements ({@link Ext.button.Button},
* {@link Ext.panel.Panel} when <tt>{@link Ext.panel.Panel#frame frame=true}</tt>, {@link Ext.window.Window}). The markup
* is of this form:</p>
* <pre><code>
- Ext.core.Element.boxMarkup =
+ Ext.Element.boxMarkup =
'<div class="{0}-tl"><div class="{0}-tr"><div class="{0}-tc"></div></div></div>
<div class="{0}-ml"><div class="{0}-mr"><div class="{0}-mc"></div></div></div>
<div class="{0}-bl"><div class="{0}-br"><div class="{0}-bc"></div></div></div>';
@@ -768,43 +808,49 @@ Ext.fly('elId').setHeight(150, {
* (defaults to <tt>'x-box'</tt>). Note that there are a number of CSS rules that are dependent on
* this name to make the overall effect work, so if you supply an alternate base class, make sure you
* also supply all of the necessary rules.
- * @return {Ext.core.Element} The outermost wrapping element of the created box structure.
+ * @return {Ext.Element} The outermost wrapping element of the created box structure.
*/
boxWrap : function(cls){
cls = cls || Ext.baseCSSPrefix + 'box';
- var el = Ext.get(this.insertHtml("beforeBegin", "<div class='" + cls + "'>" + Ext.String.format(Ext.core.Element.boxMarkup, cls) + "</div>"));
+ var el = Ext.get(this.insertHtml("beforeBegin", "<div class='" + cls + "'>" + Ext.String.format(ELEMENT.boxMarkup, cls) + "</div>"));
Ext.DomQuery.selectNode('.' + cls + '-mc', el.dom).appendChild(this.dom);
return el;
},
- /**
+ /**
* Set the size of this Element. If animation is true, both width and height will be animated concurrently.
- * @param {Mixed} width The new width. This may be one of:<div class="mdetail-params"><ul>
+ * @param {Number/String} width The new width. This may be one of:<div class="mdetail-params"><ul>
* <li>A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels).</li>
* <li>A String used to set the CSS width style. Animation may <b>not</b> be used.
* <li>A size object in the format <code>{width: widthValue, height: heightValue}</code>.</li>
* </ul></div>
- * @param {Mixed} height The new height. This may be one of:<div class="mdetail-params"><ul>
+ * @param {Number/String} height The new height. This may be one of:<div class="mdetail-params"><ul>
* <li>A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels).</li>
* <li>A String used to set the CSS height style. Animation may <b>not</b> be used.</li>
* </ul></div>
* @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
- * @return {Ext.core.Element} this
+ * @return {Ext.Element} this
*/
setSize : function(width, height, animate){
var me = this;
- if (Ext.isObject(width)){ // in case of object from getSize()
+ if (Ext.isObject(width)) { // in case of object from getSize()
+ animate = height;
height = width.height;
width = width.width;
}
width = me.adjustWidth(width);
height = me.adjustHeight(height);
if(!animate || !me.anim){
+ // Must touch some property before setting style.width/height on non-quirk IE6,7, or the
+ // properties will not reflect the changes on the style immediately
+ if (!Ext.isIEQuirks && (Ext.isIE6 || Ext.isIE7)) {
+ me.dom.offsetTop;
+ }
me.dom.style.width = me.addUnits(width);
me.dom.style.height = me.addUnits(height);
}
else {
- if (!Ext.isObject(animate)) {
+ if (animate === true) {
animate = {};
}
me.animate(Ext.applyIf({
@@ -817,7 +863,7 @@ Ext.fly('elId').setHeight(150, {
return me;
},
- /**
+ /**
* Returns either the offsetHeight or the height of this element based on CSS height adjusted by padding or borders
* when needed to simulate offsetHeight when offsets aren't available. This may not work on display:none elements
* if a height has not been set using CSS.
@@ -835,7 +881,7 @@ Ext.fly('elId').setHeight(150, {
return h;
},
- /**
+ /**
* Returns either the offsetWidth or the width of this element based on CSS width adjusted by padding or borders
* when needed to simulate offsetWidth when offsets aren't available. This may not work on display:none elements
* if a width has not been set using CSS.
@@ -844,7 +890,7 @@ Ext.fly('elId').setHeight(150, {
getComputedWidth : function(){
var me = this,
w = Math.max(me.dom.offsetWidth, me.dom.clientWidth);
-
+
if(!w){
w = parseFloat(me.getStyle('width')) || 0;
if(!me.isBorderBox()){
@@ -854,7 +900,7 @@ Ext.fly('elId').setHeight(150, {
return w;
},
- /**
+ /**
* Returns the sum width of the padding and borders for the passed "sides". See getBorderWidth()
for more information about the sides.
* @param {String} sides
@@ -864,10 +910,10 @@ Ext.fly('elId').setHeight(150, {
return onlyContentBox && this.isBorderBox() ? 0 : (this.getPadding(sides) + this.getBorderWidth(sides));
},
- /**
+ /**
* Sets up event handlers to add and remove a css class when the mouse is over this element
* @param {String} className
- * @return {Ext.core.Element} this
+ * @return {Ext.Element} this
*/
addClsOnOver : function(className){
var dom = this.dom;
@@ -882,10 +928,10 @@ Ext.fly('elId').setHeight(150, {
return this;
},
- /**
+ /**
* Sets up event handlers to add and remove a css class when this element has the focus
* @param {String} className
- * @return {Ext.core.Element} this
+ * @return {Ext.Element} this
*/
addClsOnFocus : function(className){
var me = this,
@@ -899,10 +945,10 @@ Ext.fly('elId').setHeight(150, {
return me;
},
- /**
+ /**
* Sets up event handlers to add and remove a css class when the mouse is down and then up on this element (a click effect)
* @param {String} className
- * @return {Ext.core.Element} this
+ * @return {Ext.Element} this
*/
addClsOnClick : function(className){
var dom = this.dom;
@@ -918,7 +964,7 @@ Ext.fly('elId').setHeight(150, {
return this;
},
- /**
+ /**
* <p>Returns the dimensions of the element available to lay content out in.<p>
* <p>If the element (or any ancestor element) has CSS style <code>display : none</code>, the dimensions will be zero.</p>
* example:<pre><code>
@@ -947,8 +993,8 @@ Ext.fly('elId').setHeight(150, {
// If the body, use static methods
if (isDoc) {
ret = {
- width : Ext.core.Element.getViewWidth(),
- height : Ext.core.Element.getViewHeight()
+ width : ELEMENT.getViewWidth(),
+ height : ELEMENT.getViewHeight()
};
// Else use clientHeight/clientWidth
@@ -972,7 +1018,7 @@ Ext.fly('elId').setHeight(150, {
return ret;
},
- /**
+ /**
* <p>Returns the dimensions of the element available to lay content out in.<p>
*
* getStyleSize utilizes prefers style sizing if present, otherwise it chooses the larger of offsetHeight/clientHeight and offsetWidth/clientWidth.
@@ -992,8 +1038,8 @@ Ext.fly('elId').setHeight(150, {
// If the body, use static methods
if (isDoc) {
return {
- width : Ext.core.Element.getViewWidth(),
- height : Ext.core.Element.getViewHeight()
+ width : ELEMENT.getViewWidth(),
+ height : ELEMENT.getViewHeight()
};
}
// Use Styles if they are set
@@ -1014,7 +1060,7 @@ Ext.fly('elId').setHeight(150, {
return {width: w || me.getWidth(true), height: h || me.getHeight(true)};
},
- /**
+ /**
* Returns the size of the element.
* @param {Boolean} contentSize (optional) true to get the width/size minus borders and padding
* @return {Object} An object containing the element's size {width: (element width), height: (element height)}
@@ -1023,9 +1069,9 @@ Ext.fly('elId').setHeight(150, {
return {width: this.getWidth(contentSize), height: this.getHeight(contentSize)};
},
- /**
+ /**
* Forces the browser to repaint this element
- * @return {Ext.core.Element} this
+ * @return {Ext.Element} this
*/
repaint : function(){
var dom = this.dom;
@@ -1036,22 +1082,39 @@ Ext.fly('elId').setHeight(150, {
return this;
},
- /**
+ /**
+ * Enable text selection for this element (normalized across browsers)
+ * @return {Ext.Element} this
+ */
+ selectable : function() {
+ var me = this;
+ me.dom.unselectable = "off";
+ // Prevent it from bubles up and enables it to be selectable
+ me.on('selectstart', function (e) {
+ e.stopPropagation();
+ return true;
+ });
+ me.applyStyles("-moz-user-select: text; -khtml-user-select: text;");
+ me.removeCls(Ext.baseCSSPrefix + 'unselectable');
+ return me;
+ },
+
+ /**
* Disables text selection for this element (normalized across browsers)
- * @return {Ext.core.Element} this
+ * @return {Ext.Element} this
*/
unselectable : function(){
var me = this;
me.dom.unselectable = "on";
me.swallowEvent("selectstart", true);
- me.applyStyles("-moz-user-select:none;-khtml-user-select:none;");
+ me.applyStyles("-moz-user-select:-moz-none;-khtml-user-select:none;");
me.addCls(Ext.baseCSSPrefix + 'unselectable');
-
+
return me;
},
- /**
+ /**
* Returns an object with properties top, left, right and bottom representing the margins of this element unless sides is passed,
* then it returns the calculated width of the sides (see getPadding)
* @param {String} sides (optional) Any combination of l, r, t, b to get the sum of those sides