crud avançado com ext js 3

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


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


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


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


Responder

Henrique Eloi View %d 05UTC %B 05UTC %Y

Responder


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 [...]



[...] 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


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){


}

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


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


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


Responder

Dr.House View %d 27UTC %B 27UTC %Y

Responder


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


Responder

evang View %d 27UTC %B 27UTC %Y

Responder


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


Responder

Josenilson View %d 18UTC %B 18UTC %Y

Responder


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


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


Responder

Fabio Jr. View %d 02UTC %B 02UTC %Y

Responder


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


Responder

Paulo View %d 29UTC %B 29UTC %Y

Responder

Mayara View %d 10UTC %B 10UTC %Y

Responder


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


Responder


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


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


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.



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.

crud avançado com ext js 3

Documents