/* This file is part of Ext JS 3.4 Copyright (c) 2011-2013 Sencha Inc Contact: http://www.sencha.com/contact GNU General Public License Usage This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html. If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact. Build date: 2013-04-03 15:07:25 */ Ext.data.JsonP.Ext_layout_AnchorLayout({"alternateClassNames":[],"aliases":{},"enum":null,"parentMixins":[],"tagname":"class","subclasses":["Ext.layout.AbsoluteLayout","Ext.layout.FormLayout"],"extends":"Ext.layout.ContainerLayout","uses":[],"html":"

Hierarchy

Ext.layout.ContainerLayout
Ext.layout.AnchorLayout

Subclasses

Files

This is a layout that enables anchoring of contained elements relative to the container's dimensions.\nIf the container is resized, all anchored items are automatically rerendered according to their\nanchor rules.

\n\n\n

This class is intended to be extended or created via the layout:'anchor' Ext.Container.layout\nconfig, and should generally not need to be created directly via the new keyword.

\n\n\n

AnchorLayout does not have any direct config options (other than inherited ones). By default,\nAnchorLayout will calculate anchor measurements based on the size of the container itself. However, the\ncontainer using the AnchorLayout can supply an anchoring-specific config property of anchorSize.\nIf anchorSize is specifed, the layout will use it as a virtual container for the purposes of calculating\nanchor measurements based on it instead, allowing the container to be sized independently of the anchoring\nlogic if necessary. For example:

\n\n\n
var viewport = new Ext.Viewport({\n    layout:'anchor',\n    anchorSize: {width:800, height:600},\n    items:[{\n        title:'Item 1',\n        html:'Content 1',\n        width:800,\n        anchor:'right 20%'\n    },{\n        title:'Item 2',\n        html:'Content 2',\n        width:300,\n        anchor:'50% 30%'\n    },{\n        title:'Item 3',\n        html:'Content 3',\n        width:600,\n        anchor:'-100 50%'\n    }]\n});\n
\n\n
Defined By

Config options

Ext.layout.AnchorLayout
view source
: String
This configuation option is to be applied to child items of a container managed by\nthis layout (ie. ...

This configuation option is to be applied to child items of a container managed by\nthis layout (ie. configured with layout:'anchor').

\n\n\n
\n\n\n\n\n

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:

    \n\n
  • Percentage : Any value between 1 and 100, expressed as a percentage.
    \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
    // 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
  • \n\n
  • Offsets : Any positive or negative integer value.
    \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
    // 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\n
  • \n\n
  • Sides : Valid values are 'right' (or 'r') and 'bottom'\n(or 'b').
    \nEither the container must have a fixed size or an anchorSize config value defined at render time in\norder for these to have any effect.
  • \n\n
  • Mixed :
    \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
    anchor: '-50 75%'\n
  • \n\n\n
\n\n

Ext.layout.AnchorLayout
view source
: String
default anchor for all child container items applied if no anchor or specific width is set on the child item. ...

default anchor for all child container items applied if no anchor or specific width is set on the child item. Defaults to '100%'.

\n

Defaults to: '100%'

An optional extra CSS class that will be added to the container. ...

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

Note: extraCls defaults to '' except for the following classes\nwhich assign a value by default:\n

\nTo configure the above Classes with an extra CSS class append to the default. For example,\nfor ColumnLayout:\n
extraCls: 'x-column custom-class'\n
\n

\n\n

True to hide each contained item on render (defaults to false).

\n

True to hide each contained item on render (defaults to false).

\n
Defined By

Properties

The Ext.Template used by Field rendering layout classes (such as\nExt.layout.FormLayout) to create the DOM structure o...

The Ext.Template used by Field rendering layout classes (such as\nExt.layout.FormLayout) to create the DOM structure of a fully wrapped,\nlabeled and styled form Field. A default Template is supplied, but this may be\noverriden to create custom field structures. The template processes values returned from\nExt.layout.FormLayout.getTemplateArgs.

\n

Placeholder for the derived layouts

\n

Placeholder for the derived layouts

\n
Ext.layout.AnchorLayout
view source
: Booleanprivate
private ...

private

\n

Defaults to: true

Overrides: Ext.layout.ContainerLayout.monitorResize

Ext.layout.AnchorLayout
view source
: RegExpprivate
...
\n

Defaults to: /^(r|right|b|bottom)$/i

Ext.layout.AnchorLayout
view source
: Stringprivate
...
\n

Defaults to: 'anchor'

Overrides: Ext.layout.ContainerLayout.type

Defined By

Methods

Workaround for how IE measures autoWidth elements. ...

Workaround for how IE measures autoWidth elements. It prefers bottom-up measurements

\n\n
 whereas other browser prefer top-down.  We will hide all target child elements before we measure and\n put them back to get an accurate measurement.\n
\n

Parameters

  • target : Object
    \n
  • viewFlag : Object
    \n
Ext.layout.AnchorLayout
view source
( value, comp )private
private ...

private

\n

Parameters

  • value : Object
    \n
  • comp : Object
    \n
Ext.layout.AnchorLayout
view source
( value, comp )private
private ...

private

\n

Parameters

  • value : Object
    \n
  • comp : Object
    \n
...
\n

Parameters

  • c : Object
    \n
Applies extraCls and hides the item if renderHidden is true ...

Applies extraCls and hides the item if renderHidden is true

\n

Parameters

  • c : Object
    \n
Destroys this layout. ...

Destroys 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.

\n
Ext.layout.AnchorLayout
view source
( )private
...
\n
private. ...

private.\nGet all rendered items to lay out.

\n

Parameters

  • ct : Object
    \n
private ...

private

\n

Parameters

  • c : Object
    \n
  • target : Object
    \n
private ...

private

\n
Ext.layout.AnchorLayout
view source
( container, target )private
private ...

private

\n

Parameters

  • container : Object
    \n
  • target : Object
    \n

Overrides: Ext.layout.ContainerLayout.onLayout

...
\n

Parameters

  • c : Object
    \n
Ext.layout.AnchorLayout
view source
( a, start, cstart )private
private ...

private

\n

Parameters

  • a : Object
    \n
  • start : Object
    \n
  • cstart : Object
    \n
Parses a number or string representing margin sizes into an object. ...

Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations\n(e.g. 10, \"10\", \"10 10\", \"10 10 10\" and \"10 10 10 10\" are all valid options and would return the same result)

\n

Parameters

Returns

  • Object

    An object with margin sizes for top, right, bottom and left

    \n
private ...

private

\n

Parameters

  • ct : Object
    \n
  • target : Object
    \n
Renders the given Component into the target Element. ...

Renders the given Component into the target Element. If the Component is already rendered,\nit is moved to the provided target instead.

\n

Parameters

  • c : Ext.Component

    The Component to render

    \n\n
  • position : Number

    The position within the target to render the item to

    \n\n
  • target : Ext.Element

    The target Element

    \n\n
private ...

private

\n

Parameters

  • ct : Object
    \n
","superclasses":["Ext.layout.ContainerLayout"],"meta":{},"requires":[],"html_meta":{},"statics":{"property":[],"cfg":[],"css_var":[],"method":[],"event":[],"css_mixin":[]},"files":[{"href":"AnchorLayout.html#Ext-layout-AnchorLayout","filename":"AnchorLayout.js"}],"linenr":1,"members":{"property":[{"tagname":"property","owner":"Ext.layout.ContainerLayout","meta":{},"name":"fieldTpl","id":"property-fieldTpl"},{"tagname":"property","owner":"Ext.layout.ContainerLayout","meta":{"private":true},"name":"getLayoutTargetSize","id":"property-getLayoutTargetSize"},{"tagname":"property","owner":"Ext.layout.AnchorLayout","meta":{"private":true},"name":"monitorResize","id":"property-monitorResize"},{"tagname":"property","owner":"Ext.layout.AnchorLayout","meta":{"private":true},"name":"parseAnchorRE","id":"property-parseAnchorRE"},{"tagname":"property","owner":"Ext.layout.AnchorLayout","meta":{"private":true},"name":"type","id":"property-type"}],"cfg":[{"tagname":"cfg","owner":"Ext.layout.AnchorLayout","meta":{},"name":"anchor","id":"cfg-anchor"},{"tagname":"cfg","owner":"Ext.layout.AnchorLayout","meta":{},"name":"defaultAnchor","id":"cfg-defaultAnchor"},{"tagname":"cfg","owner":"Ext.layout.ContainerLayout","meta":{},"name":"extraCls","id":"cfg-extraCls"},{"tagname":"cfg","owner":"Ext.layout.ContainerLayout","meta":{},"name":"renderHidden","id":"cfg-renderHidden"}],"css_var":[],"method":[{"tagname":"method","owner":"Ext.layout.ContainerLayout","meta":{},"name":"constructor","id":"method-constructor"},{"tagname":"method","owner":"Ext.layout.ContainerLayout","meta":{"private":true},"name":"IEMeasureHack","id":"method-IEMeasureHack"},{"tagname":"method","owner":"Ext.layout.AnchorLayout","meta":{"private":true},"name":"adjustHeightAnchor","id":"method-adjustHeightAnchor"},{"tagname":"method","owner":"Ext.layout.AnchorLayout","meta":{"private":true},"name":"adjustWidthAnchor","id":"method-adjustWidthAnchor"},{"tagname":"method","owner":"Ext.layout.ContainerLayout","meta":{"private":true},"name":"afterRemove","id":"method-afterRemove"},{"tagname":"method","owner":"Ext.layout.ContainerLayout","meta":{"private":true},"name":"configureItem","id":"method-configureItem"},{"tagname":"method","owner":"Ext.layout.ContainerLayout","meta":{"protected":true,"private":true},"name":"destroy","id":"method-destroy"},{"tagname":"method","owner":"Ext.layout.AnchorLayout","meta":{"private":true},"name":"getLayoutTargetSize","id":"method-getLayoutTargetSize"},{"tagname":"method","owner":"Ext.layout.ContainerLayout","meta":{"private":true},"name":"getRenderedItems","id":"method-getRenderedItems"},{"tagname":"method","owner":"Ext.layout.ContainerLayout","meta":{"private":true},"name":"isValidParent","id":"method-isValidParent"},{"tagname":"method","owner":"Ext.layout.ContainerLayout","meta":{"private":true},"name":"layout","id":"method-layout"},{"tagname":"method","owner":"Ext.layout.AnchorLayout","meta":{"private":true},"name":"onLayout","id":"method-onLayout"},{"tagname":"method","owner":"Ext.layout.ContainerLayout","meta":{"private":true},"name":"onRemove","id":"method-onRemove"},{"tagname":"method","owner":"Ext.layout.ContainerLayout","meta":{"private":true},"name":"onResize","id":"method-onResize"},{"tagname":"method","owner":"Ext.layout.AnchorLayout","meta":{"private":true},"name":"parseAnchor","id":"method-parseAnchor"},{"tagname":"method","owner":"Ext.layout.ContainerLayout","meta":{},"name":"parseMargins","id":"method-parseMargins"},{"tagname":"method","owner":"Ext.layout.ContainerLayout","meta":{"private":true},"name":"renderAll","id":"method-renderAll"},{"tagname":"method","owner":"Ext.layout.ContainerLayout","meta":{"private":true},"name":"renderItem","id":"method-renderItem"},{"tagname":"method","owner":"Ext.layout.ContainerLayout","meta":{"private":true},"name":"runLayout","id":"method-runLayout"},{"tagname":"method","owner":"Ext.layout.ContainerLayout","meta":{"private":true},"name":"setContainer","id":"method-setContainer"}],"event":[],"css_mixin":[]},"inheritable":null,"private":null,"component":false,"name":"Ext.layout.AnchorLayout","singleton":false,"override":null,"inheritdoc":null,"id":"class-Ext.layout.AnchorLayout","mixins":[],"mixedInto":[]});