123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141 |
- <!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-layout-container-Absolute'>/**
- </span> * This is a layout that inherits the anchoring of {@link Ext.layout.container.Anchor} and adds the
- * ability for x/y positioning using the standard x and y component config options.
- *
- * This class is intended to be extended or created via the {@link Ext.container.Container#layout layout}
- * configuration property. See {@link Ext.container.Container#layout} for additional details.
- *
- * @example
- * Ext.create('Ext.form.Panel', {
- * title: 'Absolute Layout',
- * width: 300,
- * height: 275,
- * layout: {
- * type: 'absolute'
- * // layout-specific configs go here
- * //itemCls: 'x-abs-layout-item',
- * },
- * url:'save-form.php',
- * defaultType: 'textfield',
- * items: [{
- * x: 10,
- * y: 10,
- * xtype:'label',
- * text: 'Send To:'
- * },{
- * x: 80,
- * y: 10,
- * name: 'to',
- * anchor:'90%' // anchor width by percentage
- * },{
- * x: 10,
- * y: 40,
- * xtype:'label',
- * text: 'Subject:'
- * },{
- * x: 80,
- * y: 40,
- * name: 'subject',
- * anchor: '90%' // anchor width by percentage
- * },{
- * x:0,
- * y: 80,
- * xtype: 'textareafield',
- * name: 'msg',
- * anchor: '100% 100%' // anchor width and height
- * }],
- * renderTo: Ext.getBody()
- * });
- */
- Ext.define('Ext.layout.container.Absolute', {
- /* Begin Definitions */
- alias: 'layout.absolute',
- extend: 'Ext.layout.container.Anchor',
- alternateClassName: 'Ext.layout.AbsoluteLayout',
- /* End Definitions */
- targetCls: Ext.baseCSSPrefix + 'abs-layout-ct',
- itemCls: Ext.baseCSSPrefix + 'abs-layout-item',
- <span id='Ext-layout-container-Absolute-cfg-ignoreOnContentChange'> /**
- </span> * @cfg {Boolean} ignoreOnContentChange
- * True indicates that changes to one item in this layout do not effect the layout in
- * general. This may need to be set to false if {@link Ext.Component#autoScroll}
- * is enabled for the container.
- */
- ignoreOnContentChange: true,
- type: 'absolute',
- // private
- adjustWidthAnchor: function(value, childContext) {
- var padding = this.targetPadding,
- x = childContext.getStyle('left');
- return value - x + padding.left;
- },
- // private
- adjustHeightAnchor: function(value, childContext) {
- var padding = this.targetPadding,
- y = childContext.getStyle('top');
- return value - y + padding.top;
- },
- isItemLayoutRoot: function (item) {
- return this.ignoreOnContentChange || this.callParent(arguments);
- },
- isItemShrinkWrap: function (item) {
- return true;
- },
- beginLayout: function (ownerContext) {
- var me = this,
- target = me.getTarget();
- me.callParent(arguments);
- // Do not set position: relative; when the absolute layout target is the body
- if (target.dom !== document.body) {
- target.position();
- }
- me.targetPadding = ownerContext.targetContext.getPaddingInfo();
- },
- isItemBoxParent: function (itemContext) {
- return true;
- },
- onContentChange: function () {
- if (this.ignoreOnContentChange) {
- return false;
- }
- return this.callParent(arguments);
- }
- });
- </pre>
- </body>
- </html>
|