ExtJS - Introdução <ul><li>É um framework em javascript traz muita riqueza de recursos para projetos web.
Viabiliza uma programação mais orientada a objetos para construção do visual
Bastante voltado a programas do tipo ERP. </li></ul>
Extjs – Construindo uma GRID <ul><li>Exemplo de tabela usando ExtJS </li></ul>
Extjs – Construindo uma GRID <ul><li>Objetos que forma a GRID: </li><ul><li>Ext.grid.GridPanel  – Objeto que cria o Layout...
Ext.data.Store  – Objeto que arquiva os dados usado na tabela </li><ul><li>Ext.data.DataProxy  – Objeto que gerencia a tro...
Extjs – Construindo uma GRID Exemplo de codigos: STORE var store = new Ext.data.Store({ url: '/relatorio/clientes_ativos/j...
Extjs – Construindo uma GRID Exemplo de Dados em json que carrega o store { &quot;titulo&quot;: &quot;Relatu00f3rio de Cli...
Extjs – Construindo uma GRID var grid = new Ext.grid.GridPanel({ store: store, width: 600, height: 300, region:'center', b...
Extjs – Construindo uma GRID tbar: [{ iconCls: 'icon16-actions-document-print', text: 'Para Impressão', handler: function(...
Extjs – Construindo uma GRID   , '->', 'Filtro:', filtros.clienteativos.dataMin, filtros.clienteativos.dataMax, { iconCls:...
Extjs – Construindo uma GRID <ul><li>Final do exemplo </li></ul><ul><ul><li>columns: [
{
id  :'cd_cliente',
header  : 'CD_Cliente',
width  : 100,
sortable : true,
dataIndex: 'cd_cliente'
},{
header  : 'Razao',
width  : 300,
sortable : true,
dataIndex: 'razao'
}, </li></ul></ul><ul><ul><li>{
header  : 'Fantasia',
Upcoming SlideShare
Loading in...5
×

Django + extjs pelos forms

2,814

Published on

Slides apresentados no pylestra sobre como integrar o Extjs ao Django usando os FORMS do django.

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,814
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
56
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Django + extjs pelos forms

  1. 2. ExtJS - Introdução <ul><li>É um framework em javascript traz muita riqueza de recursos para projetos web.
  2. 3. Viabiliza uma programação mais orientada a objetos para construção do visual
  3. 4. Bastante voltado a programas do tipo ERP. </li></ul>
  4. 5. Extjs – Construindo uma GRID <ul><li>Exemplo de tabela usando ExtJS </li></ul>
  5. 6. Extjs – Construindo uma GRID <ul><li>Objetos que forma a GRID: </li><ul><li>Ext.grid.GridPanel – Objeto que cria o Layout exibido
  6. 7. Ext.data.Store – Objeto que arquiva os dados usado na tabela </li><ul><li>Ext.data.DataProxy – Objeto que gerencia a troca de informações entre o Store e o Servidor HTTP para troca de dados </li><ul><li>Transação de dados mais usada são JSON e XML </li></ul></ul><li>Objetos extras que poder dar mais riqueza a tabela Filtros, Mascaras, Editores e outros... </li></ul></ul>
  7. 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 } });
  8. 9. Extjs – Construindo uma GRID Exemplo de Dados em json que carrega o store { &quot;titulo&quot;: &quot;Relatu00f3rio de Clientes Ativos&quot;, &quot;total&quot;: 3, &quot;linhas&quot;:[ { &quot;cd_cliente&quot;: 1483, &quot;fantasia&quot;: &quot;A & A QUIMICA LTDA&quot;, &quot;razao&quot;: &quot;A & A QUIMICA LTDA&quot; },{ &quot;cd_cliente&quot;: 1798, &quot;fantasia&quot;: &quot;A D J DROGARIA&quot;, &quot;razao&quot;: &quot;A D J DROGARIA&quot; },{ &quot;cd_cliente&quot;: 1627, &quot;fantasia&quot;: &quot;A F RODRIGUES ELETRICIDADE ME&quot;, &quot;razao&quot;: &quot;A F RODRIGUES ELETRICIDADE ME&quot; } ] }
  9. 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: &quot;Sem informações&quot;, items:['Busca:','', EntrySearch ] }), Exemplo de codigo para layout da GRID
  10. 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 }); } }
  11. 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(); } }],
  12. 13. Extjs – Construindo uma GRID <ul><li>Final do exemplo </li></ul><ul><ul><li>columns: [
  13. 14. {
  14. 15. id :'cd_cliente',
  15. 16. header : 'CD_Cliente',
  16. 17. width : 100,
  17. 18. sortable : true,
  18. 19. dataIndex: 'cd_cliente'
  19. 20. },{
  20. 21. header : 'Razao',
  21. 22. width : 300,
  22. 23. sortable : true,
  23. 24. dataIndex: 'razao'
  24. 25. }, </li></ul></ul><ul><ul><li>{
  25. 26. header : 'Fantasia',
  26. 27. width : 300,
  27. 28. sortable : true,
  28. 29. dataIndex: 'fantasia'
  29. 30. }
  30. 31. ]
  31. 32. });
  32. 33. return grid
  33. 34. } </li></ul></ul>
  34. 35. Projeto já funcionado <ul><li>Ver um exemplo de alteração em um projeto já existente e funcionando.
  35. 36. Vantagem: </li><ul><li>Muitas alterações só é necessário alterar no django
  36. 37. O Construtor tem código fixo (nuca altera-se)
  37. 38. O construtor tem subordinação em niveis: </li><ul><li>Model -> Form -> Extjs
  38. 39. Extjs -> Form -> Model </li></ul></ul></ul>
  39. 40. Django – Models - Objeto <ul><li>Um model é a única e definitiva fonte de dados sobre os dados.
  40. 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. </li></ul>
  41. 42. Django – Models - objeto <ul><li>Exemplo de model do Django </li></ul>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 )
  42. 43. Django - FORM <ul><li>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.
  43. 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. </li></ul>
  44. 45. Django – FORM por Model <ul><li>Exemplo de Form usando o Model </li></ul>from django import forms class PersonForm(forms.ModelForm): class Meta: model = Person exclude = ( 'password', )
  45. 46. Django para gerar ExtJS <ul>Não tem mágica, tem que trabalhar!!! <li>Quando iniciei o projeto não achei nenhuma biblioteca que integrasse Django e Extjs fazendo isso pelos forms.
  46. 47. Os forms tem todos as informações necessarias para a construção dos widget do extjs. </li></ul>
  47. 48. Django para gerar ExtJS <ul><li>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.
  48. 49. Ex: Fazer um modelo básico de tabela onde podemos abria as linhas para edição. </li></ul>
  49. 50. Extração de informações do FORM <ul><li>form.instance._meta.fields </li><ul><li>Gera uma lista dos fields com objetos de cada field. </li><ul><li>EXEMPLO:
  50. 51. NotaEntradaForm().instance._meta.fields
  51. 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>] </li></ul></ul></ul>
  52. 53. Extração de informações do FORM <ul><li>Para construir o código de layout columns para grid com num for: </li></ul><ul><ul><li>columns: [
  53. 54. {
  54. 55. id :'cd_cliente',
  55. 56. header : 'CD_Cliente',
  56. 57. width : 100,
  57. 58. sortable : true,
  58. 59. dataIndex: 'cd_cliente'
  59. 60. },{
  60. 61. header : 'Razao',
  61. 62. width : 300,
  62. 63. sortable : true,
  63. 64. dataIndex: 'razao'
  64. 65. }
  65. 66. ] </li></ul></ul>Criação de uma função para gerar o código de”columns” def getColumnsByForm(form): Código em arquivo separado
  66. 67. Partes do projeto de integração <ul><li>URLs: para troca de informações </li><ul><li>(r'^extjs_db/(?P<appname>S+)/(?P<model>S+)/$','erp.geraextjs.views.extjs_db'),
  67. 68. (r'^extjs_combo/(?P<appname>S+)/(?P<model>S+)/$','erp.geraextjs.views.loadCombo'), </li></ul></ul>
  68. 69. Partes do projeto de integração <ul><li>URLs: para carregar a javascript do site </li><ul><li>(r'^js/base/$','erp.geraextjs.views.basejs'),
  69. 70. (r'^js/combos/$','erp.geraextjs.views.combosjs'),
  70. 71. (r'^js/gridEdit/(?P<appname>S+)/(?P<model>S+)/$','erp.geraextjs.views.TelaGridEdit'),
  71. 72. (r'^js/form/(?P<appname>S+)/(?P<model>S+)/$','erp.geraextjs.views.TelaForm'), </li></ul></ul>
  72. 73. Partes do projeto de integração <ul><li>Dicionário para conversão de tipos de variaveis: </li><ul><li>('bool', django.forms.fields.BooleanField),
  73. 74. ('string', django.forms.fields.CharField),
  74. 75. ('string', django.forms.fields.CheckboxInput),
  75. 76. ('string', django.forms.fields.ChoiceField),
  76. 77. ('string', django.forms.fields.ComboField),
  77. 78. ('date', django.forms.fields.DateField),
  78. 79. ('date', django.forms.fields.DateInput),
  79. 80. ('date', django.forms.fields.DateTimeField),
  80. 81. ('date', django.forms.fields.DateTimeInput),
  81. 82. ('number', django.forms.fields.Decimal),
  82. 83. ('number', django.forms.fields.DecimalException),
  83. 84. outros... </li></ul></ul>
  84. 85. Salvando informações: <ul><li>Criação de uma classe genéria para carregar um form apartir do json enviado do extjs
  85. 86. Ao mandar salvar a linha em uma GRID editável o extjs envia ao servidor o JSON: </li></ul>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=&quot;#ff0000&quot;><b>​Defeitos intrincitos</b></font><br>&quot; } Xaction = &quot;create&quot;
  86. 87. Salvando informações Django <ul><li>Função switch(request) para indicar o objeto que vai processar de acordo com o Xaction do extjs
  87. 88. Função create(request): </li><ul><li>Carregar o modulo form que vai receber as informações
  88. 89. Ler o JSON para um array
  89. 90. Colocar o array['row'] para um array dados
  90. 91. E por final: </li><ul><li>form = Form( data=dados )
  91. 92. if form.is_valid():
  92. 93. form.save() </li></ul></ul></ul>
  93. 94. E o resto encontra-se em... Alem da Imaginação
  94. 95. Melhor achados na internet <ul><li>Exemplo tradicional (tudo a mão) </li><ul><li>http://stackoverflow.com/questions/4420824/rendering-django-forms-inside-an-extjs-tab </li></ul><li>Gerador de formularios: post com 2 anos e 4 meses </li><ul><li>http://djangosnippets.org/snippets/1264/ </li></ul><li>Melhor integração: (achei recentemente – ainda analisando) </li><ul><li>https://github.com/revolunet/django-extdirect-example </li></ul></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×