CRUD Avançado Com Ext JS 3

CRUD Avanado com Ext JS 3.
Cdigo completo e demo
Bruno Tavares
Nesse tutorial iremos criar um CRUD completo de usurios. CRUD um acrnimo de C
Delete, ou seja, as 4 principais aes de um cadastro simples usando banco de dados: C

Deletar. Iremos abordadar conceitos como:
Home
Criando um Grid e populando-o com dados do servidor com paginao
About Me
Abrindo janela pop-up ao clicar em um registro
What about ExtDesenv.com?
Popular um formulrio com base no registro

Como carregar corretamente um combo ao popular o formulrio
Submitando um formulrio Ext
O cdigo apresentado no simplesmente didtico, ele um exemplo da codificao q

dia-a-dia na programao Ext JS. Vou incrementar ento nesse tutorial algumas coisas
Categorias
Ext JS
aplicao Ext e tambm abordar conceitos de Orientao a Objetos.
My Projects
Native to Web
Para dar uma viso geral do que ser feito estou anexando um print do resultado final.
no outro tutorial meu chamado Como abrir pginas de um menu no centro de sua apl
Sencha Touch
ser formado de um grid de usurios, e ao usurio clicar em um registro uma tela de ed
Web Development
Tambmusaremos a mesma tela para realizar incluso de novos registros.
Viso geral do CRUD
Como em grande parte dos tutoriais irei utilizar a pasta examples do Ext para armazena
aplicao. Nela irei criar uma sub-pasta chamada crudUsuarios. Estou utilizando a IDE
tenho um projeto preparado para essa aplicao. Tambm j tenho um site no Apache c
funcional. Podemos comear!
Estrutura Final da Aplicao
No lado do servidor usaremos PHP e MySQL. Gostaria de criar uma outra verso desse t
SQLServer mas algum tem que mostrar interesse :).No irei fazer nenhum passo-a-pas
server-side, estou disponibilizando um .zip com os arquivos e tambmdois diagramas:

e outro dos fontes PHP.
Diagramas
server-side.zip
Para construo desse CRUD partimos do princpio de que cada interface uma classe,
extender de um componente do Ext. Iremos dividir cada classe em um arquivo, portant
listagem de usurios vamos criar uma classe chamada UsuarioLista e vamos extend-la
Esse o ponto fundamental de uma boa arquitetura de aplicao Ext. Fazendo cada int
por uma classe podemos nos beneficiar de todo o ciclo de vida de um componente Ext
destruio), alm de evitar a misturana de cdigo que sempre acaba ocorrendo. C
conceito de aplicao-de-uma-s-pgina fundamental estruturar cada interface des
Iremos sobreescrever o mtodo initComponent, que o metodo invocado para exe
componente, e nele iremos definir um store para o grid, suas colunas e alguns atributo
evento de clique sobre o grid no mtodo initEvents. Veja como est a estrutura bsica a
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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',
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
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({
//paginao
store: this.store,
pageSize: 30
}),
tbar: ['->', {
text: 'Novo usurio',
iconCls: 'silk-add',
scope: this,
handler: this._onBtnNovoUsuarioClick
},
{
text: 'Excluir Selecionados',
iconCls: 'silk-delete',
scope: this,
handler: this._onBtnExcluirSelecionadosCli
}],
columns: [{
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
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 mtodos {
//}
});
Ext.reg('e-usuariolista', UsuarioLista);
Dessa forma o nosso grid j deve estar requisitando dados no servidor e renderizando o
ainda registros vamos criar a ao do boto Novo usurio. Este boto quando clicado
cadastro e mostr-la. Como tambm iremos mostrar essa janela ao editar um registro,
rotina de criao da janela em um mtodo para evitar repetio de cdigo:
1
2
,_onBtnNovoUsuarioClick: function()
{
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//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 jan
,listeners :{
scope : this
,salvar : this._onCadastroUsuarioSalvarExcl
,excluir: this._onCadastroUsuarioSalvarExcl
}
});
}
return this._winUsuario;
}
Nesse pedao de cdigo demonstro um conceito muito importante, o reaproveitamen
essa janela pode ser invocada vrias vezes uma importante otimizao cri-la somen
guardar sua referncia, e depois s ir reciclando ela. Portanto, no mtodo _criaWindow
referncia da janela existe. Se no existir, eu crio, seno somente retorno a referncia. C
mos, seja ela nova ou reciclada, iremos setar o id do usurio para a janela e ela ir se
informaes corretas. Mas ateno, essa otimizao requer que sua janela tenha o conf
setado para hidden ao inves de destroy (veremos isso na definio da janela).
Assim como criamos uma janela e guardamos sua referncia, precisamos tambm dest
referncia. Aproveitamos o mtodo onDestroy do grid para fazer isso. Quando o grid for
destruir tambm a janela.
1
2
3
4
5
6
7
8
,onDestroy: function()
{
UsuarioLista.superclass.onDestroy.apply(this,arguments);
//destri a janela de usurio e limpa sua referncia
Ext.destroy(this._winUsuario)
this._winUsuario = null;
}
Alm do conceito de reciclagem existe um outro apresentado no cdigo de criao da ja
personalizados. Veja que ao criar a janela eu associo um listener aos eventos salvar e e
no so nativos do Ext. Ns iremos program-los, para que quando o usurio salve ou e
grid seja recarregado.

1
2
3
4
5
6
7
8
9
10
11
12
13
,listeners :{
scope : this
,salvar : this._onCadastroUsuarioSalvarExcluir
,excluir: this._onCadastroUsuarioSalvarExcluir
}
...
,_onCadastroUsuarioSalvarExcluir: function()
{
//recarrega grid
this.store.reload();
}
A janela de cadastro outra interface, por isso um outro arquivo e uma outra classe. Va
UsuarioCadastro e extend-la de Ext.Window. Vamos em initComponent criar o formul

mtodo onDestroy liberando as referncias realizadas:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
var UsuarioCadastro = Ext.extend(Ext.Window,{

//Config Options {
//UsuarioCadastro
usuarioID: 0
//super
,modal
:
,constrain :
,maximizable:
,width
:
,height
:
,title
:
,layout
:
true
true
true
450
300
'Cadastro de Usurio'
'fit'
/* Essa janela ser reaproveitada, por isso closeA

,closeAction: 'hide'
//}
//Acessores {
,setUsuarioID: function(usuarioID)
{
this.usuarioID = usuarioID;
}
//}
//Inits {
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
,constructor: function()
{
this.addEvents({
salvar : true
,excluir: true
});
//super
UsuarioCadastro.superclass.constructor.apply(t
}
,initComponent: function()
{
//combo de nivel hierarquico
this.comboNivelHierarquico = new Ext.form.Comb
fieldLabel
: 'Nivel Hierrquico'
,hiddenName
: 'nivelHierarquicoID'
,xtype
: 'combo'
,triggerAction : 'all'
,valueField
: 'nivelHierarquicoID'
,displayField
: 'descricao'
,emptyText
: 'Selecione um Nvel'
,allowBlank
: false
,store
: new Ext.data.JsonStore({
url
: 'Ajax/NivelHierarquicoAj
,baseParams : {
action: 'listaNiveisHierarquicos'
}
,fields:[
{name: 'nivelHierarquicoID', type
,{name: 'descricao'
, type
]
})
})
//formulrio
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
}
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
,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,arg
//TODO: rotina para carregar formulario
}
,onDestroy: function()
{
//super
UsuarioCadastro.superclass.onDestroy.apply(thi
this.formPanel = null;
}
//}
//Listeners {
,_onBtnSalvarClick: function(){}
,_onBtnDeleteClick: function(){}
,_onBtnCancelarClick: function(){}
//}
153
});
Depois disso sua janela j pode ser visualizada, porm ainda no est funcional. Para in
devemos definir uma ao para o boto Salvar. Perceba os passos realizados: a valida
submit realizado, e aps tudo isso disparamos o evento personalizado salvar. Um nic
da insero e da atualizao, nica diferena que na insero usuarioID igual a zero

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
,_onBtnSalvarClick: function()
{
//pego o formulrio
var form = this.formPanel.getForm();
//verifico se valido
if(!form.isValid())
{
Ext.Msg.alert('Ateno','Preencha corretamente todo
return false;
}
//crio uma mscara
this.el.mask('Salvando informaes');
/*
* Submitando formulrio
*/
form.submit({
url
: 'Ajax/UsuarioAjax.php'
,params : {
action
: 'criaAtualizaUsuario'
,usuarioID : this.usuarioID
}
,scope:this
,success: function() //ao terminar de submitar
{
//tir mscara
this.el.unmask();
//esconde janela
this.hide();
//evento disparado
this.fireEvent('salvar',this);
}
});
}
Feito isso j estamos aptos a acessar a listagem, clicar em novo usurio, preencher o fo
fazer isso a janela ser fechada, o grid atualizado e nosso novo registro listado.
Vamos ento agora ver como feita a atualizao. Para isso precisamos, na classe Usua
mtodo que monitora o duplo click nas linhas do grid. Fazemos basicamente o que fize
usurio, porm agora o id do usurio no ser mais zero.
1
,_onGridRowDblClick: function( grid, rowIndex, e )
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
//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();
}
A classe UsuarioLista est fazendo sua parte, agora basta a janela fazer a sua. Ao mostra
verificar qual o valor da varivel usuarioID. Se for zero, o formulrio deve ser resetado (l
reciclado e conter valores antigos?). Caso no for zero, o formulrio dever ser populad
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
,show: function()
{
//super
UsuarioCadastro.superclass.show.apply(this,arguments);
if(this.usuarioID !== 0) //se tem usuario
{
//pode excluir
this.btnExcluir.show();
//crio uma mscara
this.el.mask('Salvando informaes');
/*
* Carregando o formulrio. Ele deve respeitar algu
* Ext.form.Action.Load, como por exemplo conter um
*/
this.formPanel.getForm().load({
url
,params : {
action
: 'buscaUsuario'
}
/*
* Quando o formulrio carregar vou tratar prob
* e tirar a mscara
*/
,scope : this
,success: this._onFormLoad
});
}
else //se no existir usuario
{
//no pode excluir
this.btnExcluir.hide();
38
39
40
41
42
43
/*
* Resetando o formulrio
*/
this.formPanel.getForm().reset();
}
}
Na rotina que popula o formulrio existe um problema com o combo. O store do combo
no foi carregado. O formulrio ao ser populado vai tentar setar valor no combo, porm
vazio o prprio ID vai ser atribudo. Resultado disso, temos na interface o id do nivel hie
descrio. Esse um problema muito enfrentado por iniciantes. Existem duas abordage
de nveis hierarquicos antes do form, ou criar um registro local. Eu prefiro a segunda op
performance melhor. Meu combo pode conter centenas de registros e meu form conter
combos. Carreg-los todos de uma vez pode degradar a performance da tela. Por isso ju
formulrio eu tambm retorno no somente o ID do combo mas tambm a descrio. C

em mos posso criar um registro local:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
,_onFormLoad: function(form, request)

{
var data = request.result.data;
if( data.nivelHierarquicoID ) //se o registro possui ni

{
//crio novo registro
var novoRegistro = new this.comboNivelHierarquico.s
nivelHierarquicoID : data.nivelHierarquicoID
,descricao
: data.nivelHierarquicoDesc
});
//adicionado no store
this.comboNivelHierarquico.store.insert(0,novoRegis
//e seto o valor

this.comboNivelHierarquico.setValue(data.nivelHiera
}
//tiro uma mscara
this.el.unmask();
}
At aqui j podemos listar usurios, criar novos usurios, e alterar usurios j registrado
remoo de registros. Duas formas so propostas: remover o usurio na tela de seu cad
mltiplos usurios na listagem. Ambos os mtodos so bem fceis e vou somente post
Em UsuarioLista o mtodo este:
1
2
3
4
5
,_onBtnExcluirSelecionadosClick: function()
{
//busco selecionados
var arrSelecionados = this.getSelectionModel().getSelec
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
if( arrSelecionados.length === 0 )

{
Ext.Msg.alert('Ateno','Selecione ao menos um regi
return false;
}
Ext.Msg.confirm('Confirmao','Deseja mesmo excluir o(s

if(opt === 'no')
return;
var usuariosID = [];

for( var i = 0 ; i < arrSelecionados.length ; i++ )
{
usuariosID.push( arrSelecionados[i].get('usuari
}
this.el.mask('Excluindo usurios');
Ext.Ajax.request({
url
,params : {
action
: 'deletaUsuarios'
,'usuariosID[]' : usuariosID
}
,scope : this
,success: function()
{
this.el.unmask();
this.store.reload();
}
});
},this);
}
E em UsuarioCadastro este:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
,_onBtnDeleteClick: function()
{
Ext.Msg.confirm('Confirmao','Deseja mesmo excluir ess
{
if(opt === 'no')
return
this.el.mask('Excluir usurio.');
Ext.Ajax.request({
url
,params : {
action
: 'deletaUsuario'
}
,scope : this
,success: function()
{
this.el.unmask();
this.hide();
22
23
24
25
26
27
28
29
30
/*
* Evento personalizado excluir sendo dispa
*/
this.fireEvent('excluir',this);
}
})
},this)
}
Bem galera, acho que acabei juntando muito contedo em um post s porm me esforc
deixar o cdigo bem comentado e o post bem organizado. Espero ter sido o mais comp
sanado diversas dvidas. Tambm espero ter demonstrado como organizar melhor o se
interface ser representada por uma classe. Vejo diversos cdigos muito complicados em
realiza um monte de carregamento dinmico de javascript, uma mistureba de compo

iframes em todo lugar, etc
O Ext fcil! O difcil entender que Javascript no somente linguagem de validao
uma linguagem que implementa sua maneira de orientao a objetos e por isso necess
mais profissional.
Estou a disposio aqui atravs dos comentrios, no twitter, no email contato[at]bruno

brasileiro (bt_bruno)enfim, entre em contato! :D E comentem! Seus comentrios so
posts! At a prxima!
Cdigo
Completo
Demo Online
: 9th setembro 2009
: Bruno Tavares
: Ext JS
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>.
Post It
88 Replies
77 Comments
0 Tweets
0 Facebook
10 Pingbacks
Last reply was 1 week ago
Miguel Cartagena View %d 10UTC %B 10UTC %Y
Bruno, ficou muito bom seu CRUD, especialmente para quem est comean
tenho duas sugestes:
1- Que tal utilizar o RowEditor para edio das linhas? Creio que uma solu
elegante.
2- O prximo exemplo poderia ser um CRUD pai e filho, como alguns cham
cada linha (cadastro) est vinculado a uma outra lista. Por exemplo: cadas
entrada e a lista dos items que esto na nota fiscal.
Esse um CRUD mais elaborado e bastante utilizado. ento creio que seja
Precisando de ajuda, estamos a :)
Abraos
Responder
Bruno Tavaresreplied: View %d 10UTC %B 10UTC %Y
Grande Miguel! Valeu pelas sugestes! O RowEditor de fato bem mais bac
queria abordar tambm algumas questes de formulrio, acabei decidindo
nada impede de uma verso com RowEditor ;) E sobre o CRUD pai filho, ti
pensando em fazer um CRUD local, aonde todos os dados vo ficando em

serem salvos, e o exemplo de Nota Fiscal ideal para isso.
Abrao!
Responder
Christian MATOLAreplied: View %d 29UTC %B 29UTC %Y
Parabns Bruno pelo post! Eu q estou comeando e acabei de achar este p
estudando o mesmo para inicializar na programao web Ext JS, PHP e My
bacana. Parabns ao Miguel tmb, pois o exemplo q ele deu muito bom e j
estava procurando, como fazer em PHP e MySQL e acabei encontrando este
Seria de MUITA IMPORTNCIA esta nova verso! Espero q sai logo logo. Para
aguardo a novo verso! Grande abrao a todos!
Responder
Wemerson View %d 10UTC %B 10UTC %Y
Nossa, Melhor tutorial at agora, parabns mesmo pela iniciativa, agora sim
conceitos de extends, aplly, classes no ext e outros. Muito obrigado, acho q
muitas pessoas, ficou otimo, bem estruturado e comemtado. parabns pel

cada dia cresa mais, com certeza vou divulgar esse blog.
Responder
Seu entusiasmo e agradecimento me serve como forte incentivo para tutor

Muito obrigado pela participao Wemerson! Abrao!
Responder
CRUD local Ext - Editando registros em janela | ExtDesenv View %d 11UTC

[...] Notem que declarei o script gridWindow.js, criar este script ser nosso
declarei uma classe singleton, ou seja, uma classe que no pode ser instan
uma instancia, global e nica no sistema, como Ext ou Ext.Ajax. Essa mode
chamado de Module Pattern, e na minha opinio atende bem pequenas ap
aplicaes maiores sugiro a arquitetura de classes de interface publicada n

Avanado. [...]
Responder
@franciscoluiz View %d 12UTC %B 12UTC %Y

Me tira uma dvida por favor
Em um grande sistema, aonde so declarados muitas classes, muitas refer
js. Como a idia aplicao-de-uma-s-pgina, o navegador do cliente/u
carregar na abertura do sistema todas os arquivos js, correto? Em um sistem

isso no afetaria diretamente o desempenho do carregamento?
No gosto nem um pouco da idia de abrir cada mdulo em um iframe, p
fato de se um iframe j motivo para ficar de nariz torcido Porm com el
aspecto, ele iria carregando os arquivos js somente a medida que o usurio

verdade? Ou estou aquivocado?
Responder
Excelente pergunta! Voc est correto sim nas afirmaes. Carregar todos o
invivel e usar iframes degrada muito a performance. A que entra um conc
toda a arquitetura: Carregamento de Javascript Sob-Demanda. Eu no e
na arquitetura por isso no comentei. Fiz apenas uma breve introduo sob
blog Framebox: Como carregar Javascript dinmicamente . Em breve vou p

exemplo especfico para Ext.
Abrao!
Responder
Edson Luiz Pieczarka Jniorreplied: View %d 13UTC %B 13UTC %Y

Ol Bruno! Parabns pelo tutorial!!!
Sobre o carregamento de javascript sob demanda, voc me indica outro tu

mais completo?
Responder
@franciscoluiz View %d 12UTC %B 12UTC %Y
Poxa, acabei de analisar sobre o carregamento dinamico no outro post M

Depois vou ler com dedicao total os artigos do NZakas e do SSouders
Voc aplica essa tcnica em todos seus sistemas ext js?
Aguardando um exemplo especifico quem sabe em cima desse CRUD ava

Abraos e sucesso a todos!
Responder
Rafael Kassner View %d 19UTC %B 19UTC %Y

Opa, muito bom este artigo, segui risca e ficou show de bola!
Mas assim, como quero extender ele, preciso criar um form com cadastro d
senha e validao da senha.
Tentei acoplar o mtodo desse artigo (http://blog.adampresley.com/2008/
data-validation-using-extjs/), porm no tive sucesso. At consegui fazer os
tipo password, mas as a parte de validao em si no funciona. Poderia me

Valeu!
Responder

Ol Rafael,
legal saber que est servindo de base para voc este tutorial. Sobre a valid
rapidinho de fazer, os prprios exemplos do Ext mostram como. Se voc es
pode recorrer ao frum brasileiro. Posta l sua dvida que eu mesmo ou ou

com certeza lhe ajudar.
Abrao!
Responder
Kleiser Nairobi View %d 19UTC %B 19UTC %Y
A empresa que trabalho adotou o EXT para confeco de suas interfaces. C

xinguei at a quarta gerao de quem criou esse framework. kkkk
Parabenizo-te pela ajuda comunidade de desenvolvedores Ext. De longe
esclarecedor. Espero que continue com seu empenho e sou mais um a faze
pai-filho, utilizando uma NF.
Responder
Carregar cdigo javascript Ext sob demanda, dinamicamente | ExtDesenv

View %d 24UTC %B 24UTC %Y
[...] post CRUD Avanado apresentei um pouco sobre a arquitetura que julg
aplicaes Ext. Para [...]
Responder
Eduardo Oliveira View %d 29UTC %B 29UTC %Y

Bom dia
eu sou novo em programao com o extjs
eu baixei o arquivo e no consegui popular os dados no grid
o combo funciona mas o grid nao
algume pode me ajudar por favor
obrigado.
Responder
Franciscoreplied: View 1 week ago
Eu tambem no consigo iniciar a grid e nem chamar o formulario de cadas

projeto todo, li todo o tutorial e ate agora nada
Responder
Nota Fiscal ExtJS Crud Pai Filho | ExtDesenv View %d 06UTC %B 06UTC %Y
[...] de uma nota fiscal, justamente o exemplo que irei abordar agora. O que
do crud avanado postado anteriormente, que esse usa um conceito mui

chamo de buer de dados. Todos [...]
Responder
Pablo View %d 31UTC %B 31UTC %Y

Bruno, parabns pelo tutorial! muito bom.
deixa eu te perguntar: porque vc usa scope: this nos botoes da toolbar?
valeu!
Responder
Antonio Cesar View %d 18UTC %B 18UTC %Y
Bruno, primeiro quero parabenizar pelos tutoriais. Muito Obrigado. Mas a m
que tambm de muitas pessoas, seria saber como o processo para voc
informaes at conseguir fazer um tutorial to rico. Eu gostaria de saber r
voc faz se voc l algum livro sobre Ext, ou estuda a API, ou l algum tut
se basear etc. Obrigado!!!
Responder
Fico grato pelo comentrio Antonio! Aprender Ext requer um esforo um po
outros frameworks, porque sua curva de aprendizado grande. Atribumos
caracterstica pela sua complexidade, nmero de componentes e etc Fun
meu conhecimento vm da experincia diria com o framework, mas leitur

podem ser descartadas.
Veja que no existe muito material no oficial do Ext. A grande parte est n
boa pedida seria iniciar alterando exemplos j prontos do framework, e qu
podes criar suas prprias aplicaes. Adicione a isso um pouco de leitura d
posts do frum brasileiro e americano, isso ir refinar o seu cdigo e tornprogramador.

Enfim, isso! Qualquer coisa no hesite em conversar! Abrao, e sucesso!
Responder
Henrique Eloi View %d 05UTC %B 05UTC %Y

E ai Bruno, show estes seus tutoriais.
Como vc comentou a cima no tutorial, eu tenho muito interesse que vc fize

destes de Ext e asp.net C#.
Abraos
Responder

Bacana Henrique, assim que eu puder irei adaptar o server-side para .NET.
abs!
Responder
Epson View %d 26UTC %B 26UTC %Y
Acho que voc j deve estar acostumado a ouvir elogios a respeito do seu t
razo. Meus parabns, ele de fato fonte de grande motivao para quem q
usando este framework. Bruno uma duvida minha: possvel usar ASP no l
Responder
Everton Melo View %d 06UTC %B 06UTC %Y
MUITO OBRIGADO VALEU MESMO SEU SITE AJUDA MUITAS PESSOAS NO DIA
Responder
Samir View %d 11UTC %B 11UTC %Y

Bruno,
Parabens pelo site, est me ajudando muito no aprendizado da Extjs, princ
padres pois sei que precisamos de ateno dobrada ao utilizar esse frame
Abrs,
Samir
Responder
Como abrir pginas de um menu no centro de sua aplicao | ExtDesenv

[...] Alm disso temos exemplos mais completos no blog que podem tamb
por exemplo o Crud Avanado e Carregar cdig Ext sob [...]
Responder
Como abrir pginas de um menu no centro de sua aplicao View %d 15U
[...] Alm disso temos exemplos mais completos no blog que podem tamb
por exemplo o Crud Avanado e Carregar cdig Ext sob [...]
Responder
CRUD Pai-Filho: exemplo de nota fiscal View %d 15UTC %B 15UTC %Y
[...] de uma nota fiscal, justamente o exemplo que irei abordar agora. O que
do crud avanado postado anteriormente, que esse usa um conceito mui

chamo de buer de dados. Todos [...]
Responder
Carregar cdigo Ext sob demanda View %d 15UTC %B 15UTC %Y
Responder
Criando Ext.Window para edio de dados de um grid CRUD Local

[...] Notem que declarei o script gridWindow.js; criar este script ser nosso
declarei uma classe singleton, ou seja, uma classe que no pode ser instan
uma instncia, global e nica no sistema, como Ext ou Ext.Ajax. Essa mode
chamado de Module Pattern, e na minha opinio atende bem pequenas ap
aplicaes maiores sugiro a arquitetura de classes de interface publicada n

Avanado. [...]
Responder
Rubens View %d 02UTC %B 02UTC %Y

Grande tutorial!!!
Mas tive um probleminha que no estava populando a lista, coloquei os pa
(baseParams) na atribuio da store criada no arquivo UsuarioLista.js, fica
// ...
,baseParams: {action: "listaUsuarios"
,limit: 30
,start: 0
,sort: "Nome"
,dir: "ASC"
}
// ...
Outro problema foi que o combobox da janela estava duplicando os dados
onFormLoad do arquivo UsuarioCadastro.js, na linha que tem o seguinte c
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 no estar criada na primeira vez e se fechamos e

duplica o valor do combo.
Abrao a todos.
Responder
Valeu pelas modificaes Rubens. Assim que eu puder vou dar uma refator
Abs!
Responder
Diogo View %d 05UTC %B 05UTC %Y

Muito bom Bruno Podemos criar n sistemas com esta
base que postou.
Porm sou novo aqui e j estou com meio caminho andado
tentando seguir seu exemplo. No 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 No entendi como
vc o chama.
Abrao e Parabens pela iniciativa.
Diogo
Responder

Ol Diogo! Acompanhe o seguinte:
A listagem de usuarios est num arquivo separado chamado UsuarioLista.j

Nesse arquivo tenho uma classe UsuarioLista que extende de GridPanel, e
xtype da classe como e-usuariolista. Ponto.
No arquivo index.html eu fao a incluso desse script, e ento a tela de list

esperando para ser usada, certo?
Por fim no arquivo Principal.js, aonde eu coordeno toda as aberturas das te

mtodo onNodeClick a minha rotina para abrir essa listagem. Ao dar dois
eu crio uma nova aba, e dentro dessa aba eu coloco minha listagem utiliza
anteriormente.
Espero ter lhe ajudado. A rotina um pouco complicadinha =/
abs!
Responder
Ricardo Hirashiki View %d 16UTC %B 16UTC %Y

Ol Bruno,
Conheci o ExtJs por acaso, estava pesquisando algumas coisas sobre o JQu
deparar com o ExtJs. Gostei muito dele.
Estou usando como base sua arquitetura para montar uma administrao
consegui progredir bastante. Seguindo os exemplos dos seus posts (e me m
com o framework) consegui integrar o carregamento dinmico de scripts, d

(editor WYSIWYG, editor de temas, etc).
Porm, ainda estou com algumas dvidas:
- Na sua janela de cadastro de Usurio, quando no informado nenhum n
hierrquico, aparece a mensagem de erro, porm no exibe o cone de aler
motivo do erro. Olhei os cdigos de exemplo que vem com o extjs 3.2 e a n
eu vi que voc coloca o FormPanel em um Window. Por que no exibe os
- Em alguns casos, eu queria exibir o FormPanel diretamente no TabPanel.
seria uma parte onde cadastrada as configuraes do sistema ou uma pa
senha. Eu at consegui criar uma classe que herda o Ext.form.FormPanel e

estou com o mesmo problema de validao dos dados (consta o erro, mas
mensagem). Tem como resolver isto?
[]s
Ricardo
Responder
1. Aparecer ou no o cone configurvel. Existe um config. option chamad
indica se o erro deve aparecer num tooltip (qtip), ou com um cone ao lad
mesmo com uma mensagem abaixo do campo (under). Veja na documen

Ext.form.Field essa propriedade.
Para definir um padro voc pode fazer isto: Ext.form.Field.prototype.msgT

2. Ser que a explicao 1 corrige este?
abs!
Responder
Ricardo Hirashikireplied: View %d 23UTC %B 23UTC %Y

Bruno,
Muito obrigado, funcionou usando msgTarget = side e eu tb tive que coloc

Ext.QuickTips.init(); no incio do scritp.
Estou com uma dificuldade agora: dentro do form eu queria colocar uma g
tbar) para incluir e alterar dados dessa grid. Por algum motivo, quando eu
da grid dentro do form, o mesmo index selecionado da grid principal (a q
aba). Alm disso, mesmo cancelando o form os dados da grid no so apag

resolver isso?
Sei que explicando assim bem difcil. Caso seja necessrio, eu enviarei o c
obrigado!
Responder
Ol Ricardo! Nesse caso sugiro abrir um post no frum brasileiro, exemplifi
cdigo. Dessa maneira alm de receber minha ajuda voc recebe o apoio d
comunidade.
Forte abrao!
Responder
Dr.House View %d 27UTC %B 27UTC %Y
Bruno, seu exemplo ficou muito bom, e a forma como o cdigo ficou estrut
excelente. Tenho uma dvida, quando clicamos duas vezes na linha pra ab
combobox vai duplicando os valores. POr exemplo: Se Tenho um usurio co

funcionrio, e depois clico em outra linha com o mesmo nivel funcionrio.
funcionrios no combo. Como resolver isso? Grato e parabens pelo site.
Responder
Ol Wagner! O problema ocorre porque no mtodo _onFormLoad eu crio n
combo de superior hierrquico sem verificar se o mesmo j existe. Estarei r

traduzindo esse post, ento sua correo vai estar em breve online.
Abs!
Responder
Dr.housereplied: View %d 28UTC %B 28UTC %Y

Bruno.
Muito obrigado pela resposta rpida, seu trabalho muito bom. Aguardo a
Grato.
Responder
Dr.housereplied: View %d 28UTC %B 28UTC %Y

Bruno,
Segue abaixo alterao que fiz no seu fonte. No mtodo _onFormLoad adic
linha que resolveu o problema.
//atualiza o store
this.comboNivelHierarquico.store.reload();
Ento o mtodo ficou assim:
_onFormLoad: function(form, request)
{
/* Muitos sabem do inconveniente problema de carregar um formulrio e n

no a
* descrio. Isso acontece porque o store do combo ainda no esta carrega

no encontra
* nenhum registro com o id especificado.
*
* 2 Abordagens possveis. Carregar o combo todo e setar novamente o valo

opo local para o combo.
* Prefiro a segunda por ser MUITO mais performtica e otmizar muito o car
Para isso funcionar
* voc deve alm de trazer o ID do registro do combo tambm trazer a desc

*/
var data = request.result.data;
if( data.nivelHierarquicoID )
//se o registro possui nivelHierarquicoID
{
/*
* crio um novo registro seguindo o prottipo do store do combo
* informando os valores devidos
*/
var novoRegistro = new this.comboNivelHierarquico.store.recordType({
nivelHierarquicoID : data.nivelHierarquicoID
,descricao : data.nivelHierarquicoDescricao
});
//e seto o valor

this.comboNivelHierarquico.setValue(data.nivelHierarquicoID);
//atualiza o store
this.comboNivelHierarquico.store.reload();
}
//tiro uma mscara
this.el.unmask();
}
Espero ter ajudado. Fico no aguardo por novos post.
Abrao.
Responder
evang View %d 27UTC %B 27UTC %Y

this is great! I try to translate the example code to english but it cant work
give .zip file in english? thx a lot
Responder
Hi @evang! Good to have international comments here =D As soon as I can

whole article and example ok? Regards, Bruno!
Responder
Junior View %d 07UTC %B 07UTC %Y

Ol Bruno,
Primeira gostaria de agradecer pelo artigo, o melhor que vi at o momento
Gostaria de tirar uma dvida, copiei toda a sua aplicao , mudei apenas o
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 U
includes esto todos no index tb.
Agradeo pela ateno
Responder
Esse erro justamente porque voc est fazendo uso de um xtype que o Ex
Talvez como voc tenha dito, a classe UsuarioLista no esteja sendo carreg
verificar na aba Rede do firebug se todos os arquivos esto sendo carrega
podes comentar todo seu cdigo, e ir descomentando aos poucos, tentand
Mas com antecedncia fica claro afirmar que o problema um xtype no re

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

Ol Bruno!
Cara eu estou utilizando o seu modelo de aplicao (que achei muito intere
um sistema de cadastro de ramais e contatos.
Mas eu me deparei com um problema superior chamado CHEFE. Ele no
WINDOWS de jeito nenhum para o cadastro. Ele quer que o grid e o form es
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 t
modelo de crud que voc est usando? Qualquer ajuda bem vinda!
Responder
Ol Josenilson! Eu no tenho exemplo no cara. Mas acompanhe o seguint
quando o usurio clica no grid, ns abrimos uma janela e invocamos o mt

para que a janela possa carregar os dados.
Para colocar as interfaces lado a lado, primeiramente a tela de cadastro de
Ext.Panel, e no mais de Ext.Window. Da visualmente voc j consegue col

de cadastro lado a lado na mesma tela (layout column, hbox, etc).
Tem mais algumas adaptaes a fazer, mas eu gostei da sua idia. Quem sa
e crio mais um tutorial. Abs, e qqer coisa estamos tambm no frum!
Responder
Josenilsonreplied: View %d 18UTC %B 18UTC %Y
Fala Bruno! Cara voc responde rpido! No forum do Ext eu fico esperando
um sinal de vida!
Ento na verdade VISUALMENTE eu j fiz tudo o que eu preciso. Coloquei d
na tela como queria o chefe. Eu extendi o formPanel ao invs do gridPanel.
formPanel eu adicionei um grid (xtype: grid). Mas o meu problema que n
o form a partir do grid que eu criei. Tentei usar o getCmp mas ele no funci
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 no funciona!

encontrando o RAMALPANEL (nem se eu chamar por RamalForm)
}
}
})
,ds: meu_ds
,columns:[ ... ]
}
,{
xtype: fieldset
,id: RamalCadastro
,layout: column
,items: [ campos do form ]
}
]
})
}
});
Ext.reg(CAD_RAMAL,RamalForm);
Eu postei o cdigo completo no forum do Extjs:
http://www.extjs.com/forum/showthread.php?99555-How-to-navigate-bet
de-components-and-pass-values-to-them&p=468749#post468749
Responder
Bem, eu escrevi um post a respeito dessa sua situao. D uma olhada e se

comentar l. Abs!
Cadastro bsico com grid e formulrio
Responder
Josenilsonreplied: View %d 14UTC %B 14UTC %Y

Fala Bruno!
Bacana o exemplo! Eu j tinha conseguido fazer isso h algum tempo segu
orientao nos comentrios anteriores (extendendo o Panel ao invs do Wi
acabou ficando MUITO mais complexo o que o cliente queria ento na ve
TabPanels dentro de cada TabPanel e panels (com layout column) com grid
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 exemp
no estilo VIEWPORT a aba HOME tem conteudo esttico. Como voc faz par
dinamico nela?
evang View %d 19UTC %B 19UTC %Y
Dear Bruno, could you please share RowEditor example. On extjs forum, pe
error f is undefined. I try to modify your code to RowEditor but get the sam
help us. thx a lot!
Responder
Ci Oliveira View %d 29UTC %B 29UTC %Y

Primeiro de tudo parabns pelo post
ele esta me ajudando muito
mas estou com um problema que no consigo resolver, no meu o excluir, n

mesmo que eu clique em No, o processo de chamar o php delete acontece
Responder
Ol Ci! A respeito de no excluir eu no vejo como posso te ajudar, porque

servidor. Quanto a clicar em No e excluir vc faz o seguinte:
Ext.Msg.confirm(Ateno,Deseja excluir?,function(opt){
if( opt === no){
return; //se respondeu no, cai fora
}
});
Abs!
Responder
Fabio Jr. View %d 02UTC %B 02UTC %Y
Ol Bruno, muito til este exemplo, estou fazendo minha aplicao me bas
a pergunta a seguinte, qndo vc inicia essa aplicao o menu pai Cadastr
outros fechados, como fao para que o menu pai Relatrios venha aberto
demais menus pai fechados?
Obrigado!
Responder
Ol Fabio! Sua pergunta no sumiu, ela estava aguardando aprovao ;) A
itens abertos, como o menu lateral se trata de um Painel com layout accord
definir o atributo activeItem:1 j o suficiente para trazer itens expandido
Claro que no lugar de 1 voc coloca o ndice do painel que deseja expand
entender! Voc pode saber mais na documentao de Ext.layout.Accordion

Responder
Fabio Jr.replied: View %d 03UTC %B 03UTC %Y

Perfeito! Era isso mesmo, desculpe o transtorno.
Uma outra questo, na listagem, vc tem aquele mtodo onDestroy, no co
onde ele chamado, no deveria ser chamado ao fechar a aba em questo

pq na minha aplicao, eu s declarei este mtodo desta maneira:
onDestroy: function()
{
membroLista.superclass.onDestroy().apply(this, arguments);
Ext.destroy(this.janelaMembro)
this.janelaMembro = null;
},
Porm, 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, argum

Eu te adicionei no MSN para ficar mais fcil de explicar a situao.
Obrigado novamente!
Responder
JEAN FIGUEIREDO View %d 19UTC %B 19UTC %Y

Ola,
boa tarde, nossa estou impressionado msmo com esta ferramenta. A propo
mergulhando neste universo de ExtJS e bem, andei sondando algumas IDE
tal de Aptana. S que ele nao esta configurado. J fiz os procedimentos ma
rola. Voc saberia me indicar uma tutor que relamente funciona a parada !
valeu e .. teu site show de bola!
Responder
Ol Jean! O aptana fera, eu uso ele (: As nicas coisas que eu alterei nele f
Ext 2.2 (s ir em Help > Install aptana features), tirar o auto-format de c
(Preferences > aptana > editors > javascript > formatting), e eu tambm adi
validador de cdigo (Preferences > aptana > editors > javascript > validatio
Infelizmente eu no conheo tutorial, mas fcil de configurar, voc resolv

entendi especificamente o que vc quer ativar nele.
Abs!
Responder
Paulo View %d 29UTC %B 29UTC %Y

Bruno,
Parabns pelos excelentes posts!
Responder
Mayara View %d 10UTC %B 10UTC %Y

Ol. Comecei a trabalhar agora com essa ferramenta e no sei quase nada
fazer o crud mas no consegui inser-lo no viewport. Se pudesse me ajudar

muito. Desde j agradeo a ateno, Mayara.
Responder
Ol Mayara! No sei de que forma posso lhe ajudar, j que no sei de que fo
CRUD. Eu publiquei no post o cdigo completo, desde o Ext.onReady(), at

Ext.Viewport. Voc poderia tomar isso como exemplo.
Pra quem est comeando, talvez seja mais interessante dar uma olha da n
Cadastro bsico com grid e formulrio e Como abrir pginas de um menu n

aplicao.
Abs!
Responder
Muito obrigada pela ajuda..conseguir fazer o q estava precisando. Adorei o

agradeo a ateno, Mayara.
Responder

Ol Bruno, desculpe incomodar novamente, mas quando dou o submit no
cadastro de novo usurio, o firebug retorna o seguinte erro:
missing ) in parenthetical
[Break on this error] (;//You have an error in your SQL syear WHERE mat
1)
No caso, substitui UsuarioID por matricula. Vc sabe o q pode estar dando e

Responder
Rogrio View %d 06UTC %B 06UTC %Y
Ol estou tentando fazer a implementao do seu exemplo, porm estou te
para exibir os dados no formulrio. Eu clico, ele consegue pegar o ID porm
restante dos dados. Como fao para fazer o casamento entre os campos qu
dados a serem exibidos no form?
[]s
Responder
Zenner View %d 13UTC %B 13UTC %Y

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
todo o espao abaixo desse topo?
2 Como fazer com que o combobox dos nveis hierrquicos no aceite que
nele (digitei um nvel no existente e deu uns erros)?
vlw
Responder
Zenner View %d 14UTC %B 14UTC %Y
Opa.. Outra Dvida (liga no, sou programadr prtico e ainda fico voando c
conecitos)..
Como adaptar esse exemplo usando o carregamento dinamico dos js?
Tem como exemplificar nesse mesmo exemplo?
Responder
Saulo View %d 14UTC %B 14UTC %Y

Bruno,
Boa tarde, peguei seu exemplo e nao consegui rodar, aparece como se estiv
Tema haver com o browser, estou usando IE, ou tem haver com a verso do
usando a 3.3.1?
Vlw
Responder
Juca View %d 23UTC %B 23UTC %Y

Bruno,
Como posso fazer a ao alterar e visualizar?
Tens algum exemplo demonstrando isso? mas utilizando o Crud.
Responder
marcus andre View %d 08UTC %B 08UTC %Y

bruno n entendil como fao pra chamar outra aba?
fiz tudo direitinho mencionado anteriormente mais n deu certo,
tem como vc me ajudar?
Responder
leo View %d 28UTC %B 28UTC %Y

Belo tpico. Estou com um problema, ao criar os arquivos e no index fazer
tenho esse erro ao carregar a pgina no firebug:
Ext.fly(d) is null
Responder
Christian Matola View %d 30UTC %B 30UTC %Y
Parabns Bruno!!! Muito bom o exemplo, principalmente para mim q estou

Seguinte, fiz tudo direitinho e o exemplo roda quase q 100%, pq:
No est carregando os dados do BD na grid de Usurios;
Quando chamo o formulrio para incluir novo usurio, o mesmo feito com
no banco de dados, mais no aparece na grid. A grid fica em branco aprese

registro encontrado. Ser q vc pode me ajudar? Grato desde j,
Christian Matola
Responder
Jhonata View %d 26UTC %B 26UTC %Y

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 avanado
ASP.NET.
mais uma vez parabens!!
Abraos
Responder
Ol Jhonata! Na verdade Ext JS agnstico quanto a linguagens server-sid
voc est usando PHP, Ruby ou ASP.NET. O que importa que a comunica
tem que ser por JSON (ou xml). Por exemplo, ao submeter um formulrio o
resposta {success: true}, no importa o que voc est usando para criar e
No pretendo usar outra coisa que PHP para criar exemplos, porque dessa
conseguimos focar mais no Ext.
Responder
Daniel View %d 15UTC %B 15UTC %Y

Eu gostaria de saber como ficaria para adicionar filtros
Responder
Jorge View %d 03UTC %B 03UTC %Y

Boa noite Bruno,
Sou novato no EtxJs, instalei o seu exemplo.
Mas quando executo ele s mostra o menu.
Quando clico na opo ele no faz nada.
Estou usando WAMP, com php e mysql.
Responder
Ol Jorge, no tem muito o que eu possa ajud-lo pela descrio. Se voc p

frum mais detalhes, ser mais fcil de ajudar. Abs!
Responder
@miguelocarvajal View %d 28UTC %B 28UTC %Y
RT @extdesenv: Chega de 404! Estou arrumando os problemas da ltima a

antigos, como este :) http://t.co/4wAt1yCf
Responder
CRUD Pai-Filho: exemplo de nota fiscal | ExtDesenv View %d 30UTC %B 30
[...] post CRUD Avanado com Ext recebi uma boa sugesto de exemplificar
Nessa interface temos um registro X que [...]
Responder
Jorge View %d 13UTC %B 13UTC %Y

Boa tarde Bruno,
Recebi seu email sobre o questionamento anterior.
Mas tenho uma pergunta: Como converto o Ext.reg(e-usuariolista, Usuario

Pelo conversos do 3 para 4 da sencha, nao consegui. meio complicado.
Gostaria de saber com fazer para abrir as opes do menu lateral no centro
consigo faz-lo com o extjs 4.
Obrigado,
Responder
Rafael View %d 16UTC %B 16UTC %Y
Ola estou com o mesmo problema do Jorge Como converto o Ext.reg(eUsuarioLista); para extjs 4.1. ???
Pode ajudar?
Responder
brunotavaresreplied: View %d 17UTC %B 17UTC %Y
Ext.reg usado no Ext 3 para registar o xtype para essa classe. No Ext 4 voc
informaria xtype: e-usuariolista na definio da classe.
D uma olhada tambm nos tutoriais de migrao de 3 -> 4 e como funcion

classes:
http://docs.sencha.com/ext-js/4-0/#!/guide/upgrade
http://docs.sencha.com/ext-js/4-0/#!/guide/class_system
Abs!
Responder
Aured de Freitas View %d 03UTC %B 03UTC %Y
Bruno, parabns pelo post. Estou em dvida de como eu faria para acresce
pesquisa ao lado dos botes de adicionar e excluir. A ideia que quando eu
no boto de pesquisa o grid liste os registros com base no critrio mencion

sugesto de como devo fazer?
Responder
brunotavaresreplied: View %d 05UTC %B 05UTC %Y
Tem uma extenso chamada Ext.ux.form.SearchField que voc s precisa a

e conectar ao mesmo Store do grid e ele faz toda parte de filtros.
Responder
Carregar cdigo Ext sob demanda - Bruno Tavares | Bruno Tavares View 10
Hey there, welcome to my blog! I'm Bruno and
Responder
Alexander Santos View 4 months ago

Muito bom o Post.
Obrigado
Responder
teste View 2 months ago

teste
Responder
Eduardo Paludo View 2 months ago

Ol Bruno, Bom dia!
Sou meio novo com extjs, fiz o download do cdigo completo, mas como e
Pois no index no abre a aplicao, hehe
Responder
Introducing App Inspector for Sencha
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
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

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

CRUD Avançado Com Ext JS 3

Enviado por

Direitos autorais:

Formatos disponíveis

CRUD Avanado com Ext JS 3.

Cdigo completo e demo

Nesse tutorial iremos criar um CRUD completo de usurios. CRUD um acrnimo de C

Delete, ou seja, as 4 principais aes de um cadastro simples usando banco de dados: C

Criando um Grid e populando-o com dados do servidor com paginao

Abrindo janela pop-up ao clicar em um registro

What about ExtDesenv.com?

Popular um formulrio com base no registro

O cdigo apresentado no simplesmente didtico, ele um exemplo da codificao q

aplicao Ext e tambm abordar conceitos de Orientao a Objetos.

ser formado de um grid de usurios, e ao usurio clicar em um registro uma tela de ed

Tambmusaremos a mesma tela para realizar incluso de novos registros.

Viso geral do CRUD

Estrutura Final da Aplicao

server-side, estou disponibilizando um .zip com os arquivos e tambmdois diagramas:

extender de um componente do Ext. Iremos dividir cada classe em um arquivo, portant

destruio), alm de evitar a misturana de cdigo que sempre acaba ocorrendo. C

conceito de aplicao-de-uma-s-pgina fundamental estruturar cada interface des

Iremos sobreescrever o mtodo initComponent, que o metodo invocado para exe

var UsuarioLista = Ext.extend(Ext.grid.GridPanel, {

//demais atributos do grid

//cria janela de cadastro

Nesse pedao de cdigo demonstro um conceito muito importante, o reaproveitamen

guardar sua referncia, e depois s ir reciclando ela. Portanto, no mtodo _criaWindow

referncia da janela existe. Se no existir, eu crio, seno somente retorno a referncia. C

Alm do conceito de reciclagem existe um outro apresentado no cdigo de criao da ja

no so nativos do Ext. Ns iremos program-los, para que quando o usurio salve ou e

grid seja recarregado.

UsuarioCadastro e extend-la de Ext.Window. Vamos em initComponent criar o formul

var UsuarioCadastro = Ext.extend(Ext.Window,{

/* Essa janela ser reaproveitada, por isso closeA

da insero e da atualizao, nica diferena que na insero usuarioID igual a zero

,_onGridRowDblClick: function( grid, rowIndex, e )

de nveis hierarquicos antes do form, ou criar um registro local. Eu prefiro a segunda op

formulrio eu tambm retorno no somente o ID do combo mas tambm a descrio. C

,_onFormLoad: function(form, request)

if( data.nivelHierarquicoID ) //se o registro possui ni

//e seto o valor

if( arrSelecionados.length === 0 )

Ext.Msg.confirm('Confirmao','Deseja mesmo excluir o(s

var usuariosID = [];

realiza um monte de carregamento dinmico de javascript, uma mistureba de compo

Estou a disposio aqui atravs dos comentrios, no twitter, no email contato[at]bruno

: 9th setembro 2009

Sign in with Twitter Sign in with Facebook

Bruno Tavaresreplied: View %d 10UTC %B 10UTC %Y

queria abordar tambm algumas questes de formulrio, acabei decidindo

pensando em fazer um CRUD local, aonde todos os dados vo ficando em

Christian MATOLAreplied: View %d 29UTC %B 29UTC %Y

Parabns Bruno pelo post! Eu q estou comeando e acabei de achar este p

estudando o mesmo para inicializar na programao web Ext JS, PHP e My

estava procurando, como fazer em PHP e MySQL e acabei encontrando este

Wemerson View %d 10UTC %B 10UTC %Y

conceitos de extends, aplly, classes no ext e outros. Muito obrigado, acho q

muitas pessoas, ficou otimo, bem estruturado e comemtado. parabns pel

Bruno Tavaresreplied: View %d 10UTC %B 10UTC %Y

Seu entusiasmo e agradecimento me serve como forte incentivo para tutor

CRUD local Ext - Editando registros em janela | ExtDesenv View %d 11UTC

chamado de Module Pattern, e na minha opinio atende bem pequenas ap

aplicaes maiores sugiro a arquitetura de classes de interface publicada n

@franciscoluiz View %d 12UTC %B 12UTC %Y

Em um grande sistema, aonde so declarados muitas classes, muitas refer

js. Como a idia aplicao-de-uma-s-pgina, o navegador do cliente/u

carregar na abertura do sistema todas os arquivos js, correto? Em um sistem