Estudo sobre layout fit: encaixando componentes em 100% de largura e altura

Estou de volta (eeeee)!  Depois de umas férias pude descansar um montão e estou retomando minhas atividades no trabalho, comunidade Ext, ExtDesenv e etc… 2009 foi um ano muito bacana pro ExtDesenv. Foi o ano de criação do blog e também pude tirar umas experiências boas para fazer melhor no ano de 2010. Em particular notei que os posts e assuntos aqui abordados estavam num nível técnico um pouco complicado. Por isso estou iniciando uma série de artigos mais “relax”. Alguns estudos, exemplos e explicações sobre coisas casuais do cotidiano Ext (: É o caso do post de hoje, vamos lá!

“Eu quero que esse componente ocupe toda a largura e altura disponível”
“Tentei de tudo mas esse cara não redimensiona ocupando 100% da área”
“Coloquei autoWidth e autoHeight mas a largura e altura não ficam automaticamente do tamanho total disponível”

Essas são apenas alguns questionamentos facilmente solucionáveis com o uso do layout fit! Mas antes de começar a codificar vamos deixar claro alguns conceitos:

Um componente que pode conter outros componentes é chamado “Container”. Um painel (Ext.Panel), um viewport (Ext.Viewport), ou uma janela (Ext.Window) são bons exemplos de containers.

Os programadores por trás do Ext desenvolveram um método muito eficiente para organizar os componentes dentro de um container. Eles definiram uma série de layouts pré-definidos que reagem de forma diferente a ações como redimensionamento, tornar visível ou não, expandir ou contrair, etc… Esses layouts estão reunídos no pacote Ext.layout e bem exemplificados no exemplo Layout Browser (navegue um pouco nesse exemplo e veja as diferentes características de cada layout). Para fazer uso de um layout basta declará-lo no container dessa forma.

Ext.onReady(function()
{
	new Ext.Viewport({
		 layout	: "fit"
		,items	: {
			 xtype	: "panel"
			,title	: "Painel 100%"
			,html	: "<p>Eu ocupo 100% da área do viewport!"
		}
	});
});

Você deve ficar atento para as premissas de cada layout. O border layout exige um componente na região central, o layout fit só pode gerenciar um único componente filho do container, etc…

A função do layout fit é “fazer um componente ocupar 100% da área de seu container, independente de redimensionamento”. Como eu disse, esse layout serve para gerenciar um único filho do container (pode colocar outro, eles serão jogados para fora da tela).

Ext.onReady(function()
{
	//uma simples declaração de um grid
	var grid = new Ext.grid.GridPanel({
	     title		: "Grid"
		,autoScroll	: true
	    ,columns	: [{
			 header		: "Coluna 1"
			,dataIndex	: "col1"
		},{
			 header		: "Coluna 2"
			,dataIndex	: "col2"
		}]
		,store:  new Ext.data.SimpleStore({
		    fields: ["col1","col2"]
			,data: [
				 ['1x1','1x2'],['2x1','2x2'],['3x1','3x2'],['4x1','4x2']
			]
		})
	})

	//uma simples declaração de janela com layout fit e o grid dentro
	var janela = new Ext.Window({
	     title	: "Me redimensione!"
		,layout	: "fit"
	    ,width	: 500
	    ,height	: 400
	    ,items	: grid
	});

	janela.show();
});

O trecho acima cria uma janela, e dentro dela um grid. Não importa de que maneira a janela seja redimensionada o grid vai sempre ocupar 100% do espaço disponível no corpo da janela. Como o grid tem autoScroll:true, se o seu conteúdo extrapolar os seus limites o scroll vai ser criado.

Ok, você partiu de uma janela para deixar o grid redimensionável com a opção de scroll ou não, mas se eu quiser que ele ocupe TODA A TELA, toda a área disponível pelo browser? Temos um componente especial para isso chamado viewport. O Viewport é ponto de partida de grande parte dos sistemas Ext. Você não precisa declarar height, nem width, muito menos colocar autoHeight true ou autoWidth:true. O simples fato de instanciar o viewport já possibilita fazer uso de todo espaço visível do browser. Então partindo de um viewport é possível criar um grid que ocupe todo espaço visível da tela.

new Ext.Viewport({
	 layout	: "fit"
	,items	: grid
});

Resolução de problemas

“Eu declarei layout fit, mas ainda assim não ocupa 100% da área!”

Consigo pensar em 2 possíveis problemas:

1. você tem algum autoHeight ou autoWidth gerando problemas para o Ext ler as dimensões dos componentes. Para fazer com que um componente tenha 100% da área o Ext precisa de dimensões exatas para trabalhar.
2. O problema não está no componente com layout fit, mas sim no seu pai ou em algum lugar acima na hierarquia. Quer encontrar problemas de layout e resolvê-los de uma maneira mais eficiente? “Comece por cima e vá descendo”. Verifique se o layout do Viewport está ok, se o layout do painel dentro do viewport está ok, e assim por diante…

Concluindo

Abordamos de maneira bem simplista o conceito de container, comentei sobre o uso de layouts do Ext e aprofundei o assunto um pouco mais no layout fit. Este layout faz com que um componente ocupe 100% da área de seu container, e para usá-lo basta declarar layout:fit no container. Problemas decorrentes do uso de layout fit podem ser culpa do uso de autoHeight e autoWidth ou então algum problema no container ou algum outro componente acima na hierarquia.

Dúvidas, problemas e afins comentem (: Forte abraço e até a próxima!

Posts relacionados:

1. Tudo sobre eventos no Ext JS
2. Material de Estudo Ext JS 3.0: slides da Conferência 2009
3. 1 ano de ExtDesenv: novos recursos e layout