/**
* @class Ext.Element
*/
Ext.Element.addMethods(function(){
// local style camelizing for speed
var propCache = {},
camelRe = /(-[a-z])/gi,
classReCache = {},
view = document.defaultView,
propFloat = Ext.isIE ? 'styleFloat' : 'cssFloat',
opacityRe = /alpha\(opacity=(.*)\)/i,
trimRe = /^\s+|\s+$/g,
EL = Ext.Element,
PADDING = "padding",
MARGIN = "margin",
BORDER = "border",
LEFT = "-left",
RIGHT = "-right",
TOP = "-top",
BOTTOM = "-bottom",
WIDTH = "-width",
MATH = Math,
HIDDEN = 'hidden',
ISCLIPPED = 'isClipped',
OVERFLOW = 'overflow',
OVERFLOWX = 'overflow-x',
OVERFLOWY = 'overflow-y',
ORIGINALCLIP = 'originalClip',
// special markup used throughout Ext when box wrapping elements
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.Element.data;
// private
function camelFn(m, a) {
return a.charAt(1).toUpperCase();
}
// private (needs to be called => addStyles.call(this, sides, styles))
function addStyles(sides, styles){
var val = 0;
Ext.each(sides.match(/\w/g), function(s) {
if (s = parseInt(this.getStyle(styles[s]), 10)) {
val += MATH.abs(s);
}
},
this);
return val;
}
function chkCache(prop) {
return propCache[prop] || (propCache[prop] = prop == 'float' ? propFloat : prop.replace(camelRe, camelFn));
}
return {
// private ==> used by Fx
adjustWidth : function(width) {
var me = this;
var isNum = (typeof width == "number");
if(isNum && me.autoBoxAdjust && !me.isBorderBox()){
width -= (me.getBorderWidth("lr") + me.getPadding("lr"));
}
return (isNum && width < 0) ? 0 : width;
},
// private ==> used by Fx
adjustHeight : function(height) {
var me = this;
var isNum = (typeof height == "number");
if(isNum && me.autoBoxAdjust && !me.isBorderBox()){
height -= (me.getBorderWidth("tb") + me.getPadding("tb"));
}
return (isNum && height < 0) ? 0 : height;
},
/**
* Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.
* @param {String/Array} className The CSS class to add, or an array of classes
* @return {Ext.Element} this
*/
addClass : function(className){
var me = this;
Ext.each(className, function(v) {
me.dom.className += (!me.hasClass(v) && v ? " " + v : "");
});
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.Element} this
*/
radioClass : function(className){
Ext.each(this.dom.parentNode.childNodes, function(v) {
if(v.nodeType == 1) {
Ext.fly(v, '_internal').removeClass(className);
}
});
return this.addClass(className);
},
/**
* Removes one or more CSS classes from the element.
* @param {String/Array} className The CSS class to remove, or an array of classes
* @return {Ext.Element} this
*/
removeClass : function(className){
var me = this;
if (me.dom.className) {
Ext.each(className, function(v) {
me.dom.className = me.dom.className.replace(
classReCache[v] = classReCache[v] || new RegExp('(?:^|\\s+)' + v + '(?:\\s+|$)', "g"),
" ");
});
}
return me;
},
/**
* 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.Element} this
*/
toggleClass : function(className){
return this.hasClass(className) ? this.removeClass(className) : this.addClass(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
*/
hasClass : function(className){
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.Element} this
*/
replaceClass : function(oldClassName, newClassName){
return this.removeClass(oldClassName).addClass(newClassName);
},
isStyle : function(style, val) {
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.
*/
getStyle : function(){
return view && view.getComputedStyle ?
function(prop){
var el = this.dom,
v,
cs;
if(el == document) return null;
prop = chkCache(prop);
return (v = el.style[prop]) ? v :
(cs = view.getComputedStyle(el, "")) ? cs[prop] : null;
} :
function(prop){
var el = this.dom,
m,
cs;
if(el == document) return null;
if (prop == 'opacity') {
if (el.style.filter.match) {
if(m = el.style.filter.match(opacityRe)){
var fv = parseFloat(m[1]);
if(!isNaN(fv)){
return fv ? fv / 100 : 0;
}
}
}
return 1;
}
prop = chkCache(prop);
return el.style[prop] || ((cs = el.currentStyle) ? cs[prop] : 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
* @param {String} defaultValue The default value to use when a valid color isn't found
* @param {String} prefix (optional) defaults to #. Use an empty string when working with
* color anims.
*/
getColor : function(attr, defaultValue, prefix){
var v = this.getStyle(attr),
color = prefix || '#',
h;
if(!v || /transparent|inherit/.test(v)){
return defaultValue;
}
if(/^r/.test(v)){
Ext.each(v.slice(4, v.length -1).split(','), function(s){
h = parseInt(s, 10);
color += (h < 16 ? '0' : '') + h.toString(16);
});
}else{
v = v.replace('#', '');
color += v.length == 3 ? v.replace(/^(\w)(\w)(\w)$/, '$1$1$2$2$3$3') : v;
}
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.Element} this
*/
setStyle : function(prop, value){
var tmp,
style,
camel;
if (!Ext.isObject(prop)) {
tmp = {};
tmp[prop] = value;
prop = tmp;
}
for (style in prop) {
value = prop[style];
style == 'opacity' ?
this.setOpacity(value) :
this.dom.style[chkCache(style)] = value;
}
return this;
},
/**
* Set the opacity of the element
* @param {Float} 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 true for
* the default animation ({duration: .35, easing: 'easeIn'})
* @return {Ext.Element} this
*/
setOpacity : function(opacity, animate){
var me = this,
s = me.dom.style;
if(!animate || !me.anim){
if(Ext.isIE){
var opac = opacity < 1 ? 'alpha(opacity=' + opacity * 100 + ')' : '',
val = s.filter.replace(opacityRe, '').replace(trimRe, '');
s.zoom = 1;
s.filter = val + (val.length > 0 ? ' ' : '') + opac;
}else{
s.opacity = opacity;
}
}else{
me.anim({opacity: {to: opacity}}, me.preanim(arguments, 1), null, .35, 'easeIn');
}
return me;
},
/**
* Clears any opacity settings from this element. Required in some cases for IE.
* @return {Ext.Element} this
*/
clearOpacity : function(){
var style = this.dom.style;
if(Ext.isIE){
if(!Ext.isEmpty(style.filter)){
style.filter = style.filter.replace(opacityRe, '').replace(trimRe, '');
}
}else{
style.opacity = style['-moz-opacity'] = style['-khtml-opacity'] = '';
}
return this;
},
/**
* 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
*/
getHeight : function(contentHeight){
var me = this,
dom = me.dom,
h = MATH.max(dom.offsetHeight, dom.clientHeight) || 0;
h = !contentHeight ? h : h - me.getBorderWidth("tb") - me.getPadding("tb");
return h < 0 ? 0 : h;
},
/**
* 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
*/
getWidth : function(contentWidth){
var me = this,
dom = me.dom,
w = MATH.max(dom.offsetWidth, dom.clientWidth) || 0;
w = !contentWidth ? w : w - me.getBorderWidth("lr") - me.getPadding("lr");
return w < 0 ? 0 : w;
},
/**
* Set the width of this Element.
* @param {Mixed} width The new width. This may be one of:
* - A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels).
* - A String used to set the CSS width style. Animation may not be used.
*
// change the height to 200px and animate with default configuration
Ext.fly('elementId').setHeight(200, true);
// change the height to 150px and animate with a custom configuration
Ext.fly('elId').setHeight(150, {
duration : .5, // animation will have a duration of .5 seconds
// will change the content to "finished"
callback: function(){ this.{@link #update}("finished"); }
});
*
* @param {Mixed} height The new height. This may be one of:
* - A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels.)
* - A String used to set the CSS height style. Animation may not be used.
*