Django + extjs pelos forms

Embed Size (px)

Citation preview

ExtJS - Introduo

um framework em javascript traz muita riqueza de recursos para projetos web.

Viabiliza uma programao mais orientada a objetos para construo do visual

Bastante voltado a programas do tipo ERP.

Extjs Construindo uma GRID

Exemplo de tabela usando ExtJS

Extjs Construindo uma GRID

Objetos que forma a GRID:Ext.grid.GridPanel Objeto que cria o Layout exibido

Ext.data.Store Objeto que arquiva os dados usado na tabelaExt.data.DataProxy Objeto que gerencia a troca de informaes entre o Store e o Servidor HTTP para troca de dadosTransao de dados mais usada so JSON e XML

Objetos extras que poder dar mais riqueza a tabelaFiltros, Mascaras, Editores e outros...

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 } });

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

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 informaes", items:['Busca:','', EntrySearch ] }),

Exemplo de codigo para layout da GRID

Extjs Construindo uma GRID

tbar: [{ iconCls: 'icon16-actions-document-print', text: 'Para Impresso', 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: '', layout:'fit', shim:false, animCollapse:true, constrainHeader:true, width:750, height:400 }); } }

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

Extjs Construindo uma GRID

Final do exemplo

columns: [ { id :'cd_cliente', header : 'CD_Cliente', width : 100, sortable : true, dataIndex: 'cd_cliente' },{ header : 'Razao', width : 300, sortable : true, dataIndex: 'razao' },

{ header : 'Fantasia', width : 300, sortable : true, dataIndex: 'fantasia' } ] });

return grid

}

Projeto j funcionado

Ver um exemplo de alterao em um projeto j existente e funcionando.

Vantagem:Muitas alteraes s necessrio alterar no django

O Construtor tem cdigo fixo (nuca altera-se)

O construtor tem subordinao em niveis:Model Form Extjs

Extjs Form Model

Django Models - Objeto

Um model a nica e definitiva fonte de dados sobre os dados.

Ele contm os campos e comportamentos essenciais dos dados que voc est armazenando. Geralmente, cada modelo mapeia para uma tabela do banco de dados nico.

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 )

Django - FORM

Um objeto Form encapsula uma seqncia de campos de formulrio e um conjunto de regras de validao que deve ser cumprida para que o formulrio seja aceito.

Formulrio de classes so 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.

Django FORM por Model

Exemplo de Form usando o Model

from django import forms

class PersonForm(forms.ModelForm): class Meta: model = Person exclude = ( 'password', )

Django para gerar ExtJS

No tem mgica, tem que trabalhar!!!Quando iniciei o projeto no achei nenhuma biblioteca que integrasse Django e Extjs fazendo isso pelos forms.

Os forms tem todos as informaes necessarias para a construo dos widget do extjs.

Django para gerar ExtJS

Inicialmente o melhor criar modelos preestabelecidos de widgets que pode usar em vrios projetos diferentes. Quando mais simples e genrico no inicio melhor.

Ex: Fazer um modelo bsico de tabela onde podemos abria as linhas para edio.

Extrao de informaes do FORM

form.instance._meta.fieldsGera uma lista dos fields com objetos de cada field.EXEMPLO:NotaEntradaForm().instance._meta.fields[, , , , , , , ]

Extrao de informaes do FORM

Para construir o cdigo de layout columns para grid com num for:

columns: [ { id :'cd_cliente', header : 'CD_Cliente', width : 100, sortable : true, dataIndex: 'cd_cliente' },{ header : 'Razao', width : 300, sortable : true, dataIndex: 'razao' }]

Criao de uma funo para gerar o cdigo decolumns

def getColumnsByForm(form):

Cdigo em arquivo separado

Partes do projeto de integrao

URLs: para troca de informaes(r'^extjs_db/(?P\S+)/(?P\S+)/$','erp.geraextjs.views.extjs_db'),

(r'^extjs_combo/(?P\S+)/(?P\S+)/$','erp.geraextjs.views.loadCombo'),

Partes do projeto de integrao

URLs: para carregar a javascript do site(r'^js/base/$','erp.geraextjs.views.basejs'),

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

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

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

Partes do projeto de integrao

Dicionrio para converso de tipos de variaveis: ('bool', django.forms.fields.BooleanField),

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

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

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

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

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

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

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

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

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

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

outros...

Salvando informaes:

Criao de uma classe genria para carregar um form apartir do json enviado do extjs

Ao mandar salvar a linha em uma GRID editvel 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" : "Defeitos intrincitos
" }

Xaction = "create"

Salvando informaes Django

Funo switch(request) para indicar o objeto que vai processar de acordo com o Xaction do extjs

Funo create(request):Carregar o modulo form que vai receber as informaes

Ler o JSON para um array

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

E por final:form = Form( data=dados )if form.is_valid(): form.save()

E o resto encontra-se em...

Alem da Imaginao

Melhor achados na internet

Exemplo tradicional (tudo a mo)http://stackoverflow.com/questions/4420824/rendering-django-forms-inside-an-extjs-tab

Gerador de formularios: post com 2 anos e 4 meseshttp://djangosnippets.org/snippets/1264/

Melhor integrao: (achei recentemente ainda analisando)https://github.com/revolunet/django-extdirect-example

Clique para editar o formato do texto do ttulo