O documento discute o framework JavaScript ExtJS, apresentando: 1) como ele traz recursos para projetos web e programação orientada a objetos; 2) como construir uma grade (GRID) usando objetos como Store, DataProxy e leitura de dados JSON; 3) exemplo de código com Store, GRID e colunas.

2. ExtJS - Introdução É um framework em javascript traz muita riqueza de recursos para projetos web.

3. Viabiliza uma programação mais orientada a objetos para construção do visual

4. Bastante voltado a programas do tipo ERP.

5. Extjs – Construindo uma GRID Exemplo de tabela usando ExtJS

6. Extjs – Construindo uma GRID Objetos que forma a GRID: Ext.grid.GridPanel – Objeto que cria o Layout exibido

7. Ext.data.Store – Objeto que arquiva os dados usado na tabela Ext.data.DataProxy – Objeto que gerencia a troca de informações entre o Store e o Servidor HTTP para troca de dados Transação de dados mais usada são JSON e XML Objetos extras que poder dar mais riqueza a tabela Filtros, Mascaras, Editores e outros...

8. Extjs – Construindo uma GRID Exemplo de codigos: STORE var store = new Ext.data.Store({ url: '/relatorio/clientes_ativos/json/', timeout: 120000, reader: new Ext.data.JsonReader({ totalProperty:'total', successProperty: 'success', root:'linhas', idProperty: 'cd_cliente', messageProperty: 'message', fields: [ {'type': 'string', 'name': 'cd_cliente'}, {'type': 'string', 'name': 'razao'}, {'type': 'string', 'name': 'fantasia'}] }), baseParams:{ csrfmiddlewaretoken:csrfmiddlewaretoken } });

9. Extjs – Construindo uma GRID Exemplo de Dados em json que carrega o store { "titulo": "Relat\u00f3rio de Clientes Ativos", "total": 3, "linhas":[ { "cd_cliente": 1483, "fantasia": "A & A QUIMICA LTDA", "razao": "A & A QUIMICA LTDA" },{ "cd_cliente": 1798, "fantasia": "A D J DROGARIA", "razao": "A D J DROGARIA" },{ "cd_cliente": 1627, "fantasia": "A F RODRIGUES ELETRICIDADE ME", "razao": "A F RODRIGUES ELETRICIDADE ME" } ] }

10. Extjs – Construindo uma GRID var grid = new Ext.grid.GridPanel({ store: store, width: 600, height: 300, region:'center', bbar: new Ext.PagingToolbar({ pageSize: 25, store: store, displayInfo: true, displayMsg: 'Itens {0} - {1} de {2}', emptyMsg: "Sem informações", items:['Busca:','', EntrySearch ] }), Exemplo de codigo para layout da GRID

11. Extjs – Construindo uma GRID tbar: [{ iconCls: 'icon16-actions-document-print', text: 'Para Impressão', handler: function(){ filtro=get_filtro2search(filtros.clienteativos,'') createWindow({ id:'printClientesAtivos', title: 'Cliente Ativos: de '+filtro.dataMin+&quot; até &quot;+filtro.dataMax, iconCls:'icon16-places-document-multiple', html: '<iframe src=&quot;/relatorio/clientes_ativos/?dataMin='+filtro.dataMin+'&dataMax='+filtro.dataMax+'&quot; width=&quot;100%&quot; height=&quot;100%&quot;></iframe>', layout:'fit', shim:false, animCollapse:true, constrainHeader:true, width:750, height:400 }); } }

12. Extjs – Construindo uma GRID , '->', 'Filtro:', filtros.clienteativos.dataMin, filtros.clienteativos.dataMax, { iconCls: 'x-tbar-loading', text: 'Atualizar', handler: function(){ store.baseParams=get_filtro2limits(filtros.clienteativos, 0, 25) store.load(); } }],

13. Extjs – Construindo uma GRID Final do exemplo columns: [

14. {

15. id :'cd_cliente',

16. header : 'CD_Cliente',

17. width : 100,

18. sortable : true,

19. dataIndex: 'cd_cliente'

20. },{

21. header : 'Razao',

22. width : 300,

23. sortable : true,

24. dataIndex: 'razao'

25. }, {

26. header : 'Fantasia',