Esse tutorial irá abordar como exportar dados de um ExtJS DataGrid para um arquivo Excel.

Às vezes, o usuário deseja exportar os dados de um graid para um arquivo excel (.xls ou .csv).
Existe um plugin ExtJS desenvolvido por terceiros que faz isso para você.

Existem alguns “probleminhas” que você deve saber antes de começar:

• Só funciona em browsers que suportam data URLs (URL com dados), como Firefox, Opera e IE8.
• Testei com as seguintes versões do ExtJS: 2.2.1, 3.0, 3.0.3 e 3.1, mas só funcionou na versão 3.0. Se alguém estiver usando alguma outra versão e conseguir fazer funcionar, me avise, pois posso ter esquecido de algum detalhe.
• Só funcionad com os dados que estão no data Store – se você usar paginação, então crie um método para exportar no lado servidor. Esse plugin apenas é útil para quem desejar exportar uma pequena tabela para o Excel (todos os dados visíveis na tela).
• Se os dados no Store forem voláteis (podem mudar, sofrer update, etc), a URL para exportação deve ser recalculada.

Vamos começar:

Primeiro, crie um arquivo javascript no projeto e cole o seguinte código (criei um arquivo exporter.js): http://github.com/loiane/extjs-export-excel/blob/master/WebContent/js/exporter.js (esse arquivo tem muitas linhas, por isso não coloquei/colei o conteúdo aqui).

E no código que contém o grid, adiciona o seguinte código:

var linkButton = new Ext.LinkButton({
        id: 'grid-excel-button',
        text: 'Export to Excel'
});

//create the Grid
var grid = new Ext.grid.GridPanel({
    bbar: new Ext.Toolbar({
        buttons: [linkButton]
    })
});

linkButton.getEl().child('a', true).href = 'data:application/vnd.ms-excel;base64,' +
Base64.encode(grid.getExcelXml());

Se tentar exportar a tabela da figura (por exemplo) para o arquivo excel, vai ficar mais ou menos assim:

Você também pode trocar as cores, fontes, etc. Dê uma olhada no código do exporter.js, tente enterder e faça a mudanças que desejar.

Ed Spencer também desenvolveu um plugin similar. O código fonte dele está mais limpo que este. Porém, o arquivo Excel gerado será o mesmo.

Você pode fazer o donwload do projeto exemplo (JEE) do meu repositório GitHub: http://github.com/loiane/extjs-export-excel

Bons códigos!

Posts Similares

• Como Importar Arquivo Excel para um ExtJS DataGrid usando DataDrop Grid Plugin
• Impressão de GRID no EXTJS com GridPrinter
• ExtJS: Como colocar Ícone e Link nas Células do GRID
• ExtJS: seleção de linha no grid
• Como Montar um Grid utilizando Ext JS