Beruflich Dokumente
Kultur Dokumente
GridPrinter
18/11/2009 | By Loiane Groner
O Grids um dos componentes Ext JS mais utilizados, e geralmente representam dados/informaes que o usurio
gostaria de imprimir (como relatrios, por exemplo). Como o grid usualmente parte de uma aplicao maior (no
apenas contm o grid na pgina), apenas imprimir a pgina (Ctrl + P) no uma boa soluo, pois feita apenas a
impresso das informaes que cabem na pgina de impresso (e o grid pode conter barras de rolagem, e estas, sairo
na pgina impressa).
Uma outra soluo para impresso de grids, seria construir uma outra pgina HTML ou JSP, contendo apenas as
informaes que sero impressas. Mas teramos que fazer uma requisio ao servidor, buscar os dados e renderezar
uma nova pgina. Pra que ento utilizar o ExtJs Grid, se voc vai fazer tudo na mo novamente. Dobro de trabalho.
Recentemente em um projeto, passe por essa situao, ento comecei a buscar no Orculo uma soluo. Encontrei
duas. Uma vai ser apresentada neste post, e a outra apresentarei no prximo post.
A primeira soluo, com GridPrinter, gera uma pgina em HTML apenas com as informaes do Grid. Porm com uma
diferena: o GridPrinter um plugin Third Party (de terceiros) para o ExtJS, ou seja, no preciso fazer uma requisio ao
servidor para renderizar uma nova pgina. Este plugin, obtm as informaes do prprio grid, e gera a pgina para a
impresso, em outra palavras, tudo feito via javascript/ExtJS, todo o trabalho fica no lado cliente (browser), o que torna
a soluo bem leve.
S tem um porm: como o GridPrinter pega os dados que esto renderizados na pgina, se voc tiver um Grid com
paginao, as nicas informaes que sero impressas so aquelas que o usurio est visualizando.
Vamos ao cdigo:
Construindo o Grid
Primeiro, precisamos configurar o grid. Vamos adicionar um boto na barra de tarefas (top tool bar tbar) que ir chamar
o script que ir construir a pgina HTML que servir para impresso:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//checkboxes
var sm = new Ext.grid.CheckboxSelectionModel();
// cria o grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
sm,
{header: "NOME", width: 170, sortable: true, dataIndex: 'nome'
{header: "TELEFONE", width: 150, sortable: true, dataIndex:
{header: "EMAIL", width: 150, sortable: true, dataIndex: 'email'
{header: "DATA NASC.", width: 100, sortable: true, dataIndex:
renderer: Ext.util.Format.dateRenderer('d/m/Y')},
{header: "ENDEREO", width: 200, sortable: true, dataIndex:
],
sm:sm,
title: 'Impresso Grid Extjs',
autoHeight:true,
width:800,
renderTo: document.body,
frame:true,
tbar : [
{
text
: 'Imprimir',
25
26
27
28
29
30
});
handler: function() {
Ext.ux.GridPrinter.print(grid);
}
<html>
<head>
<title>Impresso Grid ExtJs com GridPrinter</title>
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,
?
th,td{margin:0;padding:0;}
img,body,html{border:0;}address,caption,cite,code,dfn,em,strong,var{font-style
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
q:before,q:after{content:'';}
table {
width: 100%;
text-align: left;
font-size: 11px;
font-family: arial;
border-collapse: collapse;
}
table th {
padding: 4px 3px 4px 5px;
border: 1px solid #d0d0d0;
border-left-color: #eee;
background-color: #ededed;
font-weight:bold;
}
table td {
padding: 4px 3px 4px 5px;
border-style: none solid solid;
border-width: 1px;
border-color: #ededed;
}
/**
?
* @property stylesheetPath
* @type String
* The path at which the print stylesheet can be found
*/
stylesheetPath: '/gridPrinter-extjs/js/gridPrinter/resources/gridPrinter.css'
Fiz algumas mudanas no arquivo original. As mudanas so simples de fazer, basta voc entender um pouco da lgica
utilizando, e claro, saber o bsico de ExtJS. Voc pode conferir as pequenas mudanas que fiz fazendo o download
no GitHub.
Resultado
O Grid:
A pgina de impresso:
pega as configuraes do ColumnModel, precisamos apenas excluir a primeira coluna, que o sm (CheckBox):
1
2
3
4
5
E o resultado:
http://github.com/loiane/gridPrinter-extjs