Анкорная компоновка

Анкорная компоновка позволяет определить размер дочернего элемента в зависимости от размера контейнера. Например, мы можем указать процентное отношение размеров дочернего элемента к размерам родителя:

Ext.onReady(function(){
var panel= Ext.create('Ext.Panel', {
            title: 'Компоновка Anchor',
			width: 300,
			height: 200,
			layout:'anchor',
            items: [
				{
					xtype: 'panel',
					title: 'Л. Толстой',
					html: 'Произведения Л. Толстого: "Война и мир", "Воскресение", "Крейцерова соната"',
					anchor: '60% 85%'
				}],
			renderTo: Ext.getBody()
        });
 });

Чтобы определить анкорную компоновку, мы задаем layout:'anchor'. Затем мы можем применить параметр anchor у дочерних элементов, чтобы задать их размеры. В данном случае используется значение anchor: '60% 85%', то есть внутренняя панель будет иметь ширину в 60% от ширины контейнера, и высоту в 85% от высоты контейнера.

Также мы можем задать и другие варианты анкорной компоновки с помощью параметра anchor. Например, мы можем сделать смещение дочернего элемента от границ, использовав anchor: '-50 -25', где 50 - смещение от правого края контейнера, а 25 - смещение от нижней границы контейнера:

Ext.onReady(function(){
var panel= Ext.create('Ext.Panel', {
            title: 'Компоновка Anchor',
			width: 300,
			height: 200,
			layout:'anchor',
            items: [
				{
					xtype: 'panel',
					title: 'Л. Толстой',
					html: 'Произведения Л. Толстого...',
					anchor: '-50 -25'
				}],
			renderTo: Ext.getBody()
        });
 });

Но мы также можем определить фиксированные размеры дочерней панели, указав anchor: 'r b':

Ext.onReady(function(){
var panel= Ext.create('Ext.Panel', {
            title: 'Компоновка Anchor',
			width: 300,
			height: 200,
			layout:'anchor',
            items: [
				{
					xtype: 'panel',
					title: 'Л. Толстой',
					html: 'Произведения Л. Толстого...',
					width: 200,
					height: 150,
					anchor: 'r b'
				}],
			renderTo: Ext.getBody()
        });
 });