/ext-4.1.0_b3/src/layout/container/Absolute.js

https://bitbucket.org/srogerf/javascript · JavaScript · 129 lines · 47 code · 19 blank · 63 comment · 5 complexity · 6c23af75974ebb1254289daca95f2453 MD5 · raw file

  1. /**
  2. * This is a layout that inherits the anchoring of {@link Ext.layout.container.Anchor} and adds the
  3. * ability for x/y positioning using the standard x and y component config options.
  4. *
  5. * This class is intended to be extended or created via the {@link Ext.container.Container#layout layout}
  6. * configuration property. See {@link Ext.container.Container#layout} for additional details.
  7. *
  8. * @example
  9. * Ext.create('Ext.form.Panel', {
  10. * title: 'Absolute Layout',
  11. * width: 300,
  12. * height: 275,
  13. * layout: {
  14. * type: 'absolute',
  15. * // layout-specific configs go here
  16. * //itemCls: 'x-abs-layout-item',
  17. * },
  18. * url:'save-form.php',
  19. * defaultType: 'textfield',
  20. * items: [{
  21. * x: 10,
  22. * y: 10,
  23. * xtype:'label',
  24. * text: 'Send To:'
  25. * },{
  26. * x: 80,
  27. * y: 10,
  28. * name: 'to',
  29. * anchor:'90%' // anchor width by percentage
  30. * },{
  31. * x: 10,
  32. * y: 40,
  33. * xtype:'label',
  34. * text: 'Subject:'
  35. * },{
  36. * x: 80,
  37. * y: 40,
  38. * name: 'subject',
  39. * anchor: '90%' // anchor width by percentage
  40. * },{
  41. * x:0,
  42. * y: 80,
  43. * xtype: 'textareafield',
  44. * name: 'msg',
  45. * anchor: '100% 100%' // anchor width and height
  46. * }],
  47. * renderTo: Ext.getBody()
  48. * });
  49. */
  50. Ext.define('Ext.layout.container.Absolute', {
  51. /* Begin Definitions */
  52. alias: 'layout.absolute',
  53. extend: 'Ext.layout.container.Anchor',
  54. alternateClassName: 'Ext.layout.AbsoluteLayout',
  55. /* End Definitions */
  56. targetCls: Ext.baseCSSPrefix + 'abs-layout-ct',
  57. itemCls: Ext.baseCSSPrefix + 'abs-layout-item',
  58. /**
  59. * @cfg {Boolean} ignoreOnContentChange
  60. * True indicates that changes to one item in this layout do not effect the layout in
  61. * general. This may need to be set to false if {@link Ext.AbstractComponent#autoScroll}
  62. * is enabled for the container.
  63. */
  64. ignoreOnContentChange: true,
  65. type: 'absolute',
  66. // private
  67. adjustWidthAnchor: function(value, childContext) {
  68. var padding = this.targetPadding,
  69. x = childContext.getStyle('left');
  70. return value - x + padding.left;
  71. },
  72. // private
  73. adjustHeightAnchor: function(value, childContext) {
  74. var padding = this.targetPadding,
  75. y = childContext.getStyle('top');
  76. return value - y + padding.top;
  77. },
  78. isItemLayoutRoot: function (item) {
  79. return this.ignoreOnContentChange || this.callParent(arguments);
  80. },
  81. isItemShrinkWrap: function (item) {
  82. return true;
  83. },
  84. // private
  85. isValidParent : function(item, target, position) {
  86. // Note: Absolute layout does not care about order within the innerCt element because it's an absolutely positioning layout
  87. // We only care whether the item is a direct child of the innerCt element.
  88. var itemEl = item.el ? item.el.dom : Ext.getDom(item);
  89. return (itemEl && itemEl.parentNode === this.getRenderTarget().dom) || false;
  90. },
  91. beginLayout: function (ownerContext) {
  92. var me = this,
  93. target = me.getTarget();
  94. me.callParent(arguments);
  95. // Do not set position: relative; when the absolute layout target is the body
  96. if (target.dom !== document.body) {
  97. target.position();
  98. }
  99. me.targetPadding = ownerContext.targetContext.getPaddingInfo();
  100. },
  101. isItemBoxParent: function (itemContext) {
  102. return true;
  103. },
  104. onContentChange: function () {
  105. if (this.ignoreOnContentChange) {
  106. return false;
  107. }
  108. return this.callParent(arguments);
  109. }
  110. });