<!DOCTYPE html>
|
<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<title>The source code</title>
|
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
|
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
|
<style type="text/css">
|
.highlight { display: block; background-color: #ddd; }
|
</style>
|
<script type="text/javascript">
|
function highlight() {
|
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
|
}
|
</script>
|
</head>
|
<body onload="prettyPrint(); highlight();">
|
<pre class="prettyprint lang-js"><span id='Ext-rtl-AbstractComponent'>/**
|
</span> * This override adds RTL support and the `rtl` config option to AbstactComponent.
|
*/
|
Ext.define('Ext.rtl.AbstractComponent', {
|
override: 'Ext.AbstractComponent',
|
|
<span id='Ext-AbstractComponent-cfg-rtl'> /**
|
</span> * @cfg {Boolean} rtl
|
* True to layout this component and its descendants in "rtl" (right-to-left) mode.
|
* Can be explicitly set to false to override a true value inherited from an ancestor.
|
*/
|
|
initStyles: function(){
|
if (this.getHierarchyState().rtl) {
|
this.horizontalPosProp = 'right';
|
}
|
this.callParent(arguments);
|
},
|
|
<span id='Ext-AbstractComponent-method-convertPositionSpec'> convertPositionSpec: function(posSpec) {
|
</span> // Since anchoring is done based on page level coordinates, we need to invert
|
// left and right in the position spec when the direction of the compoent being
|
// aligned is not the same as the direction of the viewport/body
|
if ((Ext.rootHierarchyState.rtl || false) !== (this.getHierarchyState().rtl || false)) {
|
posSpec = posSpec.replace(/l/g, 'tmp').replace(/r/g, 'l').replace(/tmp/g, 'r');
|
}
|
return posSpec;
|
},
|
|
<span id='Ext-rtl-AbstractComponent-method-getAnchorToXY'> getAnchorToXY: function(el, anchor, local, mySize) {
|
</span> var doc = document,
|
pos, scroll, extraX, extraY;
|
|
if (el.dom == doc.body || el.dom == doc) {
|
// anchor the element using the same coordinate system as the viewport or body
|
scroll = Ext.rootHierarchyState.rtl ? el.rtlGetScroll() : el.getScroll();
|
extraX = scroll.left;
|
extraY = scroll.top;
|
} else {
|
pos = el.getXY();
|
extraX = local ? 0 : pos[0];
|
extraY = local ? 0 : pos[1];
|
}
|
|
return el.calculateAnchorXY(anchor, extraX, extraY, mySize);
|
},
|
|
<span id='Ext-rtl-AbstractComponent-method-getBorderPadding'> getBorderPadding: function() {
|
</span> var borderPadding = this.el.getBorderPadding(),
|
xBegin;
|
|
if (this.isParentRtl()) {
|
xBegin = borderPadding.xBegin;
|
borderPadding.xBegin = borderPadding.xEnd;
|
borderPadding.xEnd = xBegin;
|
}
|
|
return borderPadding;
|
},
|
|
<span id='Ext-rtl-AbstractComponent-method-getLocalX'> getLocalX: function() {
|
</span> return this.isLocalRtl() ? this.el.rtlGetLocalX() : this.el.getLocalX();
|
},
|
|
<span id='Ext-rtl-AbstractComponent-method-getLocalXY'> getLocalXY: function() {
|
</span> return this.isLocalRtl() ? this.el.rtlGetLocalXY() : this.el.getLocalXY();
|
},
|
|
<span id='Ext-rtl-AbstractComponent-method-unitizeBox'> unitizeBox: function(box) {
|
</span> if (this.getHierarchyState().rtl) {
|
return Ext.dom.Element.rtlUnitizeBox(box);
|
} else {
|
return this.callParent(arguments);
|
}
|
},
|
|
<span id='Ext-rtl-AbstractComponent-method-parseBox'> parseBox: function(box) {
|
</span> if (this.getHierarchyState().rtl) {
|
return Ext.dom.Element.rtlParseBox(box);
|
} else {
|
return this.callParent(arguments);
|
}
|
},
|
|
<span id='Ext-rtl-AbstractComponent-method-initHierarchyState'> initHierarchyState: function(hierarchyState) {
|
</span> this.callParent(arguments);
|
var rtl = this.rtl;
|
|
if (rtl !== undefined) {
|
// unlike the other hierarchical properties which should always
|
// be inherited from the hierarchy unless true, rtl should only
|
// be inherited if undefined, that is if this component instance
|
// does not have rtl specified as true or false.
|
hierarchyState.rtl = rtl;
|
}
|
},
|
|
<span id='Ext-AbstractComponent-method-isLocalRtl'> /**
|
</span> * Returns true if this component's local coordinate system is rtl. For normal
|
* components this equates to the value of isParentRtl(). Floaters are a bit different
|
* because a floater's element can be a childNode of something other than its
|
* parent component's element. For floaters we have to read the dom to see if the
|
* component's element's parentNode has a css direction value of "rtl".
|
* @return {Boolean}
|
* @private
|
*/
|
isLocalRtl: function() {
|
var me = this,
|
rtl, offsetParent, doc;
|
|
if (me.floating) {
|
if (me._isOffsetParentRtl === undefined) {
|
|
// position:fixed elements do not report an offsetParent, so fall back to parentNode
|
offsetParent = this.el.dom.offsetParent || this.el.dom.parentNode;
|
if (offsetParent) {
|
doc = document;
|
if (offsetParent === doc.documentElement) {
|
// the default offsetParent is the body in most browsers,
|
// in IE7 strict it is the document element. If this is the case
|
// test the body's style, since its direction style is what
|
// determines if the page-level coordinate system is rtl.
|
offsetParent = doc.body;
|
}
|
me._isOffsetParentRtl =
|
Ext.fly(offsetParent, '_isLocalRtl').isStyle('direction', 'rtl');
|
}
|
}
|
rtl = !!me._isOffsetParentRtl;
|
} else {
|
rtl = this.isParentRtl();
|
}
|
|
return rtl;
|
},
|
|
<span id='Ext-AbstractComponent-method-isParentRtl'> /**
|
</span> * Returns true if this component's parent container is rtl. Used by rtl positioning
|
* methods to determine if the component should be positioned using a right-to-left
|
* coordinate system.
|
* @return {Boolean}
|
* @private
|
*/
|
isParentRtl: function() {
|
var me = this,
|
hierarchyState = me.getHierarchyState(),
|
isRtl = false,
|
myRtl;
|
|
if (hierarchyState.hasOwnProperty('rtl')) {
|
// Temporarily remove this component's rtl property so we can see what the rtl
|
// value is on the prototype. A component is only rtl positioned if it is
|
// inside of an rtl coordinate system (if one of it's ancestors is rtl). We
|
// can't just use ownerCt/floatParent hierarchyState, because components may
|
// not have a container, but might still be part of a rtl coordinate system by
|
// virtue of the viewport. These components will inherit the correct rtl
|
// value from the prototype becuase all hierarchy states inherit from
|
// Ext.rootHierarchyState
|
myRtl = hierarchyState.rtl;
|
delete hierarchyState.rtl;
|
}
|
|
if (hierarchyState.rtl) {
|
isRtl = true;
|
}
|
|
if (myRtl !== undefined) {
|
// restore this component's original hierarchyState rtl property
|
hierarchyState.rtl = myRtl;
|
}
|
|
return isRtl;
|
},
|
|
<span id='Ext-rtl-AbstractComponent-method-setLocalX'> setLocalX: function(x) {
|
</span> return this.isLocalRtl() ? this.el.rtlSetLocalX(x) : this.el.setLocalX(x);
|
},
|
|
<span id='Ext-rtl-AbstractComponent-method-setLocalXY'> setLocalXY: function(x, y) {
|
</span> return this.isLocalRtl() ? this.el.rtlSetLocalXY(x, y) : this.el.setLocalXY(x, y);
|
},
|
|
<span id='Ext-AbstractComponent-method-isOppositeRootDirection'> isOppositeRootDirection: function(){
|
</span> return !this.getHierarchyState().rtl !== !Ext.rootHierarchyState.rtl;
|
}
|
}, function() {
|
Ext.on({
|
ready: function() {
|
// If the document or body has "direction:rtl" then we set the rtl flag in the
|
// root hierarchy state so that the page-level coordinate system will be
|
// right-based (similar to using a Viewport with "rtl: true").
|
if ((Ext.fly(document.documentElement).isStyle('direction', 'rtl')) ||
|
(Ext.getBody().isStyle('direction', 'rtl'))) {
|
Ext.rootHierarchyState.rtl = true;
|
}
|
},
|
single: true,
|
priority: 1000
|
});
|
});
|
|
</pre>
|
</body>
|
</html>
|
