ExtJS 4 MVC: Ajax CRUD Grid com PHP e MySQL – JSON
Ei pessoal,
Mais um exemplo sobre ExtJS 4 MVC aqui no blog.
Este provavavelmente é o post mais pedido sobre ExtJS 4 MVC. Um exemplo de como começar uma aplicação MVC com PHP e MySQL.
Screenshot da aplicação:
Estrutura do Projeto:
Código Fonte:
Como o exemplo é bem grande e tem bastante código fonte, não vou postar aqui no blog. Quem tiver interesse pode pegar o código completo no meu github: https://github.com/loiane/extjs4-mvc-json-crud-php-mysql
Demo:
Quem tiver interesse, também pode ver o exemplo live: http://loiane.com/extjs/extjs4-mvc-json-crud-php-mysql
ScreenCast passo a passo:
Em breve vou gravar um screencast ensinando a fazer passo a passo esse exemplo também.
Até a próxima! 
unica coisa, hoje em dia é mais seguro usar o pdo ao inves de mysql_. Se estiver usando uma versao nova do mysql tambem é interessante usar mysqli_.
E estou gostando desse ext4. Nunca tinha usado ele. Vou brincar mais um pouoco com seu exemplo
.
thnanks
[]s
Vlw Elias, já me falaram isso. Ainda sou muuuuuito newbie em php, essas dicas sde vcs são show!
bom dia Loiane, tudo bem adore o exemplo, sou iniciante poderia me ajudar a fazer o exemplo abrir em um window!?
Obrigado.
Oi Alê,
É só criar uma Window e colocar o grid como um item da Window.
[]‘s
Laiane poderia criar um window simples para mim a qual eu possa utilizar, sou iniciante. tentei alguns scripts no entanto nenhuma windows conseguiu instanciar a grid, acho q deve ser meu inicio em mvc no extjs… desde já agradeço.
só colocar o grid como item da window.
Assista essa aula para ajudar: http://www.loiane.com/2012/07/curso-de-extjs-4-aula-27-ext-window-window/
[]‘s
Olá Loiane, acompanho seu trabalho algum tempo, e gostaria de agradecer por me ajudar muito com seus post, e muitas outras pessoas.
Gostaria de saber qual a melhor solução para trabalhar com CRUD , exemplo Pessoa e PessoaFisica em um mesma janela e também como faria para trabalhar com um CRUD por exemplo Pessoa e Endereços em uma mesmo janela, estou trabalhao com ExtJS e Spring. Desde já agradeço.
Gostei muito desse codigo, mais eu estava interessado só que ele salvasse, ja tentei colocar somente para ele salvar mais não consegui, quando chamo pra salver ele quer add, se eu tiro a url de add, ele da erro pois ele quer solicita o add, o que eu faço me ajuda…
Ja descobri onde era o erro, era a condição da variavel id, que eu não tinha visto, mais muito obrigado assim mesmo…
Olá Loiane, obrigado pelos seus posts, tenho aprendido muito com eles.
Sugiro uma verificação das validações do formulario antes de salvar/alterar, já que você colocou no formulario: (allowBlank: false),
no Controller:
updateContato: function(button) {
var win = button.up(‘window’),
form = win.down(‘form’),
record = form.getRecord(),
values = form.getValues();
if (form.getForm().isValid()){
var novo = false;
…
… Resto do codigo
…
}
},
Thanks for the example. I have a good Ext3 knowledge. But there are new features in Ext4 data package, so i have some questions.
- how to use client validation? form vs model validation?
- how to send server response with validation errors? example json response with many validation errors at once?
- where to put the “handler” for server error response? into controller or store listener?
Excelente espero con ansias el video
Boa tarde loiane, parabéns, eu gostaria de lhe perguntar se você ja montou uma grid como esta com opção de pesquisa na grid, ou seja voce teria um form com algumas opções como intervalo de datas, e a grid sendo exibida logo abaixo, voce informa os dados no form e os dados sao exibidos na grid de acordo com o que foi informado, ou um botão “Pesquisar” ao lado dos botoes “Excluir” e “Adicionar”, voce clicaria neste botao que abriria o form com opções de pesquisa, voce clica em buscar e os dados sao exibidos na grid.Estou a um tempo buscando por um exemplo com algo assim para poder testar, porem tenho encontrado apenas opções de filtro e pesquisa diretamente nas colunas.
Obrigado pelo post.
Oi Geraldo,
É o mesmo princípio de filtro na grid, só que mostra para o usuário de forma diferente.
[]‘s
Ola Loiane… sou iniciante em ExtJs e peguei seu exemplo e ao testar ele abre a grid na tela toda. Como procedo para que essa grid fique no centro da tela do tamanho que desejo?
Grato
Oi Rafael,
Você pode usar as propriedades width para largura e height para altura. Os valores são inteiros e em pixels.
[]‘s
Olá Loiane,
Antes de mais nada, parabéns pelo post.
O link da demo não esta funcionado.
http://loiane.com/extjs/extjs4-mvc-json-crud-php-mysql
Oi Everton,
Como tive problemas de segurança no blog, tive que desativar todos os links das demos.
Peguei um novo domínio para isso, em breve vou atualizar.
[]‘s
Olá Loiane,
Esse exemplo que você fez está realmente demais. Pena que o extjs não é uma biblioteca muito produtiva, pois escreve-se demais para se realizar tarefas básicas.
Aqui na empresa em que trabalho, estamos utilizando o jquery easyui http://www.jeasyui.com/ que é uma biblioteca baseada em jquery e bem mais leve e fácil de se programar.
Mas não deixa de ser uma boa alternativa para o desenvolvimento da interface de sistemas web.
Parabéns pelo seu trabalho e continue assim…
Estou usando esse exemplo como base para um sistema que estou fazendo.
Mais to tendo muitos problemas de percurso um deles é a acentuação das palavras algum mais teve esse problema, e como resolver???
Oi Dinate, acrescentou o meta tag no html? Isso já resolve muita coisa!
E no mysql ou outro banco de dados, tem que sempre trabalhar com utf-8.
[]‘s
ola tudo bem muito legal seu artigos e as video aulas tabem sera que voc epoderia me ajudar eu queria aplicar uma mascara em um campo do formulario para poder digitar valore e ser convertido em R$ 20 = R$20,00 ai ta beleza eu quero cliar mais um campo no formulario combox de pago e pendente ,sera que voce poderia me ajudar desde ja agradeço
Oi Mauro,
Dà uma olhada na comunidade brasileira: extjs.com.br – tem um plugin para isso.
[]‘s
Muito bom o seu site Loiane.
Obrigado por compartilhar seu conhecimento.
Loiane,
Boa tarde! Baixei este exemplo e quero uma ajudazinha sua para resolver um problema aqui. Criei o banco usando Postgresql com UTF-8. Entretanto, ao salvar os dados no banco, o ExtJS 4 envia os dados codificados em UTF-8, algo do tipo: “teste 123 descriu00e7u00e3o!!”
Já fiz o teste no banco (através de update) e o mesmo aceita acentuação.
Como envio os dados para o servidor sem essa codificação UTF-8?
MUITO obrigado!
Att.,
Fabiano
Loiane,
Consegui resolver o problema, através desta dica aqui: http://www.extjs.com.br/forum/index.php?topic=6843.msg35132#msg35132
Basta nao utilizar a função stripslashes no lado do PHP.
Obrigado!
Loiane,
Seria possível me tirar 2 dúvidas?
1-estou iniciando com extjs, então como consigo ver os erros gerados pelo php?
2-esse exemplo ao excluir o registro, ele atualiza o grid mas não remove o registro da lista, só remove no segundo refresh do grid, quando apago outro registro ou clico em atualizar. como consigo consertar?
Obrigado!
Oi Mauro,
1 – tem que ver isso em um forum de php. Infelizmente não sei php, só fiz um exemplo básico já que tinha mt gente procurando.
2 – é como o exemplo trabalha. se quiser mudar, o server precisa enviar um ack para a store remover automaticamente.
[]‘s
Loiane, no controller…this.control({.
'contatogrid dataview': {.
itemdblclick: this.editarContato.
},
'contatogrid button[action=add]': {.
click: this.editarContato.
},….
o itemdblclick e o click tem retorno diferente não poderia esta em um mesmo disparo, assim impossibilitando a linha" if(record){" pois o retorno do button é feito via function(button) e não como o grid click function(grid, record).
Preferi chamar separado:
this.control({
'contatogrid dataview': {.
itemdblclick: this.editarContato.
},
'contatogrid button[action=add]': {.
click: this.inserirContato.
},
'contatogrid button[action=delete]': {.
click: this.deleteContato.
},
'contatoform button[action=save]': {.
click: this.updateContato.
}.
});.
},
inserirContato: function(button) {.
var edit = Ext.create('ExtMVC.view.contato.Formulario').show();.
},
editarContato: function(grid, record) {.
var edit = Ext.create('ExtMVC.view.contato.Formulario').show();.
edit.down('form').loadRecord(record);
}.
Essa é a beleza do Ext JS Guilherme. Existem n maneira de se fazer a mesma coisa. Tudo é questão de preferencia pessoal!
[]s