Criando um layout moderno

Este esquema é muito popular em aplicações modernas em que a GUI é composta de múltiplos painéis aninhados com barras de divisão e regiões recolhíveis. Aqui está um exemplo que pode ser usado como um layout para as suas aplicações como visto abaixo:

Como fazer isso:

1. Crie os panéis da aplicação:

northPanel={
	title: 'North Panel',
	region: 'north',
	height: 150,
	minSize: 75,
	maxSize: 250,
	cmargins: '0 0 5 0'
}
southPanel={
	title: 'South Panel',
	region: 'south',
	height: 150,
	minSize: 75,
	maxSize: 250,
	cmargins: '5 0 0 0'
}
westPanel={
	title: 'West Panel',
	region: 'west',
	margins: '0 0 0 0',
	cmargins: '0 5 0 0',
	width: 175,
	minSize: 100,
	maxSize: 250
}
eastPanel={
	title: 'East Panel',
	region: 'east',
	margins: '0 0 0 0',
	cmargins: '0 0 0 5',
	width: 175,
	minSize: 100,
	maxSize: 250
}
centerPanel={
	title: 'Center Panel',
	collapsible: false,
	region: 'center',
	margins: '0 0 0 0'
}

2. Agora crie o container e insira os painéis nele:

var container=new Ext.Viewport({
	layout: 'border',
	defaults: {
		collapsible: true,
		split: true,
		bodyStyle: 'padding:15px'
	},
	items: [northPanel, southPanel,
		westPanel, eastPanel, centerPanel
		]
});

Leandro Santos