Django + extjs pelos forms

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+" até "+filtro.dataMax, iconCls:'icon16-places-document-multiple', html: '<iframe src="/relatorio/clientes_ativos/?dataMin='+filtro.dataMin+'&dataMax='+filtro.dataMax+'" width="100%" height="100%"></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: [

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,

24. dataIndex: 'razao'

25. }, {

26. header : 'Fantasia',

27. width : 300,

29. dataIndex: 'fantasia'

32. });

33. return grid

35. Projeto já funcionado Ver um exemplo de alteração em um projeto já existente e funcionando.

36. Vantagem: Muitas alterações só é necessário alterar no django

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

38. O construtor tem subordinação em niveis: Model -> Form -> Extjs

39. Extjs -> Form -> Model

40. Django – Models - Objeto Um model é a única e definitiva fonte de dados sobre os dados.

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.

42. Django – Models - objeto Exemplo de model do Django from django.db import models class Person(models.Model): first_name = models.CharField( max_length=30 ) last_name = models.CharField( max_length=30 ) password = models.CharField( max_length=32 )

43. Django - FORM Um objeto Form encapsula uma seqüência de campos de formulário e um conjunto de regras de validação que deve ser cumprida para que o formulário seja aceito.

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.

45. Django – FORM por Model Exemplo de Form usando o Model from django import forms class PersonForm(forms.ModelForm): class Meta: model = Person exclude = ( 'password', )

46. Django para gerar ExtJS Não tem mágica, tem que trabalhar!!! Quando iniciei o projeto não achei nenhuma biblioteca que integrasse Django e Extjs fazendo isso pelos forms.

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

48. Django para gerar ExtJS Inicialmente o melhor é criar modelos preestabelecidos de widgets que pode usar em vários projetos diferentes. Quando mais simples e genérico no inicio é melhor.

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

50. Extração de informações do FORM form.instance._meta.fields Gera uma lista dos fields com objetos de cada field. EXEMPLO:

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>]

53. Extração de informações do FORM Para construir o código de layout columns para grid com num for: columns: [

55. id :'cd_cliente',

56. header : 'CD_Cliente',

57. width : 100,

59. dataIndex: 'cd_cliente'

60. },{

61. header : 'Razao',

62. width : 300,

64. dataIndex: 'razao'

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

67. Partes do projeto de integração URLs: para troca de informações (r'^extjs_db/(?P<appname>\S+)/(?P<model>\S+)/$','erp.geraextjs.views.extjs_db'),

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

69. Partes do projeto de integração URLs: para carregar a javascript do site (r'^js/base/$','erp.geraextjs.views.basejs'),

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

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

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

73. Partes do projeto de integração Dicionário para conversão de tipos de variaveis: ('bool', django.forms.fields.BooleanField),

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...

85. Salvando informações: Criação de uma classe genéria para carregar um form apartir do json enviado do extjs

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 = { "id" : "", "peca_id" : 7, "anomalia_id" : 37, "resultadofinal_id" : 2, "descricao" : "<font color=\"#ff0000\"><b>Defeitos intrincitos</b></font><br>" } Xaction = "create"

87. Salvando informações Django Função switch(request) para indicar o objeto que vai processar de acordo com o Xaction do extjs

88. Função create(request): Carregar o modulo form que vai receber as informações

89. Ler o JSON para um array

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

91. E por final: form = Form( data=dados )

92. if form.is_valid():

93. form.save()

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

95. Melhor achados na internet Exemplo tradicional (tudo a mão) http://stackoverflow.com/questions/4420824/rendering-django-forms-inside-an-extjs-tab Gerador de formularios: post com 2 anos e 4 meses http://djangosnippets.org/snippets/1264/ Melhor integração: (achei recentemente – ainda analisando) https://github.com/revolunet/django-extdirect-example

Django + extjs pelos forms

Mais conteúdo relacionado

Semelhante a Django + extjs pelos forms (20)

Django + extjs pelos forms