PHP5

ColumnLayout

Компоновка ColumnLayout используется для создания таблицы столбцов - каждый дочерний элемент представляется в виде столбца:

Ext.onReady(function(){
Ext.create('Ext.Panel', {
            title: 'Таблица',
			width: 500,
			height: 100,
			padding: 10,
			layout:'column',
            items: [
				{
					xtype: 'panel',
					title: 'Первый столбец',
					html: 'Поле 1',
					width: 200
				},
				{
					xtype: 'panel',
					title: 'Второй столбец',
					html: 'Поле 2',
					columnWidth:.4
				},
				{
					xtype: 'panel',
					title: 'Третий столбец',
					html: 'Поле 3',
					columnWidth:.6
				}],
			renderTo: Ext.getBody()
        });
 });

Чтобы использовать данную компоновку, мы указываем для панели-контейнера значение layout:'column'. Затем чтобы внутренние панели отображались, надо им присвоить определенную ширину. Это можно сделать двумя способами. Во-первых, мы можем указать у внутренней панели фиксированную ширину: width: 200. Второй способ подразумевает гибкие размеры: columnWidth:.4. Здесь для свойства columnWidth указывается ширина в 40 %. Эти 40 % берутся от всей ширины панели-контейнера минус ширина столбцов с фиксированным параметром. То есть в данном случае из ширины таблицы (500 пикселей) вычитается фиксированная ширина первой панели (200 пикселей) и затем умножается на значение columnWidth 0.4, что в итоге будет составлять 120 пикселей.