1

1- Começando com Ext JS

O post de hoje tem como objetivo fazer uma breve apresentação sobre a biblioteca Ext JS e como fazer o setup e um  Hello World para começar a usar esta biblioteca em seu projeto.

Nos últimos dias, tenho estudado uma biblioteca JavaScript chamada Ext JS. Com essa biblioteca, é possível construir aplicações/telas com uma interface gráfica bem rica. Tenho me surpreendido, pois dá pra fazer muitas coisas legais, sem precisar de colocar a mão na massa com javascript puro. E a interface fica muito mais ‘bonitinha’!

Para começar, dê uma conferida no site da biblioteca, o extjs.com. Existe uma comunidade brasileira também (fórum): extjs.com.br

Navegando pelos resultados do Google, o material sobre Ext JS em português é bem escasso. Até agora, não tem nenhum livro em português, porém, a comunidade brasileira tem um projeto para traduzir a documentação encontrada no site da biblioteca. Alguns exemplos já estão traduzidos também. Existe também, uma tradução livre do Ext Core, feita pelo Otávio Augusto Rodrigues Fernandes.

Os únicos livros que encontrei são:

Learning Ext JSExt JS in Action

Como configurar Ext JS para seu projeto Java:

Considerações: neste post, vou utilizar a versão 2.2.1 e a Eclipse IDE, prevendo que um projeto web java pode ser desenvolvido (a IDE não é necessária, se desejar, pode criar uma pasta em um diretório qualquer e seguir os passos).

O primeiro passo é fazer o download da biblioteca. Após o download, vamos criar um projeto web. Coloque as pastas ‘adapter’ e ‘resources’ dentro de uma pasta onde ficarão os arquivos do Ext JS. Coloque também os arquivos ext-all.js, ext-all-debug.js, ext-core.js, ext-core-debug.js. Veja a figura abaixo como vai ficar a estrutura do projeto.Obs.: Nem todos os arquivos são necessários, mas pode ser que futuramente você precise usar algum outro arquivo js, então, este já estará no seu projeto.

2

Vamos criar agora a estrutura básica da página:

Vamos agora verificar se tudo está ok, colocando uma mensagem (alert). Para isso, precisamos colocar o código abaixo dentro de uma tag script ou colocar em um arquivo js:

E temos o seguinte resultado:

Prontinho! Agora já podemos começar a ‘brincar’ com a biblioteca!

3

Se desejar, pode baixar o código deste post aqui:

2- Como Montar um Grid utilizando Ext JS

O post Começando com Ext JS mostrou como configurar sua aplicação para começar a trabalhar com Ext JS.O post de hoje tem como objetivo introduzir como apresentar dados ao usuário utilizando o widget grid da biblioteca Ext JS.

O grid, é sem sombra de dúvidas, um dos componentes mais utilizados do Ext JS. Quando temos um conjunto de dados e temos que apresentá-los ao usuário, uma maneira simples e clara de fazer isso é através de um grid (tabela, planilha). A biblioteca Ext JS já possui um componente que facilita a montagem desses dados em forma de grid.

Para montar esse grid com Ext JS, utilizamos dois componentes:

Um Store que atua como um banco de dado em memória, com os dados que queremos disponibilizar na tela;

Um Grid Panel que fornece uma maneira para apresentar os dados armazenados no store.

Terminologia utilizada:

Columns: refere-se a uma coluna de dados, e pode conter informações relevantes de como exibir a coluna (seus dados e o cabeçalho, inclusive). No Ext JS, essa informação faz parte do componente ColumnModel.

Fields: também refere-se a uma coluna e seus dados, porém, refere-se aos valores da coluna. No Ext JS é utilizada no reader, para carregar os valores dos dados.

Antes de começarmos, o projeto deve estar configurado para o uso do Ext JS. Você pode ver como configurar aqui.Vamos começar a montar o nosso primeiro grid em Ext JS.

Fazendo o setup do data store

A primeira coisa que precisamos fazer é coletar os dados que vão ser exibidos no grid. Os tipos de data store disponíveis no Ext JS nos possibilita ler dos dados armazenados

4

em vários formatos, como XML e utilizando JSON. Entre os data store disponíveis por padrão, têm-se:

Dados simples (array) XML

JSON

Adicionando os dados no data store

Neste primeiro exemplo (do post de hoje), vou utilizar um data store que obtém os dados de um array simples, que representa uma agenda, com nome, telefone, email e data de aniversário dos contatos:

view sourceprint ? 01 //array contendo os dados que serão exibidos no grid

02 var myData = [

03 ['Maria','11-12345678','maria@provedor.com','01/02/1984'],04 ['Pedro','12-55698745','pedro@provedor.com','12/04/1983'],

05 ['João','21-78542359','joao@provedor.com','23/05/1986'],

06 ['Tiago','27-25854567','tiago@provedor.com','07/01/1982'],

07 ['Carla','33-31595187','carla@provedor.com','30/10/1984'],

08 ['Estela','21-98652938','estela@provedor.com','29/06/1985'],

09 ['Lucas','71-87241548','lucas@provedor.com','25/11/1984'],

10 ['Mariana','85-33984526','mariana@provedor.com','02/12/1983']11 ];

O data store precisa de duas coisas: os dados em si, e uma descrição dos dados, que chamamos de fields:

view sourceprint ? 1 //data store que lê os dados e possui sua descrição - fields

2 var store = new Ext.data.SimpleStore({

3 fields: [

4 'nome',

5 'telefone',

6 'email',

7 {name: 'aniversario', type: 'date', dateFormat: 'd/m/Y'}

5

8 ]

9 });

Definindo os dados no data store

O reader precisa saber quais são os campos/fields que deve ler como dados para o data store, então vamos defini-los.

Os fields são definidos utilizando um array de objetos, ou se for apenas string que vamos ler, podemos apenas especificar o nome do campo. Todos os campos, exceto o campo aniversário (data), podem ser definidos apenas com o nome do campo. Por exemplo, para o campo nome, podemos definir um objeto assim:

view sourceprint ? 1 {name: 'nome', type: 'string'}

Entretanto, por estarmos lendo apenas uma string, podemos simplificar definindo o campo nome apenas assim:

view sourceprint ? 1 'nome'

O campo aniversário é um pouco diferente, porque queremos tratá-lo como um tipo data. Para um campo do tipo ‘date’, existem várias opções para definir o formato da data, e o atributo dateFormat que precisa ser definido. Se você já trabalha com PHP, estes formatos de data são bem familiares, pois o Ext JS utiliza a mesma formatação para datas que o PHP usa.

view sourceprint ? 1 {name: 'aniversario', type: 'date', dateFormat: 'd/m/Y'}

O Ext JS possui alguns tipos de dados definidos:

string int (utiliza a função parseInt do javascript)

float (utiliza a função parseFloat do javascript)

boolean (true/false)

date (necessita configurar o atributo de configuração dateFomart)

Exibindo o GridPanel

6

Até agora definimos apenas os dados que serão exibidos pelo grid. O componente que “junta tudo” é o GridPanel, que é responsável por posicionar os dados em colunas e linhas, adicionar o header/cabeçalho, e empacotar tudo e exibir para o usuário.

view sourceprint ?

01 // cria o grid

02 var grid = new Ext.grid.GridPanel({03 store: store,

04 columns: [

05 {header: "NOME", width: 170, sortable: true, dataIndex: 'nome'},06 {header: "TELEFONE", width: 150, sortable: true, dataIndex: 'telefone'},07 {header: "EMAIL", width: 150, sortable: true, dataIndex: 'email'},

08{header: "DATA NASC.", width: 100, sortable: true, dataIndex: 'aniversario',

09 renderer: Ext.util.Format.dateRenderer('d/m/Y')}

10 ],

11 title: 'Grid Simples Extjs',

12 height:230,

13 width:590,

14 renderTo: document.body,15 frame:true

16 });

Mas como o grid funciona?

O nosso data store é passado para o grid que possui um modelo de colunas que determina como as colunas e o cabeçalho serão exibidos. Este modelo é diferente dos fields definidos no reader, que definia como o reader deveria ler os dados.

O GridPanel possui alguns atributos que precisam ser configurados:

renderTo: onde o grid deve ser exibido. frame: apenas adiciona uma borda em volta do grid

height and width: tamanho da altura e largura do grid em pixels

store: os dados que serão exibidos

columns: definido pelo componente ColumnModel. É um array de objetos que definem as colunas do grid

title: título do grid. Se não for definido, aparece apenas o grid

7

Configurando o ColumnModel do GridPanel

Para definir as colunas do grid, precisamos criar um array de objetos que definem como essas colunas serão exibidas e tratadas.

O objeto que define cada coluna por ter várias configurações, mas no mínimo requere que o header e o dataIndex estejam definidos. O atributo header define apenas o texto que irá aparecer no cabeçalho. O atributo dataIndex indica qual campo/field será usado para a coluna.

Você também pode conferir alguns outras opções de configuração do ColumnModel:

sortable: indica se é permitido fazer a ordenação da coluna width: o tamanho inicial da coluna em pixels

hidden: true se não deseja exibir a coluna

align: alinhamento do texto

renderer: utilizada para formatar o dado. Qualquer tipo de dado pode ser transformado. Você utilizar as funções de formatação prontas do Ext JS ou criar uma função.

Resultado

Juntando todo o código que fizemos, temos o seguinte resultado no browser:

O código completo desse post você pode fazer o download aqui (formato projeto Eclipse)

E se ainda não sabe como fazer para importar o projeto no eclipse e executar, pode conferir aqui.

Conclusão:

8

Viu como é fácil e pouco código? Essa biblioteca nos poupa de fazer código braçal para fazer um grid bonitinho assim. Passei a última semana estudando o widget de grid e tive um ótimo resultado. Vale a pena, principalmente se você quer poupar tempo ou não gosta muito de javascript puro!E ainda podemos fazer integração com java e frameworks como Spring e Struts. Assim, podemos fazer toda a parte da lógica de negócio com java e utilizar a biblioteca para deixar a interface mais rica e mais bonita para o usuário.

Referências:- Documentação Ext JS:http://dev.sencha.com/deploy/ext/docs/http://dev.sencha.com/deploy/dev/examples/#sample-3

- Ext JS samples:http://dev.sencha.com/deploy/dev/examples/

- Learning Ext JS:https://www.packtpub.com/learning-ext-js/book

3- Paging Grid Example

This example shows how to create a grid with paging. This grid uses a ScriptTagProxy to fetch cross-domain remote data (from the Ext forums).

Note that the js is not minified so it is readable. See paging.js.

Código Fonte:

9

/*! * Ext JS Library 3.2.1 * Copyright(c) 2006-2010 Ext JS, Inc. * licensing@extjs.com * http://www.extjs.com/license */Ext.onReady(function(){

// create the Data Store var store = new Ext.data.JsonStore({ root: 'topics', totalProperty: 'totalCount', idProperty: 'threadid', remoteSort: true,

fields: [ 'title', 'forumtitle', 'forumid', 'author', {name: 'replycount', type: 'int'}, {name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'}, 'lastposter', 'excerpt' ],

// load using script tags for cross domain, if the data in on the same domain as // this page, an HttpProxy would be better proxy: new Ext.data.ScriptTagProxy({ url: 'http://extjs.com/forum/topics-browse-remote.php' }) }); store.setDefaultSort('lastpost', 'desc');

// pluggable renders function renderTopic(value, p, record){ return String.format( '<b><a href="http://extjs.com/forum/showthread.php?t={2}" target="_blank">{0}</a></b><a href="http://extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>', value, record.data.forumtitle, record.id, record.data.forumid); } function renderLast(value, p, r){ return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']); }

var grid = new Ext.grid.GridPanel({ width:700, height:500, title:'ExtJS.com - Browse Forums', store: store,

10

trackMouseOver:false, disableSelection:true, loadMask: true,

// grid columns columns:[{ id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 }) header: "Topic", dataIndex: 'title', width: 420, renderer: renderTopic, sortable: true },{ header: "Author", dataIndex: 'author', width: 100, hidden: true, sortable: true },{ header: "Replies", dataIndex: 'replycount', width: 70, align: 'right', sortable: true },{ id: 'last', header: "Last Post", dataIndex: 'lastpost', width: 150, renderer: renderLast, sortable: true }],

// customize view config viewConfig: { forceFit:true, enableRowBody:true, showPreview:true, getRowClass : function(record, rowIndex, p, store){ if(this.showPreview){ p.body = '<p>'+record.data.excerpt+'</p>'; return 'x-grid3-row-expanded'; } return 'x-grid3-row-collapsed'; } },

// paging bar on the bottom

11

bbar: new Ext.PagingToolbar({ pageSize: 25, store: store, displayInfo: true, displayMsg: 'Displaying topics {0} - {1} of {2}', emptyMsg: "No topics to display", items:[ '-', { pressed: true, enableToggle:true, text: 'Show Preview', cls: 'x-btn-text-icon details', toggleHandler: function(btn, pressed){ var view = grid.getView(); view.showPreview = pressed; view.refresh(); } }] }) });

// render it grid.render('topic-grid');

// trigger the data store load store.load({params:{start:0, limit:25}});});

4- Row Editor Grid Example

This example shows how to create a grid with inline row based editing using a custom row-editor. The example code row-editor.js is not minified, so it's readable.

To use this example, be sure to include the RowEditor.js file.

12

Código Fonte:

/*! * Ext JS Library 3.2.1 * Copyright(c) 2006-2010 Ext JS, Inc. * licensing@extjs.com * http://www.extjs.com/license */Ext.onReady(function(){ Ext.QuickTips.init();

var Employee = Ext.data.Record.create([{ name: 'name', type: 'string' }, { name: 'email', type: 'string' }, { name: 'start', type: 'date', dateFormat: 'n/j/Y' },{ name: 'salary', type: 'float' },{ name: 'active', type: 'bool' }]);

// hideous function to generate employee data

13

var genData = function(){ var data = []; var s = new Date(2007, 0, 1); var now = new Date(), i = -1; while(s.getTime() < now.getTime()){ var ecount = Ext.ux.getRandomInt(0, 3); for(var i = 0; i < ecount; i++){ var name = Ext.ux.generateName(); data.push({ start : s.clearTime(true).add(Date.DAY, Ext.ux.getRandomInt(0, 27)), name : name, email: name.toLowerCase().replace(' ', '.') + '@exttest.com', active: true, salary: Math.floor(Ext.ux.getRandomInt(35000, 85000)/1000)*1000 }); } s = s.add(Date.MONTH, 1); } return data; }

var store = new Ext.data.GroupingStore({ reader: new Ext.data.JsonReader({fields: Employee}), data: genData(), sortInfo: {field: 'start', direction: 'ASC'} });

var editor = new Ext.ux.grid.RowEditor({ saveText: 'Update' });

var grid = new Ext.grid.GridPanel({ store: store, width: 600, region:'center', margins: '0 5 5 5', autoExpandColumn: 'name', plugins: [editor], view: new Ext.grid.GroupingView({ markDirty: false }), tbar: [{ iconCls: 'icon-user-add', text: 'Add Employee', handler: function(){ var e = new Employee({ name: 'New Guy', email: 'new@exttest.com',

14

start: (new Date()).clearTime(), salary: 50000, active: true }); editor.stopEditing(); store.insert(0, e); grid.getView().refresh(); grid.getSelectionModel().selectRow(0); editor.startEditing(0); } },{ ref: '../removeBtn', iconCls: 'icon-user-delete', text: 'Remove Employee', disabled: true, handler: function(){ editor.stopEditing(); var s = grid.getSelectionModel().getSelections(); for(var i = 0, r; r = s[i]; i++){ store.remove(r); } } }],

columns: [ new Ext.grid.RowNumberer(), { id: 'name', header: 'First Name', dataIndex: 'name', width: 220, sortable: true, editor: { xtype: 'textfield', allowBlank: false } },{ header: 'Email', dataIndex: 'email', width: 150, sortable: true, editor: { xtype: 'textfield', allowBlank: false, vtype: 'email' } },{ xtype: 'datecolumn', header: 'Start Date',

15

dataIndex: 'start', format: 'm/d/Y', width: 100, sortable: true, groupRenderer: Ext.util.Format.dateRenderer('M y'), editor: { xtype: 'datefield', allowBlank: false, minValue: '01/01/2006', minText: 'Can\'t have a start date before the company existed!', maxValue: (new Date()).format('m/d/Y') } },{ xtype: 'numbercolumn', header: 'Salary', dataIndex: 'salary', format: '$0,0.00', width: 100, sortable: true, editor: { xtype: 'numberfield', allowBlank: false, minValue: 1, maxValue: 150000 } },{ xtype: 'booleancolumn', header: 'Active', dataIndex: 'active', align: 'center', width: 50, trueText: 'Yes', falseText: 'No', editor: { xtype: 'checkbox' } }] });

var cstore = new Ext.data.JsonStore({ fields:['month', 'employees', 'salary'], data:[], refreshData: function(){ var o = {}, data = []; var s = new Date(2007, 0, 1); var now = new Date(), i = -1; while(s.getTime() < now.getTime()){ var m = { month: s.format('M y'),

16

employees: 0, salary: 0, index: ++i } data.push(m); o[m.month] = m; s = s.add(Date.MONTH, 1); } store.each(function(r){ var m = o[r.data.start.format('M y')]; for(var i = m.index, mo; mo = data[i]; i++){ mo.employees += 10000; mo.salary += r.data.salary; } }); this.loadData(data); } }); cstore.refreshData(); store.on('add', cstore.refreshData, cstore); store.on('remove', cstore.refreshData, cstore); store.on('update', cstore.refreshData, cstore);

var chart = new Ext.Panel({ width:600, height:200, layout:'fit', margins: '5 5 0', region: 'north', split: true, minHeight: 100, maxHeight: 500,

items: { xtype: 'columnchart', store: cstore, url:'../../resources/charts.swf', xField: 'month', yAxis: new Ext.chart.NumericAxis({ displayName: 'Employees', labelRenderer : Ext.util.Format.numberRenderer('0,0') }), tipRenderer : function(chart, record, index, series){ if(series.yField == 'salary'){ return Ext.util.Format.number(record.data.salary, '$0,0') + ' total salary in ' + record.data.month; }else{ return Ext.util.Format.number(Math.floor(record.data.employees/10000), '0,0') + ' total employees in ' + record.data.month;

17

} },

// style chart so it looks pretty chartStyle: { padding: 10, animationEnabled: true, font: { name: 'Tahoma', color: 0x444444, size: 11 }, dataTip: { padding: 5, border: { color: 0x99bbe8, size:1 }, background: { color: 0xDAE7F6, alpha: .9 }, font: { name: 'Tahoma', color: 0x15428B, size: 10, bold: true } }, xAxis: { color: 0x69aBc8, majorTicks: {color: 0x69aBc8, length: 4}, minorTicks: {color: 0x69aBc8, length: 2}, majorGridLines: {size: 1, color: 0xeeeeee} }, yAxis: { color: 0x69aBc8, majorTicks: {color: 0x69aBc8, length: 4}, minorTicks: {color: 0x69aBc8, length: 2}, majorGridLines: {size: 1, color: 0xdfe8f6} } }, series: [{ type: 'column', displayName: 'Salary', yField: 'salary', style: { image:'../chart/bar.gif', mode: 'stretch',

18

color:0x99BBE8 } }] } });

var layout = new Ext.Panel({ title: 'Employee Salary by Month', layout: 'border', layoutConfig: { columns: 1 }, width:600, height: 600, items: [chart, grid] }); layout.render(Ext.getBody());

grid.getSelectionModel().on('selectionchange', function(sm){ grid.removeBtn.setDisabled(sm.getCount() < 1); });});

19

5- Stateful Array Grid Example

This example shows how to create a grid from Array data.

The grid is stateful so you can move or hide columns, reload the page, and come back to the grid in the same state you left it in.

Note that the js is not minified so it is readable. See array-grid.js.

Código Fonte:

/*! * Ext JS Library 3.2.1 * Copyright(c) 2006-2010 Ext JS, Inc. * licensing@extjs.com * http://www.extjs.com/license */Ext.onReady(function(){

// NOTE: This is an example showing simple state management. During development, // it is generally best to disable state management as dynamically-generated ids // can change across page loads, leading to unpredictable results. The developer // should ensure that stable state ids are set for stateful components in real apps. Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

// sample static data for the store var myData = [ ['3m Co',71.72,0.02,0.03,'9/1 12:00am'], ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'], ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],

20

['American Express Company',52.55,0.01,0.02,'9/1 12:00am'], ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'], ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'], ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'], ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'], ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'], ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'], ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'], ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'], ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'], ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'], ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'], ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'], ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'], ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'], ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'], ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'], ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'], ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'], ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'], ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'], ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'], ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'], ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'], ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'], ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'] ];

/** * Custom function used for column renderer * @param {Object} val */ function change(val){ if(val > 0){ return '<span style="color:green;">' + val + '</span>'; }else if(val < 0){ return '<span style="color:red;">' + val + '</span>'; } return val; }

/** * Custom function used for column renderer * @param {Object} val */ function pctChange(val){ if(val > 0){ return '<span style="color:green;">' + val + '%</span>'; }else if(val < 0){

21

return '<span style="color:red;">' + val + '%</span>'; } return val; }

// create the data store var store = new Ext.data.ArrayStore({ fields: [ {name: 'company'}, {name: 'price', type: 'float'}, {name: 'change', type: 'float'}, {name: 'pctChange', type: 'float'}, {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'} ] });

// manually load local data store.loadData(myData);

// create the Grid var grid = new Ext.grid.GridPanel({ store: store, columns: [ {id:'company',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: 350, width: 600, title: 'Array Grid', // config options for stateful behavior stateful: true, stateId: 'grid' }); // render the grid to the specified div in the page grid.render('grid-example');});

22

Referências:

* Montar grid utilizando Ext JShttp://www.loiane.com/2009/06/como-montar-um-grid-utilizando-ext-js/http://www.loiane.com/2009/06/comecando-com-ext-js/

* Referências:- Documentação Ext JS:http://dev.sencha.com/deploy/ext/docs/http://dev.sencha.com/deploy/dev/examples/#sample-3

- Ext JS samples:http://dev.sencha.com/deploy/dev/examples/

- Learning Ext JS:https://www.packtpub.com/learning-ext-js/book

* Download da Bibliotecahttp://www.extjs.com...js/download.php

*Configurando a Bibliotecahttp://forum.imasters.uol.com.br/index.php?/topic/394315-extjs%23001-conhecendo-o-extjs/