Absolute.html 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  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-layout-container-Absolute'>/**
  19. </span> * This is a layout that inherits the anchoring of {@link Ext.layout.container.Anchor} and adds the
  20. * ability for x/y positioning using the standard x and y component config options.
  21. *
  22. * This class is intended to be extended or created via the {@link Ext.container.Container#layout layout}
  23. * configuration property. See {@link Ext.container.Container#layout} for additional details.
  24. *
  25. * @example
  26. * Ext.create('Ext.form.Panel', {
  27. * title: 'Absolute Layout',
  28. * width: 300,
  29. * height: 275,
  30. * layout: {
  31. * type: 'absolute'
  32. * // layout-specific configs go here
  33. * //itemCls: 'x-abs-layout-item',
  34. * },
  35. * url:'save-form.php',
  36. * defaultType: 'textfield',
  37. * items: [{
  38. * x: 10,
  39. * y: 10,
  40. * xtype:'label',
  41. * text: 'Send To:'
  42. * },{
  43. * x: 80,
  44. * y: 10,
  45. * name: 'to',
  46. * anchor:'90%' // anchor width by percentage
  47. * },{
  48. * x: 10,
  49. * y: 40,
  50. * xtype:'label',
  51. * text: 'Subject:'
  52. * },{
  53. * x: 80,
  54. * y: 40,
  55. * name: 'subject',
  56. * anchor: '90%' // anchor width by percentage
  57. * },{
  58. * x:0,
  59. * y: 80,
  60. * xtype: 'textareafield',
  61. * name: 'msg',
  62. * anchor: '100% 100%' // anchor width and height
  63. * }],
  64. * renderTo: Ext.getBody()
  65. * });
  66. */
  67. Ext.define('Ext.layout.container.Absolute', {
  68. /* Begin Definitions */
  69. alias: 'layout.absolute',
  70. extend: 'Ext.layout.container.Anchor',
  71. alternateClassName: 'Ext.layout.AbsoluteLayout',
  72. /* End Definitions */
  73. targetCls: Ext.baseCSSPrefix + 'abs-layout-ct',
  74. itemCls: Ext.baseCSSPrefix + 'abs-layout-item',
  75. <span id='Ext-layout-container-Absolute-cfg-ignoreOnContentChange'> /**
  76. </span> * @cfg {Boolean} ignoreOnContentChange
  77. * True indicates that changes to one item in this layout do not effect the layout in
  78. * general. This may need to be set to false if {@link Ext.Component#autoScroll}
  79. * is enabled for the container.
  80. */
  81. ignoreOnContentChange: true,
  82. type: 'absolute',
  83. // private
  84. adjustWidthAnchor: function(value, childContext) {
  85. var padding = this.targetPadding,
  86. x = childContext.getStyle('left');
  87. return value - x + padding.left;
  88. },
  89. // private
  90. adjustHeightAnchor: function(value, childContext) {
  91. var padding = this.targetPadding,
  92. y = childContext.getStyle('top');
  93. return value - y + padding.top;
  94. },
  95. isItemLayoutRoot: function (item) {
  96. return this.ignoreOnContentChange || this.callParent(arguments);
  97. },
  98. isItemShrinkWrap: function (item) {
  99. return true;
  100. },
  101. beginLayout: function (ownerContext) {
  102. var me = this,
  103. target = me.getTarget();
  104. me.callParent(arguments);
  105. // Do not set position: relative; when the absolute layout target is the body
  106. if (target.dom !== document.body) {
  107. target.position();
  108. }
  109. me.targetPadding = ownerContext.targetContext.getPaddingInfo();
  110. },
  111. isItemBoxParent: function (itemContext) {
  112. return true;
  113. },
  114. onContentChange: function () {
  115. if (this.ignoreOnContentChange) {
  116. return false;
  117. }
  118. return this.callParent(arguments);
  119. }
  120. });
  121. </pre>
  122. </body>
  123. </html>