ExtJS - Anchor Layout

• Extjs Provides anchoring of contained items to the container's edges.
• This type of layout is most commonly seen within FormPanels (or any container with a FormLayout) Fields are sized relative to the container without hard-coding their dimensions.

{
            id:'anchor-panel',
            title: 'Astute Anchor Layout',
            layout:'anchor',
            defaults: {bodyStyle: 'padding:15px'},
            items: [{
                title: 'Astute Panel 1',
                height: 100,
                anchor: '50%',
                html: '<p>Width = 50% of the container</p>'
            },{
                title: 'Astute Panel 2',
                height: 100,
                anchor: '-100',
                html: '<p>Width = container width - 100 pixels</p>'
            },{
                title: 'Panel 3',
                anchor: '-10, -262',
                html: '<p>Width = container width - 10 pixels</p><p>Height = container height - 262 pixels</p>'
            }]
        }