X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/3789b528d8dd8aad4558e38e22d775bcab1cbd36..f562e4c6e5fac7bcb445985b99acbea4d706e6f0:/src/core/src/dom/Element.style.js diff --git a/src/core/src/dom/Element.style.js b/src/core/src/dom/Element.style.js index a0a9c152..2475e4b4 100644 --- a/src/core/src/dom/Element.style.js +++ b/src/core/src/dom/Element.style.js @@ -1,10 +1,24 @@ +/* + +This file is part of Ext JS 4 + +Copyright (c) 2011 Sencha Inc + +Contact: http://www.sencha.com/contact + +GNU General Public License Usage +This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html. + +If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact. + +*/ /** - * @class Ext.core.Element + * @class Ext.Element */ (function(){ - Ext.core.Element.boxMarkup = '
- 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>';
@@ -751,43 +805,49 @@ Ext.fly('elId').setHeight(150, {
* (defaults to 'x-box'). 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", "" + Ext.String.format(Ext.core.Element.boxMarkup, cls) + ""));
+ var el = Ext.get(this.insertHtml("beforeBegin", "" + Ext.String.format(ELEMENT.boxMarkup, cls) + ""));
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:
+ * @param {Number/String} 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.
*
- A size object in the format
{width: widthValue, height: heightValue}
.
*
- * @param {Mixed} height The new height. This may be one of:
+ * @param {Number/String} 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.
*
* @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({
@@ -827,7 +887,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()){
@@ -850,7 +910,7 @@ Ext.fly('elId').setHeight(150, {
/**
* 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;
@@ -868,7 +928,7 @@ Ext.fly('elId').setHeight(150, {
/**
* 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,
@@ -885,7 +945,7 @@ Ext.fly('elId').setHeight(150, {
/**
* 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;
@@ -930,8 +990,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
@@ -975,8 +1035,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
@@ -1008,7 +1068,7 @@ Ext.fly('elId').setHeight(150, {
/**
* Forces the browser to repaint this element
- * @return {Ext.core.Element} this
+ * @return {Ext.Element} this
*/
repaint : function(){
var dom = this.dom;
@@ -1019,18 +1079,35 @@ 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;
},
@@ -1056,4 +1133,4 @@ Ext.fly('elId').setHeight(150, {
}
}
});
-})();
\ No newline at end of file
+})();