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):

<div id="reportTabContent" style="overflow: hidden; position:absolute; width:98%;"></div>

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:

<div style="border:3px solid #000000; padding:1px; width:99%; height:500px;">

Código HTML do meu “design”:

				<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>

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

    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")]
    });

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!