crud avançado com ext js 3
DESCRIPTION
CRUD Avançado Com Ext JS 3TRANSCRIPT
Ext JS My Projects
Native to Web
Sencha Touch
Web Development
Bruno Tavares
Home
About Me
What about ExtDesenv.com?
Categorias
Código completo e demo online no final do post
Nesse tutorial iremos criar um CRUD completo de usuários. CRUD é um acrônimo de Create, Read, Update e
Delete, ou seja, as 4 principais ações de um cadastro simples usando banco de dados: Criar, Ler, Atualizar e
Deletar. Iremos abordadar conceitos como:
Criando um Grid e populando-o com dados do servidor com paginação
Abrindo janela pop-up ao clicar em um registro
Popular um formulário com base no registro
Como carregar corretamente um combo ao popular o formulário
Submitando um formulário Ext
O código apresentado não é simplesmente didático, ele é um exemplo da codificação que
dia-a-dia na programação Ext JS. Vou incrementar então nesse tutorial algumas coisas
aplicação Ext e também abordar conceitos de Orientação a Objetos.
Para dar uma visão geral do que será feito estou anexando um print do resultado final. A interface será baseada
no outro tutorial meu chamado “Como abrir páginas de um menu no centro de sua aplicação
será formado de um grid de usuários, e ao usuário clicar em um registro uma tela de edição irá aparecer.
Também usaremos a mesma tela para realizar inclusão de novos registros.
Visão geral do CRUD
CRUD Avançado com Ext JS 3.0
Como em grande parte dos tutoriais irei utilizar a pasta examples do Ext para armazenamento da minha
aplicação. Nela irei criar uma sub-pasta chamada crudUsuarios. Estou utilizando a IDE Aptana Studio e já
tenho um projeto preparado para essa aplicação. Também já tenho um site no Apache cri
funcional. Podemos começar!
Estrutura Final da Aplicação
No lado do servidor usaremos PHP e MySQL. Gostaria de criar uma outra versão desse tutorial com ASP.NET e
SQLServer mas alguém tem que mostrar interesse :). Não irei fazer nenhum passo-a-pass
server-side, estou disponibilizando um .zip com os arquivos e também dois diagramas: um de banco de dados
e outro dos fontes PHP.
Diagramas
server-side.zip
Para construção desse CRUD partimos do princípio de que cada interface é uma classe,
extender de um componente do Ext. Iremos dividir cada classe em um arquivo, portanto
listagem de usuários vamos criar uma classe chamada UsuarioLista e vamos extendê-la de Ext.grid.GridPanel.
Esse é o ponto fundamental de uma boa arquitetura de aplicação Ext. Fazendo cada inte
por uma classe podemos nos beneficiar de todo o ciclo de vida de um componente Ext (c
destruição…), além de evitar a “misturança” de código que sempre acaba ocorrendo. Com
conceito de “aplicação-de-uma-só-página” é fundamental estruturar cada interface dess
Iremos sobreescrever o método initComponent, que é o metodo invocado para executar configurações no
componente, e nele iremos definir um store para o grid, suas colunas e alguns atributos extra. Iremos definir o
evento de clique sobre o grid no método initEvents. Veja como está a estrutura básica até agora:
123456789
1011121314
var UsuarioLista = Ext.extend(Ext.grid.GridPanel, {//Config Options { border: false, stripeRows: true, loadMask: true,//} //inits { initComponent: function() { //store do grid this.store = new Ext.data.JsonStore({ url: 'Ajax/UsuarioAjax.php', root: 'rows',
151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
idProperty: 'usuarioID', totalProperty: 'totalCount', autoLoad: true, autoDestroy: true, baseParams: { action: 'listaUsuarios', limit: 30 }, fields: [ { name: 'usuarioID', type: 'int' }, { name: 'nome', type: 'string' }, { name: 'UF', type: 'string' }, { name: 'cidade', type: 'string' }, { name: 'nivelHierarquicoID', type: 'int' }, { name: 'nivelHierarquicoDescricao', type: 'string' } ] }); //demais atributos do grid Ext.apply(this, { viewConfig: { emptyText: 'Nenhum registro encontrado', deferEmptyText: false }, bbar: new Ext.PagingToolbar({ //paginação store: this.store, pageSize: 30 }), tbar: ['->', { text: 'Novo usuário', iconCls: 'silk-add', scope: this, handler: this._onBtnNovoUsuarioClick }, { text: 'Excluir Selecionados', iconCls: 'silk-delete', scope: this, handler: this._onBtnExcluirSelecionadosClick }], columns: [{
Dessa forma o nosso grid já deve estar requisitando dados no servidor e renderizando o grid. Como não temos
ainda registros vamos criar a ação do botão “Novo usuário”. Este botão quando clicado
cadastro e mostrá-la. Como também iremos mostrar essa janela ao editar um registro, v
rotina de criação da janela em um método para evitar repetição de código:
75767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
dataIndex: 'nome', header: 'Nome' }, { dataIndex: 'UF', header: 'Estado' }, { dataIndex: 'cidade', header: 'Cidade' }, { dataIndex: 'nivelHierarquicoDescricao', header: 'Nivel Hierarquico' }] }); //super UsuarioLista.superclass.initComponent.call(this); }, initEvents: function() { //super UsuarioLista.superclass.initEvents.call(this); this.on({ scope: this, rowdblclick: this._onGridRowDblClick }); }, //} //Overrides{, onDestroy: function() {},//} //Listeners { _onBtnNovoUsuarioClick: function() {}, _onBtnExcluirSelecionadosClick: function() {}, _onGridRowDblClick: function(grid, rowIndex, e) {}//} //Demais métodos {//}}); Ext.reg('e-usuariolista', UsuarioLista);
12
,_onBtnNovoUsuarioClick: function(){
Nesse pedaço de código demonstro um conceito muito importante, o reaproveitamento de janelas
essa janela pode ser invocada várias vezes é uma importante otimização criá-la soment
guardar sua referência, e depois só ir reciclando ela. Portanto, no método _criaWindowUsuario
referência da janela existe. Se não existir, eu crio, senão somente retorno a referência. Com a referência em
mãos, seja ela nova ou reciclada, iremos setar o id do usuário para a janela e ela irá “se virar” para mostrar as
informações corretas. Mas atenção, essa otimização requer que sua janela tenha o conf
setado para hidden ao inves de destroy (veremos isso na definição da janela).
Assim como criamos uma janela e guardamos sua referência, precisamos também destruí-l
referência. Aproveitamos o método onDestroy do grid para fazer isso. Quando o grid for destruído, deve
destruir também a janela.
Além do conceito de reciclagem existe um outro apresentado no código de criação da ja
personalizados. Veja que ao criar a janela eu associo um listener aos eventos salvar e excluir
não são nativos do Ext. Nós iremos programá-los, para que quando o usuário salve ou e
345678910111213141516171819202122232425262728
//cria janela de cadastro this._criaWindowUsuario(); //seta atributos this._winUsuario.setUsuarioID(0); //mostra this._winUsuario.show();} ,_criaWindowUsuario: function(){ if(!this._winUsuario) { this._winUsuario = new UsuarioCadastro({ renderTo : this.body //restringe área da janela ,listeners :{ scope : this ,salvar : this._onCadastroUsuarioSalvarExcluir ,excluir: this._onCadastroUsuarioSalvarExcluir } }); } return this._winUsuario;}
12345678
,onDestroy: function(){ UsuarioLista.superclass.onDestroy.apply(this,arguments); //destrói a janela de usuário e limpa sua referência Ext.destroy(this._winUsuario) this._winUsuario = null;}
grid seja recarregado.
A janela de cadastro é outra interface, por isso um outro arquivo e uma outra classe. Vamos criar a classe
UsuarioCadastro e extendê-la de Ext.Window. Vamos em initComponent criar o formulário e ainda já definir o
método onDestroy liberando as referências realizadas:
12345678910111213
,listeners :{ scope : this ,salvar : this._onCadastroUsuarioSalvarExcluir ,excluir: this._onCadastroUsuarioSalvarExcluir} ... ,_onCadastroUsuarioSalvarExcluir: function(){ //recarrega grid this.store.reload();}
123456789
1011121314151617181920212223242526272829303132
var UsuarioCadastro = Ext.extend(Ext.Window,{ //Config Options { //UsuarioCadastro usuarioID: 0 //super ,modal : true ,constrain : true ,maximizable: true ,width : 450 ,height : 300 ,title : 'Cadastro de Usuário' ,layout : 'fit' /* Essa janela será reaproveitada, por isso closeAction deve ser HID ,closeAction: 'hide' //} //Acessores { ,setUsuarioID: function(usuarioID) { this.usuarioID = usuarioID; } //} //Inits {
333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
,constructor: function() { this.addEvents({ salvar : true ,excluir: true }); //super UsuarioCadastro.superclass.constructor.apply(this } ,initComponent: function() { //combo de nivel hierarquico this.comboNivelHierarquico = new Ext.form.ComboBox({ fieldLabel : 'Nivel Hierárquico' ,hiddenName : 'nivelHierarquicoID' ,xtype : 'combo' ,triggerAction : 'all' ,valueField : 'nivelHierarquicoID' ,displayField : 'descricao' ,emptyText : 'Selecione um Nível' ,allowBlank : false ,store : new Ext.data.JsonStore({ url : 'Ajax/NivelHierarquicoAjax.php' ,baseParams : { action: 'listaNiveisHierarquicos' } ,fields:[ {name: 'nivelHierarquicoID', type: ,{name: 'descricao' , type: ] }) }) //formulário this.formPanel = new Ext.form.FormPanel({ bodyStyle : 'padding:10px;' ,border : false ,autoScroll : true ,defaultType: 'textfield' ,defaults : { anchor: '-19' } ,items:[{ fieldLabel : 'Nome' ,name : 'nome' ,allowBlank : false ,maxLength : 100 },{ fieldLabel : 'Estado' ,name : 'UF' ,anchor : ' ' ,width : 50 ,maxLength : 2 },{ fieldLabel : 'Cidade' ,name : 'cidade' ,maxLength : 100 }
93949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
,this.comboNivelHierarquico] }) Ext.apply(this,{ items : this.formPanel ,bbar : ['->',{ text : 'Salvar' ,iconCls: 'icon-save' ,scope : this ,handler: this._onBtnSalvarClick }, this.btnExcluir = new Ext.Button({ text : 'Excluir' ,iconCls: 'silk-delete' ,scope : this ,handler: this._onBtnDeleteClick }) ,{ text : 'Cancelar' ,iconCls: 'silk-cross' ,scope : this ,handler: this._onBtnCancelarClick }] }) //super UsuarioCadastro.superclass.initComponent.call( } //} //Override { ,show: function(){ //super UsuarioCadastro.superclass.show.apply(this,arguments); //TODO: rotina para carregar formulario } ,onDestroy: function() { //super UsuarioCadastro.superclass.onDestroy.apply(this this.formPanel = null; } //} //Listeners { ,_onBtnSalvarClick: function(){} ,_onBtnDeleteClick: function(){} ,_onBtnCancelarClick: function(){} //}
Depois disso sua janela já pode ser visualizada, porém ainda não está funcional. Para incluir um novo usuário
devemos definir uma ação para o botão “Salvar”. Perceba os passos realizados: a validação é realizada, o
submit é realizado, e após tudo isso disparamos o evento personalizado salvar. Um único método no Ajax trata
da inserção e da atualização, única diferença é que na inserção usuarioID é igual a zero e na atualização não
Feito isso já estamos aptos a acessar a listagem, clicar em novo usuário, preencher o formulário e salvar. Ao
fazer isso a janela será fechada, o grid atualizado e nosso novo registro listado.
Vamos então agora ver como é feita a atualização. Para isso precisamos, na classe UsuarioLista
método que monitora o duplo click nas linhas do grid. Fazemos basicamente o que fizem
usuário, porém agora o id do usuário não será mais zero.
153 });
1234567891011121314151617181920212223242526272829303132333435363738
,_onBtnSalvarClick: function(){ //pego o formulário var form = this.formPanel.getForm(); //verifico se é valido if(!form.isValid()) { Ext.Msg.alert('Atenção','Preencha corretamente todos os campos!' return false; } //crio uma máscara this.el.mask('Salvando informações'); /* * Submitando formulário */ form.submit({ url : 'Ajax/UsuarioAjax.php' ,params : { action : 'criaAtualizaUsuario' ,usuarioID : this.usuarioID } ,scope:this ,success: function() //ao terminar de submitar { //tirá máscara this.el.unmask(); //esconde janela this.hide(); //evento disparado this.fireEvent('salvar',this); } });}
1 ,_onGridRowDblClick: function( grid, rowIndex, e )
A classe UsuarioLista está fazendo sua parte, agora basta a janela fazer a sua. Ao mostrar a janela devemo
verificar qual o valor da variável usuarioID. Se for zero, o formulário deve ser resetado (lembra que ele pode ser
reciclado e conter valores antigos?). Caso não for zero, o formulário deverá ser populado.
234567891011121314151617
{ //busca registro da linha selecionada var record = grid.getStore().getAt(rowIndex); //extrai id var usuarioID = record.get('usuarioID'); //cria janela de cadastro this._criaWindowUsuario(); //seta atributos this._winUsuario.setUsuarioID(usuarioID); //mostra this._winUsuario.show();}
12345678910111213141516171819202122232425262728293031323334353637
,show: function(){ //super UsuarioCadastro.superclass.show.apply(this,arguments); if(this.usuarioID !== 0) //se tem usuario { //pode excluir this.btnExcluir.show(); //crio uma máscara this.el.mask('Salvando informações'); /* * Carregando o formulário. Ele deve respeitar algums formatos especi * Ext.form.Action.Load, como por exemplo conter uma propriedade succ */ this.formPanel.getForm().load({ url : 'Ajax/UsuarioAjax.php' ,params : { action : 'buscaUsuario' ,usuarioID : this.usuarioID } /* * Quando o formulário carregar vou tratar problemas de carregar * e tirar a máscara */ ,scope : this ,success: this._onFormLoad }); } else //se não existir usuario { //não pode excluir this.btnExcluir.hide();
Na rotina que popula o formulário existe um problema com o combo. O store do combo de
não foi carregado. O formulário ao ser populado vai tentar setar valor no combo, porém como o store está
vazio o próprio ID vai ser atribuído. Resultado disso, temos na interface o id do nivel hierarquico e não a
descrição. Esse é um problema muito enfrentado por iniciantes. Existem duas abordagen
de níveis hierarquicos antes do form, ou criar um registro local. Eu prefiro a segunda opção por ter
performance melhor. Meu combo pode conter centenas de registros e meu form conter dez
combos. Carregá-los todos de uma vez pode degradar a performance da tela. Por isso ju
formulário eu também retorno não somente o ID do combo mas também a descrição. Com o
em mãos posso criar um registro local:
Até aqui já podemos listar usuários, criar novos usuários, e alterar usuários já registrados, resta somente a
remoção de registros. Duas formas são propostas: remover o usuário na tela de seu cad
múltiplos usuários na listagem. Ambos os métodos são bem fáceis e vou somente postá-l
Em UsuarioLista o método é este:
383940414243
/* * Resetando o formulário */ this.formPanel.getForm().reset(); }}
12345678910111213141516171819202122
,_onFormLoad: function(form, request){ var data = request.result.data; if( data.nivelHierarquicoID ) //se o registro possui nivelHierarquicoID { //crio novo registro var novoRegistro = new this.comboNivelHierarquico.store.recordType({ nivelHierarquicoID : data.nivelHierarquicoID ,descricao : data.nivelHierarquicoDescricao }); //adicionado no store this.comboNivelHierarquico.store.insert(0,novoRegistro); //e seto o valor this.comboNivelHierarquico.setValue(data.nivelHierarquicoID); } //tiro uma máscara this.el.unmask();}
12345
,_onBtnExcluirSelecionadosClick: function(){ //busco selecionados var arrSelecionados = this.getSelectionModel().getSelections();
E em UsuarioCadastro este:
678910111213141516171819202122232425262728293031323334353637383940
if( arrSelecionados.length === 0 ) { Ext.Msg.alert('Atenção','Selecione ao menos um registro!' return false; } Ext.Msg.confirm('Confirmação','Deseja mesmo excluir o(s) registro(s) sele if(opt === 'no') return; var usuariosID = []; for( var i = 0 ; i < arrSelecionados.length ; i++ ) { usuariosID.push( arrSelecionados[i].get('usuarioID' } this.el.mask('Excluindo usuários'); Ext.Ajax.request({ url : 'Ajax/UsuarioAjax.php' ,params : { action : 'deletaUsuarios' ,'usuariosID[]' : usuariosID } ,scope : this ,success: function() { this.el.unmask(); this.store.reload(); } }); },this);}
123456789101112131415161718192021
,_onBtnDeleteClick: function(){ Ext.Msg.confirm('Confirmação','Deseja mesmo excluir esse registro?' { if(opt === 'no') return this.el.mask('Excluir usuário.'); Ext.Ajax.request({ url : 'Ajax/UsuarioAjax.php' ,params : { action : 'deletaUsuario' ,usuarioID : this.usuarioID } ,scope : this ,success: function() { this.el.unmask(); this.hide();
: 9th setembro 2009 : Bruno Tavares : Ext JS
Bem galera, acho que acabei juntando muito conteúdo em um post só porém me esforcei a
deixar o código bem comentado e o post bem organizado. Espero ter sido o mais complet
sanado diversas dúvidas. Também espero ter demonstrado como organizar melhor o seu có
interface ser representada por uma classe. Vejo diversos códigos muito complicados em
realiza um monte de carregamento dinâmico de javascript, uma “mistureba” de component
iframes em todo lugar, etc…
O Ext é fácil! O difícil é entender que Javascript não é somente linguagem de validação de formulário e sim
uma linguagem que implementa sua maneira de orientação a objetos e por isso necessita
mais profissional.
Estou a disposição aqui através dos comentários, no twitter, no email contato[at]bruno.tavares.me, no
brasileiro (bt_bruno)…enfim, entre em contato! :D E comentem! Seus comentários são incentivo pa
posts! Até a próxima!
CódigoCompleto
Demo Online
222324252627282930
/* * Evento personalizado excluir sendo disparado */ this.fireEvent('excluir',this); } }) },this)}
Post It
Miguel Cartagena View %d 10UTC %B 10UTC %Y
Responder
Bruno Tavaresreplied: View %d 10UTC %B 10UTC %Y
Sign in with Twitter Sign in with Facebook
or
Name
EmailNot published
Website
Comment
You may format code with [code][/code] and use <a> and <strong>.
88 Replies
77 Comments
0 Tweets
0 Facebook
10 Pingbacks
Last reply was 1 week ago
Bruno, ficou muito bom seu CRUD, especialmente para quem está começando. No entando,
tenho duas sugestões:
1- Que tal utilizar o RowEditor para edição das linhas? Creio que é uma solução bem m
elegante.
2- O próximo exemplo poderia ser um CRUD “pai e filho”, como alguns chamam. Aqueles o
cada linha (cadastro) está vinculado a uma outra lista. Por exemplo: cadastro de uma
entrada e a lista dos items que estão na nota fiscal.
Esse é um CRUD mais elaborado e bastante utilizado. então creio que seja um ótimo exe
Precisando de ajuda, estamos aí :)
Abraços
Grande Miguel! Valeu pelas sugestões! O RowEditor de fato é bem mais bacana, porém co
queria abordar também algumas questões de formulário, acabei decidindo pela pop-up. M
Responder
Christian MATOLAreplied: View %d 29UTC %B 29UTC %Y
Responder
Wemerson View %d 10UTC %B 10UTC %Y
Responder
Bruno Tavaresreplied: View %d 10UTC %B 10UTC %Y
Responder
CRUD local Ext - Editando registros em janela | ExtDesenv View %d 11UTC %B 11UTC %Y
nada impede de uma versão com RowEditor ;) E sobre o CRUD pai filho, ótima questão. E
pensando em fazer um “CRUD local”, aonde todos os dados vão ficando em buffer para dep
serem salvos, e o exemplo de Nota Fiscal é ideal para isso.
Abraço!
Parabéns Bruno pelo post! Eu q estou começando e acabei de achar este post e estou
estudando o mesmo para inicializar na programação web Ext JS, PHP e MySQL, achei muit
bacana. Parabéns ao Miguel tmb, pois o exemplo q ele deu é muito bom e justamente o q
estava procurando, como fazer em PHP e MySQL e acabei encontrando este post bem legal
Seria de MUITA IMPORTÂNCIA esta nova versão! Espero q sai logo logo. Parabéns mesmo a
aguardo a novo versão! Grande abraço a todos!
Nossa, Melhor tutorial até agora, parabéns mesmo pela iniciativa, agora sim entendi o
conceitos de extends, aplly, classes no ext e outros. Muito obrigado, acho que isso v
muitas pessoas, ficou otimo, bem estruturado e comemtado. parabéns pelo blog, espero
cada dia cresça mais, com certeza vou divulgar esse blog.
Seu entusiasmo e agradecimento me serve como forte incentivo para tutorias ainda melh
Muito obrigado pela participação Wemerson! Abraço!
[...] Notem que declarei o script gridWindow.js, criar este script será nosso próximo
declarei uma classe singleton, ou seja, uma classe que não pode ser instanciada. Ela
uma instancia, global e única no sistema, como Ext ou Ext.Ajax. Essa modelo é famoso
chamado de Module Pattern, e na minha opinião atende bem pequenas aplicações. Para
aplicações maiores sugiro a arquitetura de classes de interface publicada no post CRU
Avançado. [...]
Responder
@franciscoluiz View %d 12UTC %B 12UTC %Y
Responder
Bruno Tavaresreplied: View %d 12UTC %B 12UTC %Y
Responder
Edson Luiz Pieczarka Júniorreplied: View %d 13UTC %B 13UTC %Y
Responder
@franciscoluiz View %d 12UTC %B 12UTC %Y
Me tira uma dúvida por favor…
Em um grande sistema, aonde são declarados muitas classes, muitas referencias aos arq
js…. Como a idéia “aplicação-de-uma-só-página”, o navegador do cliente/usuário iria t
carregar na abertura do sistema todas os arquivos js, correto? Em um sistema grande,
isso não afetaria diretamente o desempenho do carregamento?
Não gosto nem um pouco da idéia de abrir cada ‘módulo’ em um iframe, pois afinal… só
fato de se um iframe já é motivo para ficar de nariz torcido… Porém com ele, nesse un
aspecto, ele iria carregando os arquivos js somente a medida que o usuário for abrind
verdade? Ou estou aquivocado?
Excelente pergunta! Você está correto sim nas afirmações. Carregar todos os javascrip
inviável e usar iframes degrada muito a performance. Aí que entra um conceito complem
toda a arquitetura: Carregamento de Javascript Sob-Demanda. Eu não entrei ainda a fundo
na arquitetura por isso não comentei. Fiz apenas uma breve introdução sobre esse assu
blog Framebox: Como carregar Javascript dinâmicamente . Em breve vou postar aqui um
exemplo específico para Ext.
Abraço!
Olá Bruno! Parabéns pelo tutorial!!!
Sobre o carregamento de javascript sob demanda, você me indica outro tutorial ou mate
mais completo?
Poxa, acabei de analisar sobre o carregamento dinamico no outro post… Muito interessa
Depois vou ler com dedicação total os artigos do NZakas e do SSouders…
Responder
Rafael Kassner View %d 19UTC %B 19UTC %Y
Responder
Bruno Tavaresreplied: View %d 21UTC %B 21UTC %Y
Responder
Kleiser Nairobi View %d 19UTC %B 19UTC %Y
Você aplica essa técnica em todos seus sistemas ext js?
Aguardando um exemplo especifico… quem sabe em cima desse CRUD avançado… :D
Abraços e sucesso a todos!
Opa, muito bom este artigo, segui à risca e ficou show de bola!
Mas assim, como quero extender ele, preciso criar um form com cadastro de usuário, e
senha e validação da senha.
Tentei acoplar o método desse artigo (http://blog.adampresley.com/2008/advanced-
data-validation-using-extjs/), porém não tive sucesso. Até consegui fazer os campos ficarem do
tipo password, mas as a parte de validação em si não funciona. Poderia me dar um auxí
Valeu!
Olá Rafael,
legal saber que está servindo de base para você este tutorial. Sobre a validação de s
rapidinho de fazer, os próprios exemplos do Ext mostram como. Se você está tendo prob
pode recorrer ao fórum brasileiro. Posta lá sua dúvida que eu mesmo ou outro desenvol
com certeza lhe ajudará.
Abraço!
A empresa que trabalho adotou o EXT para confecção de suas interfaces. Confesso que j
xinguei até a quarta geração de quem criou esse framework. kkkk
Parabenizo-te pela ajuda à comunidade de desenvolvedores Ext. De longe seu artigo é o
esclarecedor. Espero que continue com seu empenho e sou mais um a fazer coro pelo exe
pai-filho, utilizando uma NF.
Responder
Carregar código javascript Ext sob demanda, dinamicamente | ExtDesenvView %d 24UTC %B 24UTC %Y
Responder
Eduardo Oliveira View %d 29UTC %B 29UTC %Y
Responder
Franciscoreplied: View 1 week ago
Responder
Nota Fiscal ExtJS Crud Pai Filho | ExtDesenv View %d 06UTC %B 06UTC %Y
Responder
Pablo View %d 31UTC %B 31UTC %Y
[...] post CRUD Avançado apresentei um pouco sobre a arquitetura que julgo ser ideal
aplicações Ext. Para [...]
Bom dia
eu sou novo em programação com o extjs
eu baixei o arquivo e não consegui popular os dados no grid
o combo funciona mas o grid nao
algume pode me ajudar por favor
obrigado.
Eu tambem não consigo iniciar a grid e nem chamar o formulario de cadastro, baixei o
projeto todo, li todo o tutorial e ate agora nada
[...] de uma nota fiscal, justamente o exemplo que irei abordar agora. O que difere e
do crud avançado postado anteriormente, é que esse usa um conceito muito bacana que
chamo de buffer de dados. Todos [...]
Bruno, parabéns pelo tutorial! muito bom.
deixa eu te perguntar: porque vc usa scope: this nos botoes da toolbar?
valeu!
ResponderAntonio Cesar View %d 18UTC %B 18UTC %Y
Responder
Bruno Tavaresreplied: View %d 18UTC %B 18UTC %Y
Responder
Henrique Eloi View %d 05UTC %B 05UTC %Y
Responder
Bruno Tavaresreplied: View %d 11UTC %B 11UTC %Y
Bruno, primeiro quero parabenizar pelos tutoriais. Muito Obrigado. Mas a minha dúvida
que é também de muitas pessoas, seria saber como é o processo para você aprender as
informações até conseguir fazer um tutorial tão rico. Eu gostaria de saber resumidame
você faz… se você lê algum livro sobre Ext, ou estuda a API, ou lê algum tutorial em
se basear etc. Obrigado!!!
Fico grato pelo comentário Antonio! Aprender Ext requer um esforço um pouco maior que
outros frameworks, porque sua curva de aprendizado é grande. Atribuímos a ele essa
característica pela sua complexidade, número de componentes e etc… Fundamentalmente
meu conhecimento vêm da experiência diária com o framework, mas leitura do fórum não
podem ser descartadas.
Veja que não existe muito material não oficial do Ext. A grande parte está no site de
boa pedida seria iniciar alterando exemplos já prontos do framework, e quando estiver
podes criar suas próprias aplicações. Adicione a isso um pouco de leitura do ExtDesen
posts do fórum brasileiro e americano, isso irá refinar o seu código e torná-lo um me
programador.
Enfim, é isso! Qualquer coisa não hesite em conversar! Abraço, e sucesso!
E ai Bruno, show estes seus tutoriais.
Como vc comentou a cima no tutorial, eu tenho muito interesse que vc fizesse um tutor
destes de Ext e asp.net C#.
Abraços
Bacana Henrique, assim que eu puder irei adaptar o server-side para .NET. Te aviso!
Responder
Epson View %d 26UTC %B 26UTC %Y
Responder
Everton Melo View %d 06UTC %B 06UTC %Y
Responder
Samir View %d 11UTC %B 11UTC %Y
Responder
Como abrir páginas de um menu no centro de sua aplicação | ExtDesenvView %d 19UTC %B 19UTC %Y
Responder
Como abrir páginas de um menu no centro de sua aplicação View %d 15UTC %B 15UTC %Y
Responder
CRUD Pai-Filho: exemplo de nota fiscal View %d 15UTC %B 15UTC %Y
abs!
Acho que você já deve estar acostumado a ouvir elogios a respeito do seu tutorial e c
razão. Meus parabéns, ele é de fato fonte de grande motivação para quem quer desenvol
usando este framework. Bruno uma duvida minha: É possível usar ASP no lugar do PHP?
MUITO OBRIGADO VALEU MESMO SEU SITE AJUDA MUITAS PESSOAS NO DIA DIA
Bruno,
Parabens pelo site, está me ajudando muito no aprendizado da Extjs, principalmente no
padrões pois sei que precisamos de atenção dobrada ao utilizar esse framework.
Abrs,
Samir
[...] Além disso temos exemplos mais completos no blog que podem também lhe ajudar, c
por exemplo o Crud Avançado e Carregar códig Ext sob [...]
[...] Além disso temos exemplos mais completos no blog que podem também lhe ajudar, c
por exemplo o Crud Avançado e Carregar códig Ext sob [...]
Responder
Carregar código Ext sob demanda View %d 15UTC %B 15UTC %Y
Responder
Criando Ext.Window para edição de dados de um grid – CRUD LocalView %d 15UTC %B 15UTC %Y
Responder
Rubens View %d 02UTC %B 02UTC %Y
[...] de uma nota fiscal, justamente o exemplo que irei abordar agora. O que difere e
do crud avançado postado anteriormente, é que esse usa um conceito muito bacana que
chamo de buffer de dados. Todos [...]
[...] post CRUD Avançado apresentei um pouco sobre a arquitetura que julgo ser ideal
aplicações Ext. Para [...]
[...] Notem que declarei o script gridWindow.js; criar este script será nosso próximo
declarei uma classe singleton, ou seja, uma classe que não pode ser instanciada. Ela
uma instância, global e única no sistema, como Ext ou Ext.Ajax. Essa modelo é famoso
chamado de Module Pattern, e na minha opinião atende bem pequenas aplicações. Para
aplicações maiores sugiro a arquitetura de classes de interface publicada no post CRU
Avançado. [...]
Grande tutorial!!!
Mas tive um probleminha que não estava populando a lista, coloquei os parâmetros sort
(baseParams) na atribuição da store criada no arquivo UsuarioLista.js, ficando assim:
// ...
,baseParams: {action: "listaUsuarios"
,limit: 30
,start: 0
,sort: "Nome"
,dir: "ASC"
}
// ...
Responder
Bruno Tavaresreplied: View %d 05UTC %B 05UTC %Y
Responder
Diogo View %d 05UTC %B 05UTC %Y
Outro problema foi que o combobox da janela estava duplicando os dados devido ao even
onFormLoad do arquivo UsuarioCadastro.js, na linha que tem o seguinte código:
//adicionado no store
this.comboNivelHierarquico.store.insert(0,novoRegistro);
deixei assim:
//adicionado no store se nao houverem registros
if(this.comboNivelHierarquico.store.getCount()==0){
this.comboNivelHierarquico.store.insert(0,novoRegistro);
}
Isto ocorreu devido a form não estar criada na primeira vez e se fechamos ela fica oc
duplica o valor do combo.
Abraço a todos.
Valeu pelas modificações Rubens. Assim que eu puder vou dar uma refatorada no exemplo
Abs!
Muito bom Bruno … Podemos criar n sistemas com esta
base que postou.
Porém sou novo aqui e já estou com meio caminho andado
tentando seguir seu exemplo. Não entendi a forma que vc
chama a listagem de cadastros : “Ao dá 2 cliques em usuarios
crie uma nova aba com a listagem dos cadastros”. Entendi que
a listagem de cadastros é um arquivo a parte .js … Não entendi como
vc o chama.
Abraço e Parabens pela iniciativa.
Diogo
Responder
Bruno Tavaresreplied: View %d 13UTC %B 13UTC %Y
Responder
Ricardo Hirashiki View %d 16UTC %B 16UTC %Y
Olá Diogo! Acompanhe o seguinte:
A listagem de usuarios está num arquivo separado chamado UsuarioLista.js, isso você s
Nesse arquivo tenho uma classe UsuarioLista que extende de GridPanel, e no final regi
xtype da classe como ‘e-usuariolista’. Ponto.
No arquivo index.html eu faço a inclusão desse script, e então a tela de listagem só
esperando para ser usada, certo?
Por fim no arquivo Principal.js, aonde eu coordeno toda as aberturas das telas, eu te
método onNodeClick a minha rotina para abrir essa listagem. “Ao dar dois cliques em u
eu crio uma nova aba, e dentro dessa aba eu coloco minha listagem utilizado o XTYPE d
anteriormente.
Espero ter lhe ajudado. A rotina é um pouco complicadinha =/
abs!
Olá Bruno,
Conheci o ExtJs por acaso, estava pesquisando algumas coisas sobre o JQuery e acabei
deparar com o ExtJs…. Gostei muito dele.
Estou usando como base sua arquitetura para montar uma administração de portais (CMS)
consegui progredir bastante. Seguindo os exemplos dos seus posts (e me matando um pou
com o framework) consegui integrar o carregamento dinâmico de scripts, de outras cois
(editor WYSIWYG, editor de temas, etc…).
Porém, ainda estou com algumas dúvidas:
- Na sua janela de cadastro de Usuário, quando não é informado nenhum nome / Nível
hierárquico, aparece a mensagem de erro, porém não exibe o ícone de alerta descrevend
motivo do erro. Olhei os códigos de exemplo que vem com o extjs 3.2 e a única diveren
eu vi é que você coloca o FormPanel em um Window. Por que não exibe os ícones?
Responder
Bruno Tavaresreplied: View %d 16UTC %B 16UTC %Y
Responder
Ricardo Hirashikireplied: View %d 23UTC %B 23UTC %Y
- Em alguns casos, eu queria exibir o FormPanel diretamente no TabPanel. Um exemplo d
seria uma parte onde é cadastrada as configurações do sistema ou uma parte de “altere
senha”. Eu até consegui criar uma classe que herda o Ext.form.FormPanel e exibir na t
estou com o mesmo problema de validação dos dados (consta o erro, mas não exibe nenhu
mensagem). Tem como resolver isto?
[]´s
Ricardo
1. Aparecer ou não o ícone é configurável. Existe um config. option chamado
indica se o erro deve aparecer num tooltip (“qtip”), ou com um ícone ao lado (“icon”)
mesmo com uma mensagem abaixo do campo (“under”). Veja na documentação de
Ext.form.Field essa propriedade.
Para definir um padrão você pode fazer isto: Ext.form.Field.prototype.msgTarget = ‘si
2. Será que a explicação 1 corrige este?
abs!
Bruno,
Muito obrigado, funcionou usando msgTarget = ’side’ e eu tb tive que colocar
Ext.QuickTips.init(); no início do scritp.
Estou com uma dificuldade agora: dentro do form eu queria colocar uma grid com 2 botõ
tbar) para incluir e alterar dados dessa grid. Por algum motivo, quando eu seleciono
da grid dentro do form, o mesmo index é selecionado da grid principal (a que é renden
aba). Além disso, mesmo cancelando o form os dados da grid não são apagador. Tem como
resolver isso?
Sei que explicando assim é bem difícil. Caso seja necessário, eu enviarei o código pa
obrigado!
Responder
Bruno Tavaresreplied: View %d 25UTC %B 25UTC %Y
Responder
Dr.House View %d 27UTC %B 27UTC %Y
Responder
Bruno Tavaresreplied: View %d 27UTC %B 27UTC %Y
Responder
Dr.housereplied: View %d 28UTC %B 28UTC %Y
Responder
Dr.housereplied: View %d 28UTC %B 28UTC %Y
Olá Ricardo! Nesse caso sugiro abrir um post no fórum brasileiro, exemplificando com
código. Dessa maneira além de receber minha ajuda você recebe o apoio de toda a
comunidade.
Forte abraço!
Bruno, seu exemplo ficou muito bom, e a forma como o código ficou estruturado simples
excelente. Tenho uma dúvida, quando clicamos duas vezes na linha pra abir a edição o
combobox vai duplicando os valores. POr exemplo: Se Tenho um usuário com nivel de
funcionário, e depois clico em outra linha com o mesmo nivel funcionário. Aparecem do
funcionários no combo. Como resolver isso? Grato e parabens pelo site.
Olá Wagner! O problema ocorre porque no método _onFormLoad eu crio novos registros no
combo de superior hierárquico sem verificar se o mesmo já existe. Estarei revisando e
traduzindo esse post, então sua correção vai estar em breve online.
Abs!
Bruno.
Muito obrigado pela resposta rápida, seu trabalho é muito bom. Aguardo ancioso as cor
Grato.
Bruno,
Segue abaixo alteração que fiz no seu fonte. No método _onFormLoad adicionei uma nova
linha que resolveu o problema.
//atualiza o store
this.comboNivelHierarquico.store.reload();
Então o método ficou assim:
_onFormLoad: function(form, request)
{
/* Muitos sabem do inconveniente problema de carregar um formulário e nos combos vir
não a
* descrição. Isso acontece porque o store do combo ainda não esta carregado, e por is
não encontra
* nenhum registro com o id especificado.
*
* 2 Abordagens possíveis. Carregar o combo todo e setar novamente o valor, ou criar u
opção local para o combo.
* Prefiro a segunda por ser MUITO mais performática e otmizar muito o carregamento do
Para isso funcionar
* você deve além de trazer o ID do registro do combo também trazer a descrição
*/
var data = request.result.data;
if( data.nivelHierarquicoID )
//se o registro possui nivelHierarquicoID
{
/*
* crio um novo registro seguindo o protótipo do store do combo
* informando os valores devidos
*/
var novoRegistro = new this.comboNivelHierarquico.store.recordType({
nivelHierarquicoID : data.nivelHierarquicoID
,descricao : data.nivelHierarquicoDescricao
});
//adicionado no store
this.comboNivelHierarquico.store.insert(0,novoRegistro);
Responder
evang View %d 27UTC %B 27UTC %Y
Responder
Bruno Tavaresreplied: View %d 27UTC %B 27UTC %Y
Responder
Junior View %d 07UTC %B 07UTC %Y
//e seto o valor
this.comboNivelHierarquico.setValue(data.nivelHierarquicoID);
//atualiza o store
this.comboNivelHierarquico.store.reload();
}
//tiro uma máscara
this.el.unmask();
}
Espero ter ajudado. Fico no aguardo por novos post.
Abração.
this is great! I try to translate the example code to english but it can’t work :( co
give .zip file in english? thx a lot
Hi @evang! Good to have international comments here =D As soon as I can I’ll be trans
whole article and example ok? Regards, Bruno!
Olá Bruno,
Primeira gostaria de agradecer pelo artigo, o melhor que vi até o momento.
Gostaria de tirar uma dúvida, copiei toda a sua aplicação , mudei apenas o server-sid
usando C#, porem qnd tento rodar ele da o seguinte erro:
b[d.xtype || e] is not a constructor
Ta tudo do jeito q está no site, é como se ele nao tivesse criando o tipo da UsuarioL
includes estão todos no index tb.
Agradeço pela atenção
Responder
Bruno Tavaresreplied: View %d 17UTC %B 17UTC %Y
Responder
Josenilson View %d 18UTC %B 18UTC %Y
Responder
Bruno Tavaresreplied: View %d 18UTC %B 18UTC %Y
Responder
Esse erro é justamente porque você está fazendo uso de um xtype que o Ext não reconhe
Talvez como você tenha dito, a classe UsuarioLista não esteja sendo carregada. Enfim,
verificar na aba “Rede” do firebug se todos os arquivos estão sendo carregados. Além
podes comentar todo seu código, e ir descomentando aos poucos, tentando isolar o erro
Mas com antecedência fica claro afirmar que o problema é um xtype não registrado no E
Olá Bruno!
Cara eu estou utilizando o seu modelo de aplicação (que achei muito interessante) par
um sistema de cadastro de ramais e contatos.
Mas eu me deparei com um problema “superior” chamado CHEFE. Ele não quer que eu abra
WINDOWS de jeito nenhum para o cadastro. Ele quer que o grid e o form estejam juntos
uma única tela como nesse exemplo que o Ext oferece:
DIRETORIO_EXT_BASE/examples/form/form-grid-access.html
Você tem ou sabe algum lugar onde tenha exemplo de como adaptar essa tela hibrida par
modelo de crud que você está usando? Qualquer ajuda é bem vinda!
Olá Josenilson! Eu não tenho exemplo não cara. Mas acompanhe o seguinte: no meu exemp
quando o usuário clica no grid, nós abrimos uma janela e invocamos o método setUsuari
para que a janela possa carregar os dados.
Para colocar as interfaces lado a lado, primeiramente a tela de cadastro deve extende
Ext.Panel, e não mais de Ext.Window. Daí visualmente você já consegue colocar o grid
de cadastro lado a lado na mesma tela (layout column, hbox, etc…).
Tem mais algumas adaptações a fazer, mas eu gostei da sua idéia. Quem sabe eu aprovei
e crio mais um tutorial. Abs, e qqer coisa estamos também no fórum!
Josenilsonreplied: View %d 18UTC %B 18UTC %Y
Fala Bruno! Cara você responde rápido! No forum do Ext eu fico esperando igual um doi
um sinal de vida!
Então na verdade VISUALMENTE eu já fiz tudo o que eu preciso. Coloquei dois grids e u
na tela como queria o chefe. Eu extendi o formPanel ao invés do gridPanel. E nos item
formPanel eu adicionei um grid (xtype: ‘grid’). Mas o meu problema é que não sei como
o form a partir do grid que eu criei. Tentei usar o getCmp mas ele não funciona…
Tipo:
var RamalForm = Ext.extend(Ext.form.FormPanel,{
id: ‘RamalPanel’
,layout: ‘column’
,initComponent: function(){
Ext.apply(this,{
items: [
{
xtype: 'grid'
,id: 'RamalLista'
,sm: new Ext.grid.RowSelectionModel({
singleSelect: true
,listeners: {
rowselect: function(sm, row, rec) {
Ext.getCmp('RamalPanel').getForm().loadRecord(rec); //Isso não funciona! Ele não está
encontrando o RAMALPANEL (nem se eu chamar por RamalForm)
}
}
})
,ds: meu_ds
,columns:[ ... ]
}
,{
xtype: ‘fieldset’
,id: ‘RamalCadastro’
,layout: ‘column’
,items: [ campos do form ]
Responder
Bruno Tavaresreplied: View %d 19UTC %B 19UTC %Y
Responder
Josenilsonreplied: View %d 14UTC %B 14UTC %Y
evang View %d 19UTC %B 19UTC %Y
}
]
})
}
});
Ext.reg(‘CAD_RAMAL’,RamalForm);
Eu postei o código completo no forum do Extjs:
http://www.extjs.com/forum/showthread.php?99555-How-to-navigate-between-
de-components-and-pass-values-to-them&p=468749#post468749
Bem, eu escrevi um post a respeito dessa sua situação. Dê uma olhada e se tiver dúvid
comentar lá. Abs!
Cadastro básico com grid e formulário
Fala Bruno!
Bacana o exemplo! Eu já tinha conseguido fazer isso há algum tempo seguindo a sua
orientação nos comentários anteriores (extendendo o Panel ao invés do Window). E no f
acabou ficando MUITO mais complexo o que o cliente queria… então na verdade agora tem
TabPanels dentro de cada TabPanel e panels (com layout column) com grids e forms! Enf
acho que virou um frankstein visual… mas é exatamente o que foi pedido.
O Ext é realmente tem uma gama muito grande de possibilidades!
Ah, falando em possibilidades eu estava reparando que em todos os exemplos que vi de
no estilo VIEWPORT a aba HOME tem conteudo estático. Como você faz para carregar cont
dinamico nela?
Dear Bruno, could you please share RowEditor example. On extjs forum, people still ge
Responder
Ciff Oliveira View %d 29UTC %B 29UTC %Y
Responder
Bruno Tavaresreplied: View %d 29UTC %B 29UTC %Y
Responder
Fabio Jr. View %d 02UTC %B 02UTC %Y
Responder
Bruno Tavaresreplied: View %d 03UTC %B 03UTC %Y
error “f is undefined”. I try to modify your code to RowEditor but get the same issue
help us. thx a lot!
Primeiro de tudo parabéns pelo post
ele esta me ajudando muito
mas estou com um problema que não consigo resolver, no meu o excluir, não apaga o reg
mesmo que eu clique em No, o processo de chamar o php delete acontece
Olá Ciff! A respeito de não excluir eu não vejo como posso te ajudar, porque envolve a
servidor. Quanto a clicar em “Não” e excluir vc faz o seguinte:
Ext.Msg.confirm(“Atenção”,”Deseja excluir?”,function(opt){
if( opt === “no”){
return; //se respondeu não, cai fora
}
});
Abs!
Olá Bruno, muito útil este exemplo, estou fazendo minha aplicação me baseando neste l
a pergunta é a seguinte, qndo vc inicia essa aplicação o menu pai “Cadastros” vem abe
outros fechados, como faço para que o menu pai “Relatórios” venha aberto por padrão e
demais menus pai fechados?
Obrigado!
Responder
Fabio Jr.replied: View %d 03UTC %B 03UTC %Y
Responder
JEAN FIGUEIREDO View %d 19UTC %B 19UTC %Y
Olá Fabio! Sua pergunta não sumiu, ela estava aguardando aprovação ;) A respeito de t
itens abertos, como o menu lateral se trata de um Painel com layout accordion, só de
definir o atributo activeItem:1 já é o suficiente para trazer itens expandidos ou contraídos.
Claro que no lugar de “1″ você coloca o índice do painel que deseja expandir, acho qu
entender! Você pode saber mais na documentação de Ext.layout.AccordionLayout
Perfeito! Era isso mesmo, desculpe o transtorno.
Uma outra questão, na listagem, vc tem aquele método ‘onDestroy’, não consegui identi
onde ele é chamado, não deveria ser chamado ao fechar a aba em questão? minha pergunt
pq na minha aplicação, eu só declarei este método desta maneira:
onDestroy: function()
{
membroLista.superclass.onDestroy().apply(this, arguments);
Ext.destroy(this.janelaMembro)
this.janelaMembro = null;
},
Porém, ao fechar a aba, o firebug me retorna o seguinte erro:
membroLista.superclass.onDestroy() is undefined
[Break on this error] membroLista.superclass.onDestroy().apply(this, arguments);
Eu te adicionei no MSN para ficar mais fácil de explicar a situação.
Obrigado novamente!
Ola,
boa tarde, nossa estou impressionado msmo com esta ferramenta. A proposito, eu estou
mergulhando neste universo de ExtJS e bem, andei sondando algumas IDE`s e tal. Encont
tal de Aptana. Só que ele nao esta configurado. Já fiz os procedimentos mais ainda si
rola. Você saberia me indicar uma tutor que relamente funciona a parada !!!!!
valeu e .. teu site é show de bola!
Responder
Bruno Tavaresreplied: View %d 20UTC %B 20UTC %Y
Responder
Paulo View %d 29UTC %B 29UTC %Y
Responder
Mayara View %d 10UTC %B 10UTC %Y
Responder
Bruno Tavaresreplied: View %d 10UTC %B 10UTC %Y
Olá Jean! O aptana é fera, eu uso ele (: As únicas coisas que eu alterei nele foi ins
Ext 2.2 (só ir em Help > Install aptana features…), tirar o auto-format de código jav
(Preferences > aptana > editors > javascript > formatting), e eu também adicionei o j
validador de código (Preferences > aptana > editors > javascript > validation).
Infelizmente eu não conheço tutorial, mas é fácil de configurar, você resolve rapidin
entendi especificamente o que vc quer ativar nele.
Abs!
Bruno,
Parabéns pelos excelentes posts!
Olá. Comecei a trabalhar agora com essa ferramenta e não sei quase nada sobre ela. Co
fazer o crud mas não consegui inserí-lo no viewport. Se pudesse me ajudar eu agradece
muito. Desde já agradeço a atenção, Mayara.
Olá Mayara! Não sei de que forma posso lhe ajudar, já que não sei de que forma foi fe
CRUD. Eu publiquei no post o código completo, desde o Ext.onReady(), até a instanciaç
Ext.Viewport. Você poderia tomar isso como exemplo.
Pra quem está começando, talvez seja mais interessante dar uma olha da no post sobre
Cadastro básico com grid e formulário e Como abrir páginas de um menu no centro de sua
aplicação.
Abs!
Responder
Mayara View %d 16UTC %B 16UTC %Y
Responder
Mayara View %d 18UTC %B 18UTC %Y
Responder
Rogério View %d 06UTC %B 06UTC %Y
Responder
Zenner View %d 13UTC %B 13UTC %Y
Muito obrigada pela ajuda..conseguir fazer o q estava precisando. Adorei o resultado!
agradeço a atenção, Mayara.
Olá Bruno, desculpe incomodar novamente, mas quando dou o submit no formulário de
cadastro de novo usuário, o firebug retorna o seguinte erro:
missing ) in parenthetical
[Break on this error] (”;//You have an error in your SQL sy…ear ‘WHERE matricula=1234
1)
No caso, substitui UsuarioID por matricula. Vc sabe o q pode estar dando errado?
Olá estou tentando fazer a implementação do seu exemplo, porém estou tendo dificuldad
para exibir os dados no formulário. Eu clico, ele consegue pegar o ID porém não exibe
restante dos dados. Como faço para fazer o casamento entre os campos que vem do JSON
dados a serem exibidos no form?
[]‘s
Olá Bruno..
Estou com 2 duvidas simples nesse seu exemplo:
1 – Como poderei colocar um div topo no meu cod de forma que a aplicação fique ocupan
todo o espaço abaixo desse “topo”?
2 – Como fazer com que o combobox dos níveis hierárquicos não aceite que nada seje di
nele (digitei um nível não existente e deu uns erros)?
vlw
Responder
Zenner View %d 14UTC %B 14UTC %Y
Responder
Saulo View %d 14UTC %B 14UTC %Y
Responder
Juca View %d 23UTC %B 23UTC %Y
Responder
marcus andre View %d 08UTC %B 08UTC %Y
Responder
leo View %d 28UTC %B 28UTC %Y
Opa.. Outra Dúvida (liga não, sou programadr prático e ainda fico voando com alguns
conecitos)..
Como adaptar esse exemplo usando o carregamento dinamico dos js?
Tem como exemplificar nesse mesmo exemplo?
Bruno,
Boa tarde, peguei seu exemplo e nao consegui rodar, aparece como se estivesse html no
Tema haver com o browser, estou usando IE, ou tem haver com a versão do Extjs, pois e
usando a 3.3.1?
Vlw
Bruno,
Como posso fazer a ação alterar e visualizar?
Tens algum exemplo demonstrando isso? mas utilizando o Crud….
bruno n entendil como faço pra chamar outra aba?
fiz tudo direitinho mencionado anteriormente mais n deu certo,
tem como vc me ajudar?
Belo tópico. Estou com um problema, ao criar os arquivos e no index fazer a chamada d
tenho esse erro ao carregar a página no firebug:
Responder
Christian Matola View %d 30UTC %B 30UTC %Y
Responder
Jhonata View %d 26UTC %B 26UTC %Y
Responder
Bruno Tavaresreplied: View %d 26UTC %B 26UTC %Y
Responder
Daniel View %d 15UTC %B 15UTC %Y
Ext.fly(d) is null
Parabéns Bruno!!! Muito bom o exemplo, principalmente para mim q estou começando agor
Seguinte, fiz tudo direitinho e o exemplo roda quase q 100%, pq:
Não está carregando os dados do BD na grid de Usuários;
Quando chamo o formulário para incluir novo usuário, o mesmo é feito com sucesso e in
no banco de dados, mais não aparece na grid. A grid fica em branco apresentando “Nenh
registro encontrado”. Será q vc pode me ajudar? Grato desde já,
Christian Matola
Muito Bom seus posts!
Venho acompanhando tudo sobre ExtJS e ASP.NET,
gostaria de saber se vai sair um post nesta mesma ideia de crud avançado usando o EXT
ASP.NET.
mais uma vez parabens!!
Abraços
Olá Jhonata! Na verdade Ext JS é agnóstico quanto a linguagens server-side. Não impor
você está usando PHP, Ruby ou ASP.NET. O que importa é que a comunicação cliente – se
tem que ser por JSON (ou xml). Por exemplo, ao submeter um formulário o Ext espera um
resposta “{success: true}”, não importa o que você está usando para criar essa respos
Não pretendo usar outra coisa que PHP para criar exemplos, porque dessa forma é rápid
conseguimos focar mais no Ext.
Eu gostaria de saber como ficaria para adicionar filtros…
Responder
Jorge View %d 03UTC %B 03UTC %Y
Responder
Bruno Tavaresreplied: View %d 08UTC %B 08UTC %Y
Responder
@miguelocarvajal View %d 28UTC %B 28UTC %Y
Responder
CRUD Pai-Filho: exemplo de nota fiscal | ExtDesenv View %d 30UTC %B 30UTC %Y
Responder
Jorge View %d 13UTC %B 13UTC %Y
Boa noite Bruno,
Sou novato no EtxJs, instalei o seu exemplo.
Mas quando executo ele só mostra o menu.
Quando clico na opção ele não faz nada.
Estou usando WAMP, com php e mysql.
Olá Jorge, não tem muito o que eu possa ajudá-lo pela descrição. Se você puder postar
fórum mais detalhes, será mais fácil de ajudar. Abs!
RT @extdesenv: Chega de 404! Estou arrumando os problemas da última atualização em po
antigos, como este :) http://t.co/4wAt1yCf
[...] post CRUD Avançado com Ext recebi uma boa sugestão de exemplificar um CRUD Pai-
Nessa interface temos um registro X que [...]
Boa tarde Bruno,
Recebi seu email sobre o questionamento anterior.
Mas tenho uma pergunta: Como converto o Ext.reg(‘e-usuariolista’, UsuarioLista); para
Pelo conversos do 3 para 4 da sencha, nao consegui. é meio complicado.
Gostaria de saber com fazer para abrir as opções do menu lateral no centro, haja vist
consigo fazê-lo com o extjs 4.
Obrigado,
ResponderRafael View %d 16UTC %B 16UTC %Y
Responder
brunotavaresreplied: View %d 17UTC %B 17UTC %Y
Responder
Aured de Freitas View %d 03UTC %B 03UTC %Y
Responder
brunotavaresreplied: View %d 05UTC %B 05UTC %Y
Responder
Carregar código Ext sob demanda - Bruno Tavares | Bruno Tavares View 10 months ago
Ola estou com o mesmo problema do Jorge… Como converto o Ext.reg(‘e-usuariolista’,
UsuarioLista); para extjs 4.1. ???
Pode ajudar?
Ext.reg é usado no Ext 3 para registar o xtype para essa classe. No Ext 4 você simple
informaria “xtype: ‘e-usuariolista’” na definição da classe.
Dá uma olhada também nos tutoriais de migração de 3 -> 4 e como funciona o sistema de
classes:
– http://docs.sencha.com/ext-js/4-0/#!/guide/upgrade
– http://docs.sencha.com/ext-js/4-0/#!/guide/class_system
Abs!
Bruno, parabéns pelo post. Estou em dúvida de como eu faria para acrescentar uma caix
pesquisa ao lado dos botões de adicionar e excluir. A ideia é que quando eu digitar a
no botão de pesquisa o grid liste os registros com base no critério mencionado. Tem a
sugestão de como devo fazer?
Tem uma extensão chamada Ext.ux.form.SearchField que você só precisa adicionar no too
e conectar ao mesmo Store do grid e ele faz toda parte de filtros.
[...] post CRUD Avançado apresentei um pouco sobre a arquitetura que julgo ser ideal
aplicações Ext. Para [...]
Responder
Alexander Santos View 4 months ago
Responder
teste View 2 months ago
Responder
Eduardo Paludo View 2 months ago
Responder
Muito bom o Post.
Obrigado
teste
Olá Bruno, Bom dia!
Sou meio novo com extjs, fiz o download do código completo, mas como eu faço para uti
Pois no index não abre a aplicação, hehe
Hey there, welcome to my blog! I'm Bruno and
I'm passionate about the web, specially
front-end dev. I'm part of the Sencha Team,
where we push the web forward and try to
prove every day that the web is the best option.
This is my personal blog. The views and
opinions expressed here are mine alone and
Introducing App Inspector for Sencha
Reusing Sencha Touch views with Controller
Helpers
The definitive solution for history support on
Ext JS
Sencha Touch Sliding Menu – The “Facebook
Menu”
Adding Custom Font Icons to Sencha Touch 2.2
*not* those of my employer.