X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6746dc89c47ed01b165cc1152533605f97eb8e8d..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 4eb2e637..2475e4b4 100644 --- a/src/core/src/dom/Element.style.js +++ b/src/core/src/dom/Element.style.js @@ -13,12 +13,12 @@ If you are unsure which license is appropriate for your use, please contact the */ /** - * @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>';
@@ -764,28 +805,28 @@ 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;
@@ -797,6 +838,11 @@ Ext.fly('elId').setHeight(150, {
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);
}
@@ -841,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()){
@@ -864,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;
@@ -882,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,
@@ -899,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;
@@ -944,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
@@ -989,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
@@ -1022,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;
@@ -1033,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;
},