Como Redimensionar ExtJS Panel, Grid, ou Outro Componente Quando Redimensionar o Browser

Este post mostrará como redimensionar um ExtJS Panel, Grid, ou qualquer outro componente quando redimensionar a janela do browser sem utilizar Ext.Viewport.

Problema:

Você tem uma página legada e quer trocar um grid feito em html por um grid em ExtJS (porque possui recursos bem legais). Ou a página possui algum design e você apenas quer usar um componente em ExtJS. Em ambos os casos, você deseja renderizar o componente ExtJS em um DIV específico. E você também quer que este componente ExtJS seja redimensionado quando o browser for redimensionado.

Como fazer isso, sendo que este não é comportamento padrão de um componente ExtJS? Só para esclarecer, os componentes ExtJS só sofrem redimensionamento se estiverem dentro de um Viewport, e este ocupa todo o espaço disponível na tela, não sendo possível utilizar nenhum outro design em HTML, JPEG, etc.

Solução:

Condor (do ExtJS Community Support Team) desenvolveu um plugin que consegue resolver este problema.

Gastei algum tempo para entender como o plugin funciona, e finalmente consegui fazê-lo funcionar do jeito que desejava.

Bem, em primeiro lugar, recomendo que passe algum tempo lendo a thread do forum para enteder bem o cenário: http://www.sencha.com/forum/showthread.php?28318 (se tiver alguma pergunta, por favor, publique diretamente no fórum para que o autor do plugin e outros membros lhe forneçam o suporte que precisa).

Como fazer o plugin funcionar:

É preciso aplicar o seguinte estilo (css) no DIV  (o atributo de largura - width é com o designer; o outros estilos são obrigatórios para fazer o plugin funcionar):

[code lang="html" firstline="1" toolbar="true" collapse="false" wraplines="false"]
<div id="reportTabContent" style="overflow: hidden; position:absolute; width:98%;"></div>
[/code]

Se tiver alguma borda ao redor do componente ExtJS, é necessário setar a altura  - HEIGHT. E também será ncessário setar a altura no componente ExtJS. Neste caso, o autoHeight (altura automática) não irá funcionar. Se não tiver nenhuma borda ou nenhum outro design nos lados no componente, não é necessário setar a altura e neste caso, o autoHeight funciona. No meu caso (exemplo aqui do blog), coloquei uma borda no DIV exterior (apenas para simular o design), então tive que setar a altura:

[code lang="html" firstline="1" toolbar="true" collapse="false" wraplines="false"]
<div style="border:3px solid #000000; padding:1px; width:99%; height:500px;">
[/code]

Código HTML do meu "design":

[code lang="html" firstline="1" toolbar="true" collapse="false" wraplines="false"]
<div style="border:3px solid #000000; padding:1px; width:99%; height:500px;">
<table>
<tr>
<td style="overflow: hidden; width:100%;">
<div id="reportTabContent" style="overflow: hidden; position:absolute; width:98%;"></div>
</td>
</tr>
</table>
</div>
[/code]

E também é preciso adicionar o plugin no componente (Neste caso, estou usando o ExtJS DataGrid):

[code lang="js" firstline="1" toolbar="true" collapse="false" wraplines="false" highlight="20"]
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header: 'Company', width: 160, sortable: true, dataIndex: 'company'},
{header: 'Price', width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
{header: 'Change', width: 75, sortable: true, renderer: change, dataIndex: 'change'},
{header: '% Change', width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: 'Last Updated', width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
stripeRows: true,
autoExpandColumn: 'company',
height: 490,
autoWidth:true,
title: 'Array Grid',
// config options for stateful behavior
stateful: true,
stateId: 'grid'
,viewConfig:{forceFit:true}
,renderTo: 'reportTabContent' // render the grid to the specified div in the page
,plugins: [new Ext.ux.FitToParent("reportTabContent")]
});
[/code]

Pronto! Quando redimensionar browser, o componente ExtJS fará também!

Testei no Firefox, Chrome e IE6.

Você també pode fazer o download do projeto de exemplo no meu GitHub: http://github.com/loiane/extjs-fit-to-parent

PS.: Se quiser usar todo o espaço disponível na tela, utilize Viewport.

Bons códigos!