![\"Ext.layout.container.Absolute](\"doc-resources/Ext.layout.container.Absolute/Ext.layout.container.Absolute.png\")
This configuation option is to be applied to child items of a container managed by\nthis layout (ie. configured with layout:'anchor').
\n\n\nThis value is what tells the layout how an item should be anchored to the container. items\nadded to an AnchorLayout accept an anchoring-specific config property of anchor which is a string\ncontaining two values: the horizontal anchor value and the vertical anchor value (for example, '100% 50%').\nThe following types of anchor values are supported:
// two values specified\nanchor: '100% 50%' // render item complete width of the container and\n // 1/2 height of the container\n// one value specified\nanchor: '100%' // the width value; the height will default to auto\n// two values specified\nanchor: '-50 -100' // render item the complete width of the container\n // minus 50 pixels and\n // the complete height minus 100 pixels.\n// one value specified\nanchor: '-50' // anchor value is assumed to be the right offset value\n // bottom offset will default to 0\nanchor: '-50 75%'\nFlag to notify the ownerCt Component on afterLayout of a change
\n", - "linenr": 17, - "html_filename": "AbstractContainer.html" - }, - { - "type": "Boolean", - "deprecated": null, - "alias": null, - "protected": false, - "tagname": "cfg", - "href": "AbstractContainer.html#Ext-layout-container-AbstractContainer-cfg-bindToOwnerCtContainer", - "static": false, - "filename": "/mnt/ebs/nightly/git/SDK/platform/src/layout/container/AbstractContainer.js", - "private": false, - "name": "bindToOwnerCtContainer", - "owner": "Ext.layout.container.AbstractContainer", - "doc": "Flag to notify the ownerCt Container on afterLayout of a change
\n", - "linenr": 23, - "html_filename": "AbstractContainer.html" - }, - { - "type": "String", - "deprecated": null, - "alias": null, - "protected": false, - "tagname": "cfg", - "href": "Anchor.html#Ext-layout-container-Anchor-cfg-defaultAnchor", - "shortDoc": "Default anchor for all child container items applied if no anchor or specific width is set on the child item. ...", - "static": false, - "filename": "/mnt/ebs/nightly/git/SDK/extjs/src/layout/container/Anchor.js", - "private": false, - "name": "defaultAnchor", - "owner": "Ext.layout.container.Anchor", - "doc": "Default anchor for all child container items applied if no anchor or specific width is set on the child item. Defaults to '100%'.
\n", - "linenr": 104, - "html_filename": "Anchor.html" - }, - { - "type": "String", - "deprecated": null, - "alias": null, - "protected": false, - "tagname": "cfg", - "href": "AbstractContainer.html#Ext-layout-container-AbstractContainer-cfg-itemCls", - "shortDoc": "An optional extra CSS class that will be added to the container. ...", - "static": false, - "filename": "/mnt/ebs/nightly/git/SDK/platform/src/layout/container/AbstractContainer.js", - "private": false, - "name": "itemCls", - "owner": "Ext.layout.container.AbstractContainer", - "doc": "An optional extra CSS class that will be added to the container. This can be useful for adding\ncustomized styles to the container or any of its children using standard CSS rules. See\nExt.Component.ctCls also.
\n\n\n\n", - "linenr": 29, - "html_filename": "AbstractContainer.html" - } - ], - "method": [ - { - "deprecated": null, - "alias": null, - "protected": false, - "tagname": "method", - "href": "AbstractContainer.html#Ext-layout-container-AbstractContainer-method-getLayoutItems", - "shortDoc": "Returns an array of child components either for a render phase (Performed in the beforeLayout method of the layout's\n...", - "static": false, - "filename": "/mnt/ebs/nightly/git/SDK/platform/src/layout/container/AbstractContainer.js", - "private": false, - "params": [ - - ], - "name": "getLayoutItems", - "owner": "Ext.layout.container.AbstractContainer", - "doc": "Returns an array of child components either for a render phase (Performed in the beforeLayout method of the layout's\nbase class), or the layout phase (onLayout).
\n\n", - "linenr": 49, - "return": { - "type": "Array", - "doc": "of child components
\n" - }, - "html_filename": "AbstractContainer.html" - }, - { - "deprecated": null, - "alias": null, - "protected": false, - "tagname": "method", - "href": "AbstractContainer.html#Ext-layout-container-AbstractContainer-method-getRenderTarget", - "shortDoc": "Returns the element into which rendering must take place. ...", - "static": false, - "filename": "/mnt/ebs/nightly/git/SDK/platform/src/layout/container/AbstractContainer.js", - "private": false, - "params": [ - - ], - "name": "getRenderTarget", - "owner": "Ext.layout.container.AbstractContainer", - "doc": "Returns the element into which rendering must take place. Defaults to the owner Container's Ext.AbstractComponent.targetEl.
\n\n\nMay be overridden in layout managers which implement an inner element.
\n", - "linenr": 68, - "return": { - "type": "Ext.core.Element", - "doc": "\n" - }, - "html_filename": "AbstractContainer.html" - }, - { - "deprecated": null, - "alias": null, - "protected": true, - "tagname": "method", - "href": "Container.html#Ext-layout-container-Container-method-getRenderedItems", - "shortDoc": "Returns all items that are rendered ...", - "static": false, - "filename": "/mnt/ebs/nightly/git/SDK/extjs/src/layout/container/Container.js", - "private": false, - "params": [ - - ], - "name": "getRenderedItems", - "owner": "Ext.layout.container.Container", - "doc": "Returns all items that are rendered
\n", - "linenr": 53, - "return": { - "type": "Array", - "doc": "All matching items
\n" - }, - "html_filename": "Container.html" - }, - { - "deprecated": null, - "alias": null, - "protected": false, - "tagname": "method", - "href": "AbstractContainer.html#Ext-layout-container-AbstractContainer-method-getTarget", - "shortDoc": "Returns the owner component's resize element. ...", - "static": false, - "filename": "/mnt/ebs/nightly/git/SDK/platform/src/layout/container/AbstractContainer.js", - "private": false, - "params": [ - - ], - "name": "getTarget", - "owner": "Ext.layout.container.AbstractContainer", - "doc": "Returns the owner component's resize element.
\n", - "linenr": 61, - "return": { - "type": "Ext.core.Element", - "doc": "\n" - }, - "html_filename": "AbstractContainer.html" - }, - { - "deprecated": null, - "alias": null, - "protected": true, - "tagname": "method", - "href": "Container.html#Ext-layout-container-Container-method-getVisibleItems", - "shortDoc": "Returns all items that are both rendered and visible ...", - "static": false, - "filename": "/mnt/ebs/nightly/git/SDK/extjs/src/layout/container/Container.js", - "private": false, - "params": [ - - ], - "name": "getVisibleItems", - "owner": "Ext.layout.container.Container", - "doc": "Returns all items that are both rendered and visible
\n", - "linenr": 76, - "return": { - "type": "Array", - "doc": "All matching items
\n" - }, - "html_filename": "Container.html" - } - ], - "property": [ - - ], - "cssVar": [ - - ], - "cssMixin": [ - - ], - "event": [ - - ] - }, - "singleton": false, - "alias": null, - "superclasses": [ - "Ext.layout.Layout", - "Ext.layout.container.AbstractContainer", - "Ext.layout.container.Container", - "Ext.layout.container.Anchor" - ], - "protected": false, - "tagname": "class", - "mixins": [ - - ], - "href": "Absolute.html#Ext-layout-container-Absolute", - "subclasses": [ - - ], - "static": false, - "author": null, - "component": false, - "filename": "/mnt/ebs/nightly/git/SDK/extjs/src/layout/container/Absolute.js", - "private": false, - "alternateClassNames": [ - "Ext.layout.AbsoluteLayout" - ], - "name": "Ext.layout.container.Absolute", - "doc": "This is a layout that inherits the anchoring of Ext.layout.container.Anchor and adds the\nability for x/y positioning using the standard x and y component config options.
\n\n\nThis class is intended to be extended or created via the layout\nconfiguration property. See Ext.container.Container.layout for additional details.
\n\n\n
Example usage:
\n\n\nExt.create('Ext.form.Panel', {\n title: 'Absolute Layout',\n width: 300,\n height: 275,\n layout:'absolute',\n layoutConfig: {\n // layout-specific configs go here\n //itemCls: 'x-abs-layout-item',\n },\n url:'save-form.php',\n defaultType: 'textfield',\n items: [{\n x: 10,\n y: 10,\n xtype:'label',\n text: 'Send To:'\n },{\n x: 80,\n y: 10,\n name: 'to',\n anchor:'90%' // anchor width by percentage\n },{\n x: 10,\n y: 40,\n xtype:'label',\n text: 'Subject:'\n },{\n x: 80,\n y: 40,\n name: 'subject',\n anchor: '90%' // anchor width by percentage\n },{\n x:0,\n y: 80,\n xtype: 'textareafield',\n name: 'msg',\n anchor: '100% 100%' // anchor width and height\n }],\n renderTo: Ext.getBody()\n});\nAlternate names
Ext.layout.AbsoluteLayoutHierarchy
Ext.BaseExt.layout.LayoutExt.layout.container.AbstractContainerExt.layout.container.ContainerExt.layout.container.AnchorExt.layout.container.AbsoluteFiles
This is a layout that inherits the anchoring of Ext.layout.container.Anchor and adds the\nability for x/y positioning using the standard x and y component config options.
\n\nThis class is intended to be extended or created via the layout\nconfiguration property. See Ext.container.Container.layout for additional details.
\n\nExt.create('Ext.form.Panel', {\n title: 'Absolute Layout',\n width: 300,\n height: 275,\n layout:'absolute',\n layoutConfig: {\n // layout-specific configs go here\n //itemCls: 'x-abs-layout-item',\n },\n url:'save-form.php',\n defaultType: 'textfield',\n items: [{\n x: 10,\n y: 10,\n xtype:'label',\n text: 'Send To:'\n },{\n x: 80,\n y: 10,\n name: 'to',\n anchor:'90%' // anchor width by percentage\n },{\n x: 10,\n y: 40,\n xtype:'label',\n text: 'Subject:'\n },{\n x: 80,\n y: 40,\n name: 'subject',\n anchor: '90%' // anchor width by percentage\n },{\n x:0,\n y: 80,\n xtype: 'textareafield',\n name: 'msg',\n anchor: '100% 100%' // anchor width and height\n }],\n renderTo: Ext.getBody()\n});\nThis configuation option is to be applied to child items of a container managed by\nthis layout (ie. configured with layout:'anchor').
This value is what tells the layout how an item should be anchored to the container. items\nadded to an AnchorLayout accept an anchoring-specific config property of anchor which is a string\ncontaining two values: the horizontal anchor value and the vertical anchor value (for example, '100% 50%').\nThe following types of anchor values are supported:
Percentage : Any value between 1 and 100, expressed as a percentage.
\n\nThe first anchor is the percentage width that the item should take up within the container, and the\nsecond is the percentage height. For example:
\n\n// two values specified\nanchor: '100% 50%' // render item complete width of the container and\n // 1/2 height of the container\n// one value specified\nanchor: '100%' // the width value; the height will default to auto\nOffsets : Any positive or negative integer value.
\n\nThis is a raw adjustment where the first anchor is the offset from the right edge of the container,\nand the second is the offset from the bottom edge. For example:
\n\n// two values specified\nanchor: '-50 -100' // render item the complete width of the container\n // minus 50 pixels and\n // the complete height minus 100 pixels.\n// one value specified\nanchor: '-50' // anchor value is assumed to be the right offset value\n // bottom offset will default to 0\nSides : Valid values are right (or r) and bottom (or b).
Either the container must have a fixed size or an anchorSize config value defined at render time in\norder for these to have any effect.
Mixed :
\n\nAnchor values can also be mixed as needed. For example, to render the width offset from the container\nright edge by 50 pixels and 75% of the container's height use:
\n\nanchor: '-50 75%'\nFlag to notify the ownerCt Component on afterLayout of a change
\nDefaults to: false
Flag to notify the ownerCt Container on afterLayout of a change
\nDefaults to: false
Default anchor for all child container items applied if no anchor or specific width is set on the child item. Defaults to '100%'.
\nDefaults to: "100%"
An optional extra CSS class that will be added to the container. This can be useful for adding\ncustomized styles to the container or any of its children using standard CSS rules. See\nExt.Component.componentCls also.
\n\n\n\nGet the reference to the current class from which this object was instantiated. Unlike statics,\nthis.self is scope-dependent and it's meant to be used for dynamic inheritance. See statics\nfor a detailed comparison
Ext.define('My.Cat', {\n statics: {\n speciesName: 'Cat' // My.Cat.speciesName = 'Cat'\n },\n\n constructor: function() {\n alert(this.self.speciesName); / dependent on 'this'\n\n return this;\n },\n\n clone: function() {\n return new this.self();\n }\n});\n\n\nExt.define('My.SnowLeopard', {\n extend: 'My.Cat',\n statics: {\n speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard'\n }\n});\n\nvar cat = new My.Cat(); // alerts 'Cat'\nvar snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard'\n\nvar clone = snowLeopard.clone();\nalert(Ext.getClassName(clone)); // alerts 'My.SnowLeopard'\nContainers should not lay out child components when collapsed.
\nCall the original method that was previously overridden with override
\n\nExt.define('My.Cat', {\n constructor: function() {\n alert(\"I'm a cat!\");\n\n return this;\n }\n});\n\nMy.Cat.override({\n constructor: function() {\n alert(\"I'm going to be a cat!\");\n\n var instance = this.callOverridden();\n\n alert(\"Meeeeoooowwww\");\n\n return instance;\n }\n});\n\nvar kitty = new My.Cat(); // alerts \"I'm going to be a cat!\"\n // alerts \"I'm a cat!\"\n // alerts \"Meeeeoooowwww\"\nThe arguments, either an array or the arguments object
Returns the result after calling the overridden method
\nCall the parent's overridden method. For example:
\n\nExt.define('My.own.A', {\n constructor: function(test) {\n alert(test);\n }\n});\n\nExt.define('My.own.B', {\n extend: 'My.own.A',\n\n constructor: function(test) {\n alert(test);\n\n this.callParent([test + 1]);\n }\n});\n\nExt.define('My.own.C', {\n extend: 'My.own.B',\n\n constructor: function() {\n alert(\"Going to call parent's overriden constructor...\");\n\n this.callParent(arguments);\n }\n});\n\nvar a = new My.own.A(1); // alerts '1'\nvar b = new My.own.B(1); // alerts '1', then alerts '2'\nvar c = new My.own.C(2); // alerts \"Going to call parent's overriden constructor...\"\n // alerts '2', then alerts '3'\nThe arguments, either an array or the arguments object\nfrom the current method, for example: this.callParent(arguments)
Returns the result from the superclass' method
\nDestroys this layout. This is a template method that is empty by default, but should be implemented\nby subclasses that require explicit destruction to purge event handlers or remove DOM nodes.
\nThis is a template method. A hook into the functionality of this class.Feel free to override it in child classes.
Returns an array of child components either for a render phase (Performed in the beforeLayout method of the layout's\nbase class), or the layout phase (onLayout).
\n\nof child components
\nReturns the element into which rendering must take place. Defaults to the owner Container's target element.
\n\n\nMay be overridden in layout managers which implement an inner element.
\nInitialize configuration for this class. a typical example:
\n\nExt.define('My.awesome.Class', {\n // The default config\n config: {\n name: 'Awesome',\n isAwesome: true\n },\n\n constructor: function(config) {\n this.initConfig(config);\n\n return this;\n }\n});\n\nvar awesome = new My.awesome.Class({\n name: 'Super Awesome'\n});\n\nalert(awesome.getName()); // 'Super Awesome'\nmixins The mixin prototypes as key - value pairs
\nGet the reference to the class from which this object was instantiated. Note that unlike self,\nthis.statics() is scope-independent and it always returns the class from which it was called, regardless of what\nthis points to during run-time
Ext.define('My.Cat', {\n statics: {\n totalCreated: 0,\n speciesName: 'Cat' // My.Cat.speciesName = 'Cat'\n },\n\n constructor: function() {\n var statics = this.statics();\n\n alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to\n // equivalent to: My.Cat.speciesName\n\n alert(this.self.speciesName); // dependent on 'this'\n\n statics.totalCreated++;\n\n return this;\n },\n\n clone: function() {\n var cloned = new this.self; // dependent on 'this'\n\n cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName\n\n return cloned;\n }\n});\n\n\nExt.define('My.SnowLeopard', {\n extend: 'My.Cat',\n\n statics: {\n speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard'\n },\n\n constructor: function() {\n this.callParent();\n }\n});\n\nvar cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat'\n\nvar snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard'\n\nvar clone = snowLeopard.clone();\nalert(Ext.getClassName(clone)); // alerts 'My.SnowLeopard'\nalert(clone.groupName); // alerts 'Cat'\n\nalert(My.Cat.totalCreated); // alerts 3\nAdd / override static properties of this class.
\n\nExt.define('My.cool.Class', {\n ...\n});\n\nMy.cool.Class.addStatics({\n someProperty: 'someValue', // My.cool.Class.someProperty = 'someValue'\n method1: function() { ... }, // My.cool.Class.method1 = function() { ... };\n method2: function() { ... } // My.cool.Class.method2 = function() { ... };\n});\nthis
\nBorrow another class' members to the prototype of this class.
\n\nExt.define('Bank', {\n money: '$$$',\n printMoney: function() {\n alert('$$$$$$$');\n }\n});\n\nExt.define('Thief', {\n ...\n});\n\nThief.borrow(Bank, ['money', 'printMoney']);\n\nvar steve = new Thief();\n\nalert(steve.money); // alerts '$$$'\nsteve.printMoney(); // alerts '$$$$$$$'\nThe class to borrow members from
\nThe names of the members to borrow
\nthis
\nCreate a new instance of this Class.
\n\nExt.define('My.cool.Class', {\n ...\n});\n\nMy.cool.Class.create({\n someConfig: true\n});\nAll parameters are passed to the constructor of the class.
\nthe created instance.
\nCreate aliases for existing prototype methods. Example:
\n\nExt.define('My.cool.Class', {\n method1: function() { ... },\n method2: function() { ... }\n});\n\nvar test = new My.cool.Class();\n\nMy.cool.Class.createAlias({\n method3: 'method1',\n method4: 'method2'\n});\n\ntest.method3(); // test.method1()\n\nMy.cool.Class.createAlias('method5', 'method3');\n\ntest.method5(); // test.method3() -> test.method1()\nThe new method name, or an object to set multiple aliases. See\nflexSetter
\nThe original method name
\nGet the current class' name in string format.
\n\nExt.define('My.cool.Class', {\n constructor: function() {\n alert(this.self.getName()); // alerts 'My.cool.Class'\n }\n});\n\nMy.cool.Class.getName(); // 'My.cool.Class'\nclassName
\nAdd methods / properties to the prototype of this class.
\n\nExt.define('My.awesome.Cat', {\n constructor: function() {\n ...\n }\n});\n\n My.awesome.Cat.implement({\n meow: function() {\n alert('Meowww...');\n }\n });\n\n var kitty = new My.awesome.Cat;\n kitty.meow();\nOverride prototype members of this class. Overridden methods can be invoked via\ncallOverridden
\n\nExt.define('My.Cat', {\n constructor: function() {\n alert(\"I'm a cat!\");\n\n return this;\n }\n});\n\nMy.Cat.override({\n constructor: function() {\n alert(\"I'm going to be a cat!\");\n\n var instance = this.callOverridden();\n\n alert(\"Meeeeoooowwww\");\n\n return instance;\n }\n});\n\nvar kitty = new My.Cat(); // alerts \"I'm going to be a cat!\"\n // alerts \"I'm a cat!\"\n // alerts \"Meeeeoooowwww\"\nthis
\n