Impressão de GRID No EXTJS Com GridPrinter - Loiane Groner

Impresso de GRID no EXTJS com
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);
}
Depois precisamos configuar a pgina HTML que chamar o script:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
<title>Impresso Grid ExtJs com GridPrinter</title>


<link rel="stylesheet" type="text/css" href="/gridPrinter-extjs/js/extjs/resources/css/ext-all.
<script src="/gridPrinter-extjs/js/extjs/adapter/ext/ext-base.js"></
<script src="/gridPrinter-extjs/js/extjs/ext-all.js"></script>

<script src="/gridPrinter-extjs/js/gridPrinter/Ext.ux.GridPrinter.js"

<script src="/gridPrinter-extjs/js/grid.js"></script>
</head>
<body>
<div id="impressao-grid"></div>
</body>
</html>
Fazendo o Setup do Plugin GridPrinter

Voc pode fazer o download do GridPrinter verso original aqui.
Alm do arquivo javascript, voc precisa adicionar o arquivo de estilos (css):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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;
}
Fique vontade para modificar o css, afinal o gosto do cliente!

Alm disso, voc precisa dizer ao GridPrinter em que lugar est o arquivo CSS:
1
2
3
4
5
6
/**
?
* @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:
Bem melhor do que apenas d um Ctrl P!
Excluindo a coluna CheckBox da pgina de impresso

Se voc no utilizar o Checkbox, voc no vai ver esse smbolo {} na primeira coluna. Mas se tiver usando, pode ser
que no queira colocar esse smbolo na sua pgina de impresso, talvez voc quer que aparea apenas os dados.
Para retirar essas chaves, basta fazer uma pequena modificao no cdigo do GridPrinter, ou seja, como o GridPrinter
pega as configuraes do ColumnModel, precisamos apenas excluir a primeira coluna, que o sm (CheckBox):
1
2
3
4
5
var columns_ = grid.getColumnModel().config;

var columns = [];
for (var i=1;i<columns_.length;i++){
columns[i-1] = columns_[i];
}
E o resultado:
Voc pode baixar o projeto completo no GitHub:

At a prxima!
http://github.com/loiane/gridPrinter-extjs

Impressão de GRID No EXTJS Com GridPrinter - Loiane Groner

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Impressão de GRID No EXTJS Com GridPrinter - Loiane Groner

Загружено:

Авторское право:

Доступные форматы

Impresso de GRID no EXTJS com

Depois precisamos configuar a pgina HTML que chamar o script:

Fazendo o Setup do Plugin GridPrinter

Fique vontade para modificar o css, afinal o gosto do cliente!

Bem melhor do que apenas d um Ctrl P!

Excluindo a coluna CheckBox da pgina de impresso

var columns_ = grid.getColumnModel().config;

Voc pode baixar o projeto completo no GitHub:

Вам также может понравиться