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.

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

4. Bastante voltado a programas do tipo ERP.

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": "Relat00f3rio 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(); } }],

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'

26. header : 'Fantasia',

27. width : 300,

28. sortable : true,

29. dataIndex: 'fantasia'

30. }

31. ]

32. });

33. return grid

34. }

37. O Construtor tem código fixo (nuca altera-se)

39. Extjs -> Form -> Model

41. Ele contém os campos e comportamentos essenciais dos dados que você está armazenando. Geralmente, cada modelo mapeia para uma tabela do banco de dados único.

44. Formulário de classes são criadas como subclasses de django.forms.Form e fazer uso de um estilo declarativo que você vai estar familiarizado com que você tenha usado os modelos do Django.

47. Os forms tem todos as informações necessarias para a construção dos widget do extjs.

49. Ex: Fazer um modelo básico de tabela onde podemos abria as linhas para edição.

51. NotaEntradaForm().instance._meta.fields

52. [<django.db.models.fields.AutoField object at 0x24df210>, <django.db.models.fields.related.ForeignKey object at 0x24dcd90>, <django.db.models.fields.related.ForeignKey object at 0x24dced0>, <django.db.models.fields.CharField object at 0x24dcf50>, <django.db.models.fields.CharField object at 0x24dcfd0>, <django.db.models.fields.DateField object at 0x24df090>, <django.db.models.fields.DateField object at 0x24df0d0>, <django.db.models.fields.IntegerField object at 0x24df110>]

54. {

55. id :'cd_cliente',

56. header : 'CD_Cliente',

57. width : 100,

58. sortable : true,

59. dataIndex: 'cd_cliente'

60. },{

61. header : 'Razao',

62. width : 300,

63. sortable : true,

64. dataIndex: 'razao'

65. }

66. ] Criação de uma função para gerar o código de”columns” def getColumnsByForm(form): Código em arquivo separado

68. (r'^extjs_combo/(?P<appname>+)/(?P<model>+)/$','erp.geraextjs.views.loadCombo'),

70. (r'^js/combos/$','erp.geraextjs.views.combosjs'),

71. (r'^js/gridEdit/(?P<appname>+)/(?P<model>+)/$','erp.geraextjs.views.TelaGridEdit'),

72. (r'^js/form/(?P<appname>+)/(?P<model>+)/$','erp.geraextjs.views.TelaForm'),

74. ('string', django.forms.fields.CharField),

75. ('string', django.forms.fields.CheckboxInput),

76. ('string', django.forms.fields.ChoiceField),

77. ('string', django.forms.fields.ComboField),

78. ('date', django.forms.fields.DateField),

79. ('date', django.forms.fields.DateInput),

80. ('date', django.forms.fields.DateTimeField),

81. ('date', django.forms.fields.DateTimeInput),

82. ('number', django.forms.fields.Decimal),

83. ('number', django.forms.fields.DecimalException),

84. outros...

86. Ao mandar salvar a linha em uma GRID editável o extjs envia ao servidor o JSON: DADOS DO POST A SER SALVO: rows = { &quot;id&quot; : &quot;&quot;, &quot;peca_id&quot; : 7, &quot;anomalia_id&quot; : 37, &quot;resultadofinal_id&quot; : 2, &quot;descricao&quot; : &quot;<font color=amp;quot;#ff0000amp;quot;><b>​Defeitos intrincitos</b></font><br>&quot; } Xaction = &quot;create&quot;

89. Ler o JSON para um array

90. Colocar o array['row'] para um array dados

92. if form.is_valid():

93. form.save()

94. E o resto encontra-se em... Alem da Imaginação