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