Documentação: https://docs.sencha.com/extjs/4.2.1/#!/api/Ext.app.Controller
Exemplos: https://docs.sencha.com/extjs/4.2.1/#!/example
Tutorial: https://youtu.be/jnwE4e9sdSo
store: busca dados de uma fonte e repassa para a aplicação, ela é uma coleção de dados
model: são os registros / modelos que serão utilizados na aplicação
controller: faz a integração entre as diferentes partes do sistemaview: exibe dados/componentes
###################################
Passos:
1 - criar model
2 - criar store
3 - criar controller
4 - adicionar controller a aplicação
5 - criar view
###################################
Definir um model:
Ext.define(‘NomeDoApp.model.NomeDoModel’,{
extend: ‘Ext.data.Model’,
fields:[
{name: ‘nomeDoCampo’, type: ‘tipoDoCampo’},
]
});
Exemplo model Contato:
Ext.define(‘NomeDoApp.model.Contato,{
extend: ‘Ext.data.Model’,
fields:[
{name: ‘id’, type: ‘int’},
{name: ‘email’, type: ‘string’},
{name: ‘nome’, type: ‘string’},
{name: ‘phone’, type: ‘string’}
]
});
###################################
Definir uma store:
por convenção o nome da store é o nome do model no plural, então o model Contato vira a store Contatos
Ext.define(‘NomeDoApp.store.NomeDaStores’,{
extend: ‘Ext.data.Store’,
model: ‘NomeDoApp.model.NomeDoModel’,
proxy: {
// definições de como a store se comunica com a fonte dos dados
type: ‘TipoDoProxy’,
// caso seja uma url unica ou rest
url: ‘url onde os dados devem ser obtidos’,
// caso seja uma url por tipo de alteração de crud
api: {
create: ‘servidor/criaralgo’,
read: ‘servidor/deletaralgo’,
update: ‘servidor/atualizaralgo’,
delete: ‘servidor/excluiralgo’,
},
reader: {
// definições de como os dados serão lidos
type: ‘tipo dos dados’,
root: ‘nome da chave dos dados’
},
writer: {
// definições de como os dados serão enviados para o servidor
type: ‘json’,
root: ‘data’,
encode: true
}
}
});
Exemplo store Contatos:
Ext.define(‘NomeDoApp.store.Contatos’,{
extend: ‘Ext.data.Store’,
model: ‘NomeDoApp.model.Contato,
proxy: {
type: ‘TipoDoProxy’,
url: ‘api/contatos’,
reader: {
type:’json’,
root: ‘data’
}
}
});
###################################
Definir uma view:
a view define a aparencia e exibição do componente
Ext.define(‘NomeDoApp.view.NomeDaView’,{
extend: ‘Ext.ComponenteRaiz.ComponenteBase’,
// o alias deve ser sempre em letras minusculas e iniciar com widget.
alias: ‘widget.nomedessecomponente’,
store: ‘store que passa dados para essa view’,
title: ‘titulo dessa view’
dataIndex: ‘id do campo da store de onde o dado deve ser obtido’
});
Exemplo view Contatos com componente grid:
Ext.define(‘NomeDoApp.view.ContatosGrid’,{
extend: ‘Ext.grid.Panel’,
alias: ‘widget.contatosgrid,
store: ‘NomeDoApp.store.Contatos’,
title: ‘Grid de Contatos’,
columns[
{
text: ‘ID’
width: 35,
dataIndex: ‘id’
},
{
text: ‘Nome’
width: 35,
dataIndex: ‘nome’
},
{
text: Telefone’
width: 35,
dataIndex: ‘phone’
},
{
text: ‘Email’
width: 35,
dataIndex: ‘email’
}
]
});
para importar esse componentes em outros basta colocar o xtype=’contatosgrid’
###################################
Definir um Controller:
o controller é o que vai juntar as stores, as views e os models e adicionar comportamentos a eles
nesse exemplo ja vai estar sendo utilizadas as classes validas que foram criadas nos exemplos acima
Ext.define(
‘NomeDoApp.controller.Contatos’,
{
extend: ‘Ext.app.Controller’,
models: [‘NomeDoApp.model.Contato’],
stores: [‘NomeDoApp.store.Contatos’],
views: [‘NomeDoApp.view.ContatosGrid’]
}
);
além disso é necessário adicionar no arquivo main ou app da aplicação (arquivo principal) o controller criado, dentro da lista de controllers
Ext.define(‘NomeDoApp.application’,{
name: ‘NomeDoApp’,
extend: ‘Ext.app.Application’,
views: [],
controllers: [‘NomeDoApp.controller.Contatos’],
stores: []
// carregar os dados da store no grid quando o grid for renderizado
init: function(application){
this.control({
“grid”:{
render: this.onGridRender
}
});
}
//função executada quando o grid é renderizado
onGridRender: function(grid, e0pts){
grid.getStore().load();
}
});
###################################
Adicionar comportamento a um componente atravez do controlador
Dentro da função this.control do controller, basta apontar para o componente atravez de um id por exemplo, e adicionar uma função de evento
Exemplo:
init: function(application){
this.control({
“contatosgrid buttoin#idDoBotao”:{
click: this.funcaoAdicionadaAoBotao
}
});
},
funcaoAdicionadaAoBotao: function(botao, evento,e0pts){
// essa função vai criar / renderizar uma janela / componente
Ext.create(‘NomeDoApp.view.NomeDaJanela’);
}
###################################
Obter referencia a janela no controller e alterar seus atributos
Quando utilizamos o Ext.create() ele retorna uma referencia ao componente criado
podemos obter essa referencia da seguinte forma:
var janela = Ext.create(‘NomeDoApp.view.NomeDaJanela’);
e podemos alterar as propridades da janela com:
janela.setTitle(‘Novo titulo da janela’);
###################################
Metodos Up e Down
permitem acessar membros internos e externos ao componente referenciado
exemplo
obtemos a referencia a janela no exemplo acima
mas queremos alterar um componente que está dentro dessa janela
podemos utilizar:
var componente = janela.down(‘referenciaDoComponente’)
###################################
Enviar request de delete para o servidor
A store manipula localmente os dados, caso seja deletado um dado no front, deve ser executado o metodo sync para enviar essa alteração para o servidor do dado
exemplo:
onDeleteClick: function(btn, e, e0pts){
// referenciamos o grid
var grid= btn.up(‘grid’);
// referenciamos o registro selecionado
var registros = grid.getSelectionModel().getSelection();
// referenciamos a store
var store = grid.getStore();
// removemos o registro da store
store.remove(registros);
// enviamos uma requisição para sincronizar a store local com os dados do servidor
store.sync();
}
###################################
Adicionar dados de um formulario na store
A store manipula localmente os dados, caso seja deletado um dado no front, deve ser executado o metodo sync para
onSaveClick: function(btn, e, e0pts){
var janela = btn.up(‘window’);
var form = janela.down(‘form’);
var values = form.getValues();
var contato = Ext.create(‘NomeDoApp.model.Contato’,{
//dados do form
nome: values.nome,
telefone: values.telefone,
email: values.email,
});
var grid = Ext.ComponentQuery.query(“contatosgrid’)[0];
var store = grid.getStore();
store.insert(0,contato);
store.sync();
}
exemplo 2 :
nesse é utilizado a opção de criar ou atualizar um registro
###################################
Erros comuns:
erros com bufferd estão relacionados a store,
0 Comentários