Renderable.html 48 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>The source code</title>
  6. <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  7. <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  8. <style type="text/css">
  9. .highlight { display: block; background-color: #ddd; }
  10. </style>
  11. <script type="text/javascript">
  12. function highlight() {
  13. document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14. }
  15. </script>
  16. </head>
  17. <body onload="prettyPrint(); highlight();">
  18. <pre class="prettyprint lang-js"><span id='Ext-util-Renderable'>/**
  19. </span> * Given a component hierarchy of this:
  20. *
  21. * {
  22. * xtype: 'panel',
  23. * id: 'ContainerA',
  24. * layout: 'hbox',
  25. * renderTo: Ext.getBody(),
  26. * items: [
  27. * {
  28. * id: 'ContainerB',
  29. * xtype: 'container',
  30. * items: [
  31. * { id: 'ComponentA' }
  32. * ]
  33. * }
  34. * ]
  35. * }
  36. *
  37. * The rendering of the above proceeds roughly like this:
  38. *
  39. * - ContainerA's initComponent calls #render passing the `renderTo` property as the
  40. * container argument.
  41. * - `render` calls the `getRenderTree` method to get a complete {@link Ext.DomHelper} spec.
  42. * - `getRenderTree` fires the &quot;beforerender&quot; event and calls the #beforeRender
  43. * method. Its result is obtained by calling #getElConfig.
  44. * - The #getElConfig method uses the `renderTpl` and its render data as the content
  45. * of the `autoEl` described element.
  46. * - The result of `getRenderTree` is passed to {@link Ext.DomHelper#append}.
  47. * - The `renderTpl` contains calls to render things like docked items, container items
  48. * and raw markup (such as the `html` or `tpl` config properties). These calls are to
  49. * methods added to the {@link Ext.XTemplate} instance by #setupRenderTpl.
  50. * - The #setupRenderTpl method adds methods such as `renderItems`, `renderContent`, etc.
  51. * to the template. These are directed to &quot;doRenderItems&quot;, &quot;doRenderContent&quot; etc..
  52. * - The #setupRenderTpl calls traverse from components to their {@link Ext.layout.Layout}
  53. * object.
  54. * - When a container is rendered, it also has a `renderTpl`. This is processed when the
  55. * `renderContainer` method is called in the component's `renderTpl`. This call goes to
  56. * Ext.layout.container.Container#doRenderContainer. This method repeats this
  57. * process for all components in the container.
  58. * - After the top-most component's markup is generated and placed in to the DOM, the next
  59. * step is to link elements to their components and finish calling the component methods
  60. * `onRender` and `afterRender` as well as fire the corresponding events.
  61. * - The first step in this is to call #finishRender. This method descends the
  62. * component hierarchy and calls `onRender` and fires the `render` event. These calls
  63. * are delivered top-down to approximate the timing of these calls/events from previous
  64. * versions.
  65. * - During the pass, the component's `el` is set. Likewise, the `renderSelectors` and
  66. * `childEls` are applied to capture references to the component's elements.
  67. * - These calls are also made on the {@link Ext.layout.container.Container} layout to
  68. * capture its elements. Both of these classes use {@link Ext.util.ElementContainer} to
  69. * handle `childEls` processing.
  70. * - Once this is complete, a similar pass is made by calling #finishAfterRender.
  71. * This call also descends the component hierarchy, but this time the calls are made in
  72. * a bottom-up order to `afterRender`.
  73. *
  74. * @private
  75. */
  76. Ext.define('Ext.util.Renderable', {
  77. requires: [
  78. 'Ext.dom.Element'
  79. ],
  80. frameCls: Ext.baseCSSPrefix + 'frame',
  81. frameIdRegex: /[\-]frame\d+[TMB][LCR]$/,
  82. frameElementCls: {
  83. tl: [],
  84. tc: [],
  85. tr: [],
  86. ml: [],
  87. mc: [],
  88. mr: [],
  89. bl: [],
  90. bc: [],
  91. br: []
  92. },
  93. frameElNames: ['TL','TC','TR','ML','MC','MR','BL','BC','BR'],
  94. frameTpl: [
  95. '{%this.renderDockedItems(out,values,0);%}',
  96. '&lt;tpl if=&quot;top&quot;&gt;',
  97. '&lt;tpl if=&quot;left&quot;&gt;&lt;div id=&quot;{fgid}TL&quot; class=&quot;{frameCls}-tl {baseCls}-tl {baseCls}-{ui}-tl&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-tl&lt;/tpl&gt;&quot; style=&quot;background-position: {tl}; padding-left: {frameWidth}px&quot; role=&quot;presentation&quot;&gt;&lt;/tpl&gt;',
  98. '&lt;tpl if=&quot;right&quot;&gt;&lt;div id=&quot;{fgid}TR&quot; class=&quot;{frameCls}-tr {baseCls}-tr {baseCls}-{ui}-tr&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-tr&lt;/tpl&gt;&quot; style=&quot;background-position: {tr}; padding-right: {frameWidth}px&quot; role=&quot;presentation&quot;&gt;&lt;/tpl&gt;',
  99. '&lt;div id=&quot;{fgid}TC&quot; class=&quot;{frameCls}-tc {baseCls}-tc {baseCls}-{ui}-tc&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-tc&lt;/tpl&gt;&quot; style=&quot;background-position: {tc}; height: {frameWidth}px&quot; role=&quot;presentation&quot;&gt;&lt;/div&gt;',
  100. '&lt;tpl if=&quot;right&quot;&gt;&lt;/div&gt;&lt;/tpl&gt;',
  101. '&lt;tpl if=&quot;left&quot;&gt;&lt;/div&gt;&lt;/tpl&gt;',
  102. '&lt;/tpl&gt;',
  103. '&lt;tpl if=&quot;left&quot;&gt;&lt;div id=&quot;{fgid}ML&quot; class=&quot;{frameCls}-ml {baseCls}-ml {baseCls}-{ui}-ml&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-ml&lt;/tpl&gt;&quot; style=&quot;background-position: {ml}; padding-left: {frameWidth}px&quot; role=&quot;presentation&quot;&gt;&lt;/tpl&gt;',
  104. '&lt;tpl if=&quot;right&quot;&gt;&lt;div id=&quot;{fgid}MR&quot; class=&quot;{frameCls}-mr {baseCls}-mr {baseCls}-{ui}-mr&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-mr&lt;/tpl&gt;&quot; style=&quot;background-position: {mr}; padding-right: {frameWidth}px&quot; role=&quot;presentation&quot;&gt;&lt;/tpl&gt;',
  105. '&lt;div id=&quot;{fgid}MC&quot; class=&quot;{frameCls}-mc {baseCls}-mc {baseCls}-{ui}-mc&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-mc&lt;/tpl&gt;&quot; role=&quot;presentation&quot;&gt;',
  106. '{%this.applyRenderTpl(out, values)%}',
  107. '&lt;/div&gt;',
  108. '&lt;tpl if=&quot;right&quot;&gt;&lt;/div&gt;&lt;/tpl&gt;',
  109. '&lt;tpl if=&quot;left&quot;&gt;&lt;/div&gt;&lt;/tpl&gt;',
  110. '&lt;tpl if=&quot;bottom&quot;&gt;',
  111. '&lt;tpl if=&quot;left&quot;&gt;&lt;div id=&quot;{fgid}BL&quot; class=&quot;{frameCls}-bl {baseCls}-bl {baseCls}-{ui}-bl&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-bl&lt;/tpl&gt;&quot; style=&quot;background-position: {bl}; padding-left: {frameWidth}px&quot; role=&quot;presentation&quot;&gt;&lt;/tpl&gt;',
  112. '&lt;tpl if=&quot;right&quot;&gt;&lt;div id=&quot;{fgid}BR&quot; class=&quot;{frameCls}-br {baseCls}-br {baseCls}-{ui}-br&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-br&lt;/tpl&gt;&quot; style=&quot;background-position: {br}; padding-right: {frameWidth}px&quot; role=&quot;presentation&quot;&gt;&lt;/tpl&gt;',
  113. '&lt;div id=&quot;{fgid}BC&quot; class=&quot;{frameCls}-bc {baseCls}-bc {baseCls}-{ui}-bc&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-bc&lt;/tpl&gt;&quot; style=&quot;background-position: {bc}; height: {frameWidth}px&quot; role=&quot;presentation&quot;&gt;&lt;/div&gt;',
  114. '&lt;tpl if=&quot;right&quot;&gt;&lt;/div&gt;&lt;/tpl&gt;',
  115. '&lt;tpl if=&quot;left&quot;&gt;&lt;/div&gt;&lt;/tpl&gt;',
  116. '&lt;/tpl&gt;',
  117. '{%this.renderDockedItems(out,values,1);%}'
  118. ],
  119. frameTableTpl: [
  120. '{%this.renderDockedItems(out,values,0);%}',
  121. '&lt;table&gt;&lt;tbody&gt;',
  122. '&lt;tpl if=&quot;top&quot;&gt;',
  123. '&lt;tr&gt;',
  124. '&lt;tpl if=&quot;left&quot;&gt;&lt;td id=&quot;{fgid}TL&quot; class=&quot;{frameCls}-tl {baseCls}-tl {baseCls}-{ui}-tl&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-tl&lt;/tpl&gt;&quot; style=&quot;background-position: {tl}; padding-left:{frameWidth}px&quot; role=&quot;presentation&quot;&gt;&lt;/td&gt;&lt;/tpl&gt;',
  125. '&lt;td id=&quot;{fgid}TC&quot; class=&quot;{frameCls}-tc {baseCls}-tc {baseCls}-{ui}-tc&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-tc&lt;/tpl&gt;&quot; style=&quot;background-position: {tc}; height: {frameWidth}px&quot; role=&quot;presentation&quot;&gt;&lt;/td&gt;',
  126. '&lt;tpl if=&quot;right&quot;&gt;&lt;td id=&quot;{fgid}TR&quot; class=&quot;{frameCls}-tr {baseCls}-tr {baseCls}-{ui}-tr&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-tr&lt;/tpl&gt;&quot; style=&quot;background-position: {tr}; padding-left: {frameWidth}px&quot; role=&quot;presentation&quot;&gt;&lt;/td&gt;&lt;/tpl&gt;',
  127. '&lt;/tr&gt;',
  128. '&lt;/tpl&gt;',
  129. '&lt;tr&gt;',
  130. '&lt;tpl if=&quot;left&quot;&gt;&lt;td id=&quot;{fgid}ML&quot; class=&quot;{frameCls}-ml {baseCls}-ml {baseCls}-{ui}-ml&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-ml&lt;/tpl&gt;&quot; style=&quot;background-position: {ml}; padding-left: {frameWidth}px&quot; role=&quot;presentation&quot;&gt;&lt;/td&gt;&lt;/tpl&gt;',
  131. '&lt;td id=&quot;{fgid}MC&quot; class=&quot;{frameCls}-mc {baseCls}-mc {baseCls}-{ui}-mc&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-mc&lt;/tpl&gt;&quot; style=&quot;background-position: 0 0;&quot; role=&quot;presentation&quot;&gt;',
  132. '{%this.applyRenderTpl(out, values)%}',
  133. '&lt;/td&gt;',
  134. '&lt;tpl if=&quot;right&quot;&gt;&lt;td id=&quot;{fgid}MR&quot; class=&quot;{frameCls}-mr {baseCls}-mr {baseCls}-{ui}-mr&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-mr&lt;/tpl&gt;&quot; style=&quot;background-position: {mr}; padding-left: {frameWidth}px&quot; role=&quot;presentation&quot;&gt;&lt;/td&gt;&lt;/tpl&gt;',
  135. '&lt;/tr&gt;',
  136. '&lt;tpl if=&quot;bottom&quot;&gt;',
  137. '&lt;tr&gt;',
  138. '&lt;tpl if=&quot;left&quot;&gt;&lt;td id=&quot;{fgid}BL&quot; class=&quot;{frameCls}-bl {baseCls}-bl {baseCls}-{ui}-bl&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-bl&lt;/tpl&gt;&quot; style=&quot;background-position: {bl}; padding-left: {frameWidth}px&quot; role=&quot;presentation&quot;&gt;&lt;/td&gt;&lt;/tpl&gt;',
  139. '&lt;td id=&quot;{fgid}BC&quot; class=&quot;{frameCls}-bc {baseCls}-bc {baseCls}-{ui}-bc&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-bc&lt;/tpl&gt;&quot; style=&quot;background-position: {bc}; height: {frameWidth}px&quot; role=&quot;presentation&quot;&gt;&lt;/td&gt;',
  140. '&lt;tpl if=&quot;right&quot;&gt;&lt;td id=&quot;{fgid}BR&quot; class=&quot;{frameCls}-br {baseCls}-br {baseCls}-{ui}-br&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-br&lt;/tpl&gt;&quot; style=&quot;background-position: {br}; padding-left: {frameWidth}px&quot; role=&quot;presentation&quot;&gt;&lt;/td&gt;&lt;/tpl&gt;',
  141. '&lt;/tr&gt;',
  142. '&lt;/tpl&gt;',
  143. '&lt;/tbody&gt;&lt;/table&gt;',
  144. '{%this.renderDockedItems(out,values,1);%}'
  145. ],
  146. <span id='Ext-util-Renderable-method-afterRender'> /**
  147. </span> * Allows addition of behavior after rendering is complete. At this stage the Component’s Element
  148. * will have been styled according to the configuration, will have had any configured CSS class
  149. * names added, and will be in the configured visibility and the configured enable state.
  150. *
  151. * @template
  152. * @protected
  153. */
  154. afterRender : function() {
  155. var me = this,
  156. data = {},
  157. protoEl = me.protoEl,
  158. target = me.getTargetEl(),
  159. item;
  160. me.finishRenderChildren();
  161. if (me.styleHtmlContent) {
  162. target.addCls(me.styleHtmlCls);
  163. }
  164. protoEl.writeTo(data);
  165. // Here we apply any styles that were set on the protoEl during the rendering phase
  166. // A majority of times this will not happen, but we still need to handle it
  167. item = data.removed;
  168. if (item) {
  169. target.removeCls(item);
  170. }
  171. item = data.cls;
  172. if (item.length) {
  173. target.addCls(item);
  174. }
  175. item = data.style;
  176. if (data.style) {
  177. target.setStyle(item);
  178. }
  179. me.protoEl = null;
  180. // If this is the outermost Container, lay it out as soon as it is rendered.
  181. if (!me.ownerCt) {
  182. me.updateLayout();
  183. }
  184. },
  185. afterFirstLayout : function(width, height) {
  186. var me = this,
  187. hasX = Ext.isDefined(me.x),
  188. hasY = Ext.isDefined(me.y),
  189. pos, xy;
  190. // For floaters, calculate x and y if they aren't defined by aligning
  191. // the sized element to the center of either the container or the ownerCt
  192. if (me.floating &amp;&amp; (!hasX || !hasY)) {
  193. if (me.floatParent) {
  194. pos = me.floatParent.getTargetEl().getViewRegion();
  195. xy = me.el.getAlignToXY(me.floatParent.getTargetEl(), 'c-c');
  196. pos.left = xy[0] - pos.left;
  197. pos.top = xy[1] - pos.top;
  198. } else {
  199. xy = me.el.getAlignToXY(me.container, 'c-c');
  200. pos = me.container.translatePoints(xy[0], xy[1]);
  201. }
  202. me.x = hasX ? me.x : pos.left;
  203. me.y = hasY ? me.y : pos.top;
  204. hasX = hasY = true;
  205. }
  206. if (hasX || hasY) {
  207. me.setPosition(me.x, me.y);
  208. }
  209. me.onBoxReady(width, height);
  210. if (me.hasListeners.boxready) {
  211. me.fireEvent('boxready', me, width, height);
  212. }
  213. },
  214. onBoxReady: Ext.emptyFn,
  215. <span id='Ext-util-Renderable-method-applyRenderSelectors'> /**
  216. </span> * Sets references to elements inside the component. This applies {@link Ext.AbstractComponent#cfg-renderSelectors renderSelectors}
  217. * as well as {@link Ext.AbstractComponent#cfg-childEls childEls}.
  218. * @private
  219. */
  220. applyRenderSelectors: function() {
  221. var me = this,
  222. selectors = me.renderSelectors,
  223. el = me.el,
  224. dom = el.dom,
  225. selector;
  226. me.applyChildEls(el);
  227. // We still support renderSelectors. There are a few places in the framework that
  228. // need them and they are a documented part of the API. In fact, we support mixing
  229. // childEls and renderSelectors (no reason not to).
  230. if (selectors) {
  231. for (selector in selectors) {
  232. if (selectors.hasOwnProperty(selector) &amp;&amp; selectors[selector]) {
  233. me[selector] = Ext.get(Ext.DomQuery.selectNode(selectors[selector], dom));
  234. }
  235. }
  236. }
  237. },
  238. beforeRender: function () {
  239. var me = this,
  240. target = me.getTargetEl(),
  241. layout = me.getComponentLayout();
  242. // Just before rendering, set the frame flag if we are an always-framed component like Window or Tip.
  243. me.frame = me.frame || me.alwaysFramed;
  244. if (!layout.initialized) {
  245. layout.initLayout();
  246. }
  247. // Attempt to set overflow style prior to render if the targetEl can be accessed.
  248. // If the targetEl does not exist yet, this will take place in finishRender
  249. if (target) {
  250. target.setStyle(me.getOverflowStyle());
  251. me.overflowStyleSet = true;
  252. }
  253. me.setUI(me.ui);
  254. if (me.disabled) {
  255. // pass silent so the event doesn't fire the first time.
  256. me.disable(true);
  257. }
  258. },
  259. <span id='Ext-util-Renderable-method-doApplyRenderTpl'> /**
  260. </span> * @private
  261. * Called from the selected frame generation template to insert this Component's inner structure inside the framing structure.
  262. *
  263. * When framing is used, a selected frame generation template is used as the primary template of the #getElConfig instead
  264. * of the configured {@link Ext.AbstractComponent#renderTpl renderTpl}. The renderTpl is invoked by this method which is injected into the framing template.
  265. */
  266. doApplyRenderTpl: function(out, values) {
  267. // Careful! This method is bolted on to the frameTpl so all we get for context is
  268. // the renderData! The &quot;this&quot; pointer is the frameTpl instance!
  269. var me = values.$comp,
  270. tpl;
  271. // Don't do this if the component is already rendered:
  272. if (!me.rendered) {
  273. tpl = me.initRenderTpl();
  274. tpl.applyOut(values.renderData, out);
  275. }
  276. },
  277. <span id='Ext-util-Renderable-method-doAutoRender'> /**
  278. </span> * Handles autoRender.
  279. * Floating Components may have an ownerCt. If they are asking to be constrained, constrain them within that
  280. * ownerCt, and have their z-index managed locally. Floating Components are always rendered to document.body
  281. */
  282. doAutoRender: function() {
  283. var me = this;
  284. if (!me.rendered) {
  285. if (me.floating) {
  286. me.render(document.body);
  287. } else {
  288. me.render(Ext.isBoolean(me.autoRender) ? Ext.getBody() : me.autoRender);
  289. }
  290. }
  291. },
  292. doRenderContent: function (out, renderData) {
  293. // Careful! This method is bolted on to the renderTpl so all we get for context is
  294. // the renderData! The &quot;this&quot; pointer is the renderTpl instance!
  295. var me = renderData.$comp;
  296. if (me.html) {
  297. Ext.DomHelper.generateMarkup(me.html, out);
  298. delete me.html;
  299. }
  300. if (me.tpl) {
  301. // Make sure this.tpl is an instantiated XTemplate
  302. if (!me.tpl.isTemplate) {
  303. me.tpl = new Ext.XTemplate(me.tpl);
  304. }
  305. if (me.data) {
  306. //me.tpl[me.tplWriteMode](target, me.data);
  307. me.tpl.applyOut(me.data, out);
  308. delete me.data;
  309. }
  310. }
  311. },
  312. doRenderFramingDockedItems: function (out, renderData, after) {
  313. // Careful! This method is bolted on to the frameTpl so all we get for context is
  314. // the renderData! The &quot;this&quot; pointer is the frameTpl instance!
  315. var me = renderData.$comp;
  316. // Most components don't have dockedItems, so check for doRenderDockedItems on the
  317. // component (also, don't do this if the component is already rendered):
  318. if (!me.rendered &amp;&amp; me.doRenderDockedItems) {
  319. // The &quot;renderData&quot; property is placed in scope for the renderTpl, but we don't
  320. // want to render docked items at that level in addition to the framing level:
  321. renderData.renderData.$skipDockedItems = true;
  322. // doRenderDockedItems requires the $comp property on renderData, but this is
  323. // set on the frameTpl's renderData as well:
  324. me.doRenderDockedItems.call(this, out, renderData, after);
  325. }
  326. },
  327. <span id='Ext-util-Renderable-method-finishRender'> /**
  328. </span> * This method visits the rendered component tree in a &quot;top-down&quot; order. That is, this
  329. * code runs on a parent component before running on a child. This method calls the
  330. * {@link #onRender} method of each component.
  331. * @param {Number} containerIdx The index into the Container items of this Component.
  332. *
  333. * @private
  334. */
  335. finishRender: function(containerIdx) {
  336. var me = this,
  337. tpl, data, contentEl, el, pre, hide;
  338. // We are typically called w/me.el==null as a child of some ownerCt that is being
  339. // rendered. We are also called by render for a normal component (w/o a configured
  340. // me.el). In this case, render sets me.el and me.rendering (indirectly). Lastly
  341. // we are also called on a component (like a Viewport) that has a configured me.el
  342. // (body for a Viewport) when render is called. In this case, it is not flagged as
  343. // &quot;me.rendering&quot; yet becasue it does not produce a renderTree. We use this to know
  344. // not to regen the renderTpl.
  345. if (!me.el || me.$pid) {
  346. if (me.container) {
  347. el = me.container.getById(me.id, true);
  348. } else {
  349. el = Ext.getDom(me.id);
  350. }
  351. if (!me.el) {
  352. // Typical case: we produced the el during render
  353. me.wrapPrimaryEl(el);
  354. } else {
  355. // We were configured with an el and created a proxy, so now we can swap
  356. // the proxy for me.el:
  357. delete me.$pid;
  358. if (!me.el.dom) {
  359. // make sure me.el is an Element
  360. me.wrapPrimaryEl(me.el);
  361. }
  362. el.parentNode.insertBefore(me.el.dom, el);
  363. Ext.removeNode(el); // remove placeholder el
  364. // TODO - what about class/style?
  365. }
  366. } else if (!me.rendering) {
  367. // We were configured with an el and then told to render (e.g., Viewport). We
  368. // need to generate the proper DOM. Insert first because the layout system
  369. // insists that child Component elements indices match the Component indices.
  370. tpl = me.initRenderTpl();
  371. if (tpl) {
  372. data = me.initRenderData();
  373. tpl.insertFirst(me.getTargetEl(), data);
  374. }
  375. }
  376. // else we are rendering
  377. if (!me.container) {
  378. // top-level rendered components will already have me.container set up
  379. me.container = Ext.get(me.el.dom.parentNode);
  380. }
  381. if (me.ctCls) {
  382. me.container.addCls(me.ctCls);
  383. }
  384. // Sets the rendered flag and clears the redering flag
  385. me.onRender(me.container, containerIdx);
  386. // If we could not access a target protoEl in bewforeRender, we have to set the overflow styles here.
  387. if (!me.overflowStyleSet) {
  388. me.getTargetEl().setStyle(me.getOverflowStyle());
  389. }
  390. // Tell the encapsulating element to hide itself in the way the Component is configured to hide
  391. // This means DISPLAY, VISIBILITY or OFFSETS.
  392. me.el.setVisibilityMode(Ext.Element[me.hideMode.toUpperCase()]);
  393. if (me.overCls) {
  394. me.el.hover(me.addOverCls, me.removeOverCls, me);
  395. }
  396. if (me.hasListeners.render) {
  397. me.fireEvent('render', me);
  398. }
  399. if (me.contentEl) {
  400. pre = Ext.baseCSSPrefix;
  401. hide = pre + 'hide-';
  402. contentEl = Ext.get(me.contentEl);
  403. contentEl.removeCls([pre+'hidden', hide+'display', hide+'offsets', hide+'nosize']);
  404. me.getTargetEl().appendChild(contentEl.dom);
  405. }
  406. me.afterRender(); // this can cause a layout
  407. if (me.hasListeners.afterrender) {
  408. me.fireEvent('afterrender', me);
  409. }
  410. me.initEvents();
  411. if (me.hidden) {
  412. // Hiding during the render process should not perform any ancillary
  413. // actions that the full hide process does; It is not hiding, it begins in a hidden state.'
  414. // So just make the element hidden according to the configured hideMode
  415. me.el.hide();
  416. }
  417. },
  418. finishRenderChildren: function () {
  419. var layout = this.getComponentLayout();
  420. layout.finishRender();
  421. },
  422. getElConfig : function() {
  423. var me = this,
  424. autoEl = me.autoEl,
  425. frameInfo = me.getFrameInfo(),
  426. config = {
  427. tag: 'div',
  428. tpl: frameInfo ? me.initFramingTpl(frameInfo.table) : me.initRenderTpl()
  429. },
  430. i, frameElNames, len, suffix, frameGenId;
  431. me.initStyles(me.protoEl);
  432. me.protoEl.writeTo(config);
  433. me.protoEl.flush();
  434. if (Ext.isString(autoEl)) {
  435. config.tag = autoEl;
  436. } else {
  437. Ext.apply(config, autoEl); // harmless if !autoEl
  438. }
  439. // It's important to assign the id here as an autoEl.id could have been (wrongly) applied and this would get things out of sync
  440. config.id = me.id;
  441. if (config.tpl) {
  442. // Use the framingTpl as the main content creating template. It will call out to this.applyRenderTpl(out, values)
  443. if (frameInfo) {
  444. frameElNames = me.frameElNames;
  445. len = frameElNames.length;
  446. frameGenId = me.id + '-frame1';
  447. me.frameGenId = 1;
  448. config.tplData = Ext.apply({}, {
  449. $comp: me,
  450. fgid: frameGenId,
  451. ui: me.ui,
  452. uiCls: me.uiCls,
  453. frameCls: me.frameCls,
  454. baseCls: me.baseCls,
  455. frameWidth: frameInfo.maxWidth,
  456. top: !!frameInfo.top,
  457. left: !!frameInfo.left,
  458. right: !!frameInfo.right,
  459. bottom: !!frameInfo.bottom,
  460. renderData: me.initRenderData()
  461. }, me.getFramePositions(frameInfo));
  462. // Add the childEls for each of the frame elements
  463. for (i = 0; i &lt; len; i++) {
  464. suffix = frameElNames[i];
  465. me.addChildEls({ name: 'frame' + suffix, id: frameGenId + suffix });
  466. }
  467. // Panel must have a frameBody
  468. me.addChildEls({
  469. name: 'frameBody',
  470. id: frameGenId + 'MC'
  471. });
  472. } else {
  473. config.tplData = me.initRenderData();
  474. }
  475. }
  476. return config;
  477. },
  478. // Create the framingTpl from the string.
  479. // Poke in a reference to applyRenderTpl(frameInfo, out)
  480. initFramingTpl: function(table) {
  481. var tpl = table ? this.getTpl('frameTableTpl') : this.getTpl('frameTpl');
  482. if (tpl &amp;&amp; !tpl.applyRenderTpl) {
  483. this.setupFramingTpl(tpl);
  484. }
  485. return tpl;
  486. },
  487. <span id='Ext-util-Renderable-method-setupFramingTpl'> /**
  488. </span> * @private
  489. * Inject a reference to the function which applies the render template into the framing template. The framing template
  490. * wraps the content.
  491. */
  492. setupFramingTpl: function(frameTpl) {
  493. frameTpl.applyRenderTpl = this.doApplyRenderTpl;
  494. frameTpl.renderDockedItems = this.doRenderFramingDockedItems;
  495. },
  496. <span id='Ext-util-Renderable-method-getInsertPosition'> /**
  497. </span> * This function takes the position argument passed to onRender and returns a
  498. * DOM element that you can use in the insertBefore.
  499. * @param {String/Number/Ext.dom.Element/HTMLElement} position Index, element id or element you want
  500. * to put this component before.
  501. * @return {HTMLElement} DOM element that you can use in the insertBefore
  502. */
  503. getInsertPosition: function(position) {
  504. // Convert the position to an element to insert before
  505. if (position !== undefined) {
  506. if (Ext.isNumber(position)) {
  507. position = this.container.dom.childNodes[position];
  508. }
  509. else {
  510. position = Ext.getDom(position);
  511. }
  512. }
  513. return position;
  514. },
  515. getRenderTree: function() {
  516. var me = this;
  517. if (!me.hasListeners.beforerender || me.fireEvent('beforerender', me) !== false) {
  518. me.beforeRender();
  519. // Flag to let the layout's finishRenderItems and afterFinishRenderItems
  520. // know which items to process
  521. me.rendering = true;
  522. if (me.el) {
  523. // Since we are producing a render tree, we produce a &quot;proxy el&quot; that will
  524. // sit in the rendered DOM precisely where me.el belongs. We replace the
  525. // proxy el in the finishRender phase.
  526. return {
  527. tag: 'div',
  528. id: (me.$pid = Ext.id())
  529. };
  530. }
  531. return me.getElConfig();
  532. }
  533. return null;
  534. },
  535. initContainer: function(container) {
  536. var me = this;
  537. // If you render a component specifying the el, we get the container
  538. // of the el, and make sure we dont move the el around in the dom
  539. // during the render
  540. if (!container &amp;&amp; me.el) {
  541. container = me.el.dom.parentNode;
  542. me.allowDomMove = false;
  543. }
  544. me.container = container.dom ? container : Ext.get(container);
  545. return me.container;
  546. },
  547. <span id='Ext-util-Renderable-method-initRenderData'> /**
  548. </span> * Initialized the renderData to be used when rendering the renderTpl.
  549. * @return {Object} Object with keys and values that are going to be applied to the renderTpl
  550. * @private
  551. */
  552. initRenderData: function() {
  553. var me = this;
  554. return Ext.apply({
  555. $comp: me,
  556. id: me.id,
  557. ui: me.ui,
  558. uiCls: me.uiCls,
  559. baseCls: me.baseCls,
  560. componentCls: me.componentCls,
  561. frame: me.frame
  562. }, me.renderData);
  563. },
  564. <span id='Ext-util-Renderable-method-initRenderTpl'> /**
  565. </span> * Initializes the renderTpl.
  566. * @return {Ext.XTemplate} The renderTpl XTemplate instance.
  567. * @private
  568. */
  569. initRenderTpl: function() {
  570. var tpl = this.getTpl('renderTpl');
  571. if (tpl &amp;&amp; !tpl.renderContent) {
  572. this.setupRenderTpl(tpl);
  573. }
  574. return tpl;
  575. },
  576. <span id='Ext-util-Renderable-method-onRender'> /**
  577. </span> * Template method called when this Component's DOM structure is created.
  578. *
  579. * At this point, this Component's (and all descendants') DOM structure *exists* but it has not
  580. * been layed out (positioned and sized).
  581. *
  582. * Subclasses which override this to gain access to the structure at render time should
  583. * call the parent class's method before attempting to access any child elements of the Component.
  584. *
  585. * @param {Ext.core.Element} parentNode The parent Element in which this Component's encapsulating element is contained.
  586. * @param {Number} containerIdx The index within the parent Container's child collection of this Component.
  587. *
  588. * @template
  589. * @protected
  590. */
  591. onRender: function(parentNode, containerIdx) {
  592. var me = this,
  593. x = me.x,
  594. y = me.y,
  595. lastBox, width, height,
  596. el = me.el,
  597. body = Ext.getBody().dom;
  598. // Wrap this Component in a reset wraper if necessary
  599. if (Ext.scopeResetCSS &amp;&amp; !me.ownerCt) {
  600. // If this component's el is the body element, we add the reset class to the html tag
  601. if (el.dom === body) {
  602. el.parent().addCls(Ext.resetCls);
  603. }
  604. // Otherwise, we ensure that there is a wrapper which has the reset class
  605. else {
  606. // Floaters rendered into the body can all be bumped into the common reset element
  607. if (me.floating &amp;&amp; me.el.dom.parentNode === body) {
  608. Ext.resetElement.appendChild(me.el);
  609. }
  610. // Else we wrap this element in an element that adds the reset class.
  611. else {
  612. // Wrap this Component's DOM with a reset structure as determined in EventManager's initExtCss closure.
  613. me.resetEl = el.wrap(Ext.resetElementSpec, false, Ext.supports.CSS3LinearGradient ? undefined : '*');
  614. }
  615. }
  616. }
  617. me.applyRenderSelectors();
  618. // Flag set on getRenderTree to flag to the layout's postprocessing routine that
  619. // the Component is in the process of being rendered and needs postprocessing.
  620. delete me.rendering;
  621. me.rendered = true;
  622. // We need to remember these to avoid writing them during the initial layout:
  623. lastBox = null;
  624. if (x !== undefined) {
  625. lastBox = lastBox || {};
  626. lastBox.x = x;
  627. }
  628. if (y !== undefined) {
  629. lastBox = lastBox || {};
  630. lastBox.y = y;
  631. }
  632. // Framed components need their width/height to apply to the frame, which is
  633. // best handled in layout at present.
  634. // If we're using the content box model, we also cannot assign initial sizes since we do not know the border widths to subtract
  635. if (!me.getFrameInfo() &amp;&amp; Ext.isBorderBox) {
  636. width = me.width;
  637. height = me.height;
  638. if (typeof width == 'number') {
  639. lastBox = lastBox || {};
  640. lastBox.width = width;
  641. }
  642. if (typeof height == 'number') {
  643. lastBox = lastBox || {};
  644. lastBox.height = height;
  645. }
  646. }
  647. me.lastBox = me.el.lastBox = lastBox;
  648. },
  649. <span id='Ext-util-Renderable-method-render'> /**
  650. </span> * Renders the Component into the passed HTML element.
  651. *
  652. * **If you are using a {@link Ext.container.Container Container} object to house this
  653. * Component, then do not use the render method.**
  654. *
  655. * A Container's child Components are rendered by that Container's
  656. * {@link Ext.container.Container#layout layout} manager when the Container is first rendered.
  657. *
  658. * If the Container is already rendered when a new child Component is added, you may need to call
  659. * the Container's {@link Ext.container.Container#doLayout doLayout} to refresh the view which
  660. * causes any unrendered child Components to be rendered. This is required so that you can add
  661. * multiple child components if needed while only refreshing the layout once.
  662. *
  663. * When creating complex UIs, it is important to remember that sizing and positioning
  664. * of child items is the responsibility of the Container's {@link Ext.container.Container#layout layout}
  665. * manager. If you expect child items to be sized in response to user interactions, you must
  666. * configure the Container with a layout manager which creates and manages the type of layout you
  667. * have in mind.
  668. *
  669. * **Omitting the Container's {@link Ext.Container#layout layout} config means that a basic
  670. * layout manager is used which does nothing but render child components sequentially into the
  671. * Container. No sizing or positioning will be performed in this situation.**
  672. *
  673. * @param {Ext.Element/HTMLElement/String} [container] The element this Component should be
  674. * rendered into. If it is being created from existing markup, this should be omitted.
  675. * @param {String/Number} [position] The element ID or DOM node index within the container **before**
  676. * which this component will be inserted (defaults to appending to the end of the container)
  677. */
  678. render: function(container, position) {
  679. var me = this,
  680. el = me.el &amp;&amp; (me.el = Ext.get(me.el)), // ensure me.el is wrapped
  681. vetoed,
  682. tree,
  683. nextSibling;
  684. Ext.suspendLayouts();
  685. container = me.initContainer(container);
  686. nextSibling = me.getInsertPosition(position);
  687. if (!el) {
  688. tree = me.getRenderTree();
  689. if (me.ownerLayout &amp;&amp; me.ownerLayout.transformItemRenderTree) {
  690. tree = me.ownerLayout.transformItemRenderTree(tree);
  691. }
  692. // tree will be null if a beforerender listener returns false
  693. if (tree) {
  694. if (nextSibling) {
  695. el = Ext.DomHelper.insertBefore(nextSibling, tree);
  696. } else {
  697. el = Ext.DomHelper.append(container, tree);
  698. }
  699. me.wrapPrimaryEl(el);
  700. }
  701. } else {
  702. if (!me.hasListeners.beforerender || me.fireEvent('beforerender', me) !== false) {
  703. // Set configured styles on pre-rendered Component's element
  704. me.initStyles(el);
  705. if (me.allowDomMove !== false) {
  706. //debugger; // TODO
  707. if (nextSibling) {
  708. container.dom.insertBefore(el.dom, nextSibling);
  709. } else {
  710. container.dom.appendChild(el.dom);
  711. }
  712. }
  713. } else {
  714. vetoed = true;
  715. }
  716. }
  717. if (el &amp;&amp; !vetoed) {
  718. me.finishRender(position);
  719. }
  720. Ext.resumeLayouts(!container.isDetachedBody);
  721. },
  722. <span id='Ext-util-Renderable-method-ensureAttachedToBody'> /**
  723. </span> * Ensures that this component is attached to `document.body`. If the component was
  724. * rendered to {@link Ext#getDetachedBody}, then it will be appended to `document.body`.
  725. * Any configured position is also restored.
  726. * @param {Boolean} [runLayout=false] True to run the component's layout.
  727. */
  728. ensureAttachedToBody: function (runLayout) {
  729. var comp = this,
  730. body;
  731. while (comp.ownerCt) {
  732. comp = comp.ownerCt;
  733. }
  734. if (comp.container.isDetachedBody) {
  735. comp.container = body = Ext.resetElement;
  736. body.appendChild(comp.el.dom);
  737. if (runLayout) {
  738. comp.updateLayout();
  739. }
  740. if (typeof comp.x == 'number' || typeof comp.y == 'number') {
  741. comp.setPosition(comp.x, comp.y);
  742. }
  743. }
  744. },
  745. setupRenderTpl: function (renderTpl) {
  746. renderTpl.renderBody = renderTpl.renderContent = this.doRenderContent;
  747. },
  748. wrapPrimaryEl: function (dom) {
  749. this.el = Ext.get(dom, true);
  750. },
  751. <span id='Ext-util-Renderable-method-initFrame'> /**
  752. </span> * @private
  753. */
  754. initFrame : function() {
  755. if (Ext.supports.CSS3BorderRadius || !this.frame) {
  756. return;
  757. }
  758. var me = this,
  759. frameInfo = me.getFrameInfo(),
  760. frameWidth, frameTpl, frameGenId,
  761. i,
  762. frameElNames = me.frameElNames,
  763. len = frameElNames.length,
  764. suffix;
  765. if (frameInfo) {
  766. frameWidth = frameInfo.maxWidth;
  767. frameTpl = me.getFrameTpl(frameInfo.table);
  768. // since we render id's into the markup and id's NEED to be unique, we have a
  769. // simple strategy for numbering their generations.
  770. me.frameGenId = frameGenId = (me.frameGenId || 0) + 1;
  771. frameGenId = me.id + '-frame' + frameGenId;
  772. // Here we render the frameTpl to this component. This inserts the 9point div or the table framing.
  773. frameTpl.insertFirst(me.el, Ext.apply({
  774. $comp: me,
  775. fgid: frameGenId,
  776. ui: me.ui,
  777. uiCls: me.uiCls,
  778. frameCls: me.frameCls,
  779. baseCls: me.baseCls,
  780. frameWidth: frameWidth,
  781. top: !!frameInfo.top,
  782. left: !!frameInfo.left,
  783. right: !!frameInfo.right,
  784. bottom: !!frameInfo.bottom
  785. }, me.getFramePositions(frameInfo)));
  786. // The frameBody is returned in getTargetEl, so that layouts render items to the correct target.
  787. me.frameBody = me.el.down('.' + me.frameCls + '-mc');
  788. // Clean out the childEls for the old frame elements (the majority of the els)
  789. me.removeChildEls(function (c) {
  790. return c.id &amp;&amp; me.frameIdRegex.test(c.id);
  791. });
  792. // Grab references to the childEls for each of the new frame elements
  793. for (i = 0; i &lt; len; i++) {
  794. suffix = frameElNames[i];
  795. me['frame' + suffix] = me.el.getById(frameGenId + suffix);
  796. }
  797. }
  798. },
  799. updateFrame: function() {
  800. if (Ext.supports.CSS3BorderRadius || !this.frame) {
  801. return;
  802. }
  803. var me = this,
  804. wasTable = this.frameSize &amp;&amp; this.frameSize.table,
  805. oldFrameTL = this.frameTL,
  806. oldFrameBL = this.frameBL,
  807. oldFrameML = this.frameML,
  808. oldFrameMC = this.frameMC,
  809. newMCClassName;
  810. this.initFrame();
  811. if (oldFrameMC) {
  812. if (me.frame) {
  813. // Store the class names set on the new MC
  814. newMCClassName = this.frameMC.dom.className;
  815. // Framing elements have been selected in initFrame, no need to run applyRenderSelectors
  816. // Replace the new mc with the old mc
  817. oldFrameMC.insertAfter(this.frameMC);
  818. this.frameMC.remove();
  819. // Restore the reference to the old frame mc as the framebody
  820. this.frameBody = this.frameMC = oldFrameMC;
  821. // Apply the new mc classes to the old mc element
  822. oldFrameMC.dom.className = newMCClassName;
  823. // Remove the old framing
  824. if (wasTable) {
  825. me.el.query('&gt; table')[1].remove();
  826. }
  827. else {
  828. if (oldFrameTL) {
  829. oldFrameTL.remove();
  830. }
  831. if (oldFrameBL) {
  832. oldFrameBL.remove();
  833. }
  834. if (oldFrameML) {
  835. oldFrameML.remove();
  836. }
  837. }
  838. }
  839. }
  840. else if (me.frame) {
  841. this.applyRenderSelectors();
  842. }
  843. },
  844. <span id='Ext-util-Renderable-method-getFrameInfo'> /**
  845. </span> * @private
  846. * On render, reads an encoded style attribute, &quot;background-position&quot; from the style of this Component's element.
  847. * This information is memoized based upon the CSS class name of this Component's element.
  848. * Because child Components are rendered as textual HTML as part of the topmost Container, a dummy div is inserted
  849. * into the document to receive the document element's CSS class name, and therefore style attributes.
  850. */
  851. getFrameInfo: function() {
  852. // If native framing can be used, or this component is not going to be framed, then do not attempt to read CSS framing info.
  853. if (Ext.supports.CSS3BorderRadius || !this.frame) {
  854. return false;
  855. }
  856. var me = this,
  857. frameInfoCache = me.frameInfoCache,
  858. el = me.el || me.protoEl,
  859. cls = el.dom ? el.dom.className : el.classList.join(' '),
  860. frameInfo = frameInfoCache[cls],
  861. styleEl, left, top, info;
  862. if (frameInfo == null) {
  863. // Get the singleton frame style proxy with our el class name stamped into it.
  864. styleEl = Ext.fly(me.getStyleProxy(cls), 'frame-style-el');
  865. left = styleEl.getStyle('background-position-x');
  866. top = styleEl.getStyle('background-position-y');
  867. // Some browsers don't support background-position-x and y, so for those
  868. // browsers let's split background-position into two parts.
  869. if (!left &amp;&amp; !top) {
  870. info = styleEl.getStyle('background-position').split(' ');
  871. left = info[0];
  872. top = info[1];
  873. }
  874. frameInfo = me.calculateFrame(left, top);
  875. if (frameInfo) {
  876. // Just to be sure we set the background image of the el to none.
  877. el.setStyle('background-image', 'none');
  878. }
  879. //&lt;debug error&gt;
  880. // This happens when you set frame: true explicitly without using the x-frame mixin in sass.
  881. // This way IE can't figure out what sizes to use and thus framing can't work.
  882. if (me.frame === true &amp;&amp; !frameInfo) {
  883. Ext.log.error('You have set frame: true explicity on this component (' + me.getXType() + ') and it ' +
  884. 'does not have any framing defined in the CSS template. In this case IE cannot figure out ' +
  885. 'what sizes to use and thus framing on this component will be disabled.');
  886. }
  887. //&lt;/debug&gt;
  888. frameInfoCache[cls] = frameInfo;
  889. }
  890. me.frame = !!frameInfo;
  891. me.frameSize = frameInfo;
  892. return frameInfo;
  893. },
  894. calculateFrame: function(left, top){
  895. // We actually pass a string in the form of '[type][tl][tr]px [direction][br][bl]px' as
  896. // the background position of this.el from the CSS to indicate to IE that this component needs
  897. // framing. We parse it here.
  898. if (!(parseInt(left, 10) &gt;= 1000000 &amp;&amp; parseInt(top, 10) &gt;= 1000000)) {
  899. return false;
  900. }
  901. var max = Math.max,
  902. tl = parseInt(left.substr(3, 2), 10),
  903. tr = parseInt(left.substr(5, 2), 10),
  904. br = parseInt(top.substr(3, 2), 10),
  905. bl = parseInt(top.substr(5, 2), 10),
  906. frameInfo = {
  907. // Table markup starts with 110, div markup with 100.
  908. table: left.substr(0, 3) == '110',
  909. // Determine if we are dealing with a horizontal or vertical component
  910. vertical: top.substr(0, 3) == '110',
  911. // Get and parse the different border radius sizes
  912. top: max(tl, tr),
  913. right: max(tr, br),
  914. bottom: max(bl, br),
  915. left: max(tl, bl)
  916. };
  917. frameInfo.maxWidth = max(frameInfo.top, frameInfo.right, frameInfo.bottom, frameInfo.left);
  918. frameInfo.width = frameInfo.left + frameInfo.right;
  919. frameInfo.height = frameInfo.top + frameInfo.bottom;
  920. return frameInfo;
  921. },
  922. <span id='Ext-util-Renderable-method-getStyleProxy'> /**
  923. </span> * @private
  924. * Returns an offscreen div with the same class name as the element this is being rendered.
  925. * This is because child item rendering takes place in a detached div which, being not part of the document, has no styling.
  926. */
  927. getStyleProxy: function(cls) {
  928. var result = this.styleProxyEl || (Ext.AbstractComponent.prototype.styleProxyEl = Ext.resetElement.createChild({
  929. style: {
  930. position: 'absolute',
  931. top: '-10000px'
  932. }
  933. }, null, true));
  934. result.className = cls;
  935. return result;
  936. },
  937. getFramePositions: function(frameInfo) {
  938. var me = this,
  939. frameWidth = frameInfo.maxWidth,
  940. dock = me.dock,
  941. positions, tc, bc, ml, mr;
  942. if (frameInfo.vertical) {
  943. tc = '0 -' + (frameWidth * 0) + 'px';
  944. bc = '0 -' + (frameWidth * 1) + 'px';
  945. if (dock &amp;&amp; dock == &quot;right&quot;) {
  946. tc = 'right -' + (frameWidth * 0) + 'px';
  947. bc = 'right -' + (frameWidth * 1) + 'px';
  948. }
  949. positions = {
  950. tl: '0 -' + (frameWidth * 0) + 'px',
  951. tr: '0 -' + (frameWidth * 1) + 'px',
  952. bl: '0 -' + (frameWidth * 2) + 'px',
  953. br: '0 -' + (frameWidth * 3) + 'px',
  954. ml: '-' + (frameWidth * 1) + 'px 0',
  955. mr: 'right 0',
  956. tc: tc,
  957. bc: bc
  958. };
  959. } else {
  960. ml = '-' + (frameWidth * 0) + 'px 0';
  961. mr = 'right 0';
  962. if (dock &amp;&amp; dock == &quot;bottom&quot;) {
  963. ml = 'left bottom';
  964. mr = 'right bottom';
  965. }
  966. positions = {
  967. tl: '0 -' + (frameWidth * 2) + 'px',
  968. tr: 'right -' + (frameWidth * 3) + 'px',
  969. bl: '0 -' + (frameWidth * 4) + 'px',
  970. br: 'right -' + (frameWidth * 5) + 'px',
  971. ml: ml,
  972. mr: mr,
  973. tc: '0 -' + (frameWidth * 0) + 'px',
  974. bc: '0 -' + (frameWidth * 1) + 'px'
  975. };
  976. }
  977. return positions;
  978. },
  979. <span id='Ext-util-Renderable-method-getFrameTpl'> /**
  980. </span> * @private
  981. */
  982. getFrameTpl : function(table) {
  983. return this.getTpl(table ? 'frameTableTpl' : 'frameTpl');
  984. },
  985. // Cache the frame information object so as not to cause style recalculations
  986. frameInfoCache: {}
  987. });
  988. </pre>
  989. </body>
  990. </html>