View
500
Download
2
Category
Preview:
DESCRIPTION
Introdução Básica a ExtJS4
Citation preview
Sencha ExtJS
Eduardo Mendes (edumendes@gmail.com)
Ext JS
3
Implementação de aplicações ricas para a plataforma Web
Framework JavaScript da Sencha
Possui outras versões, como o Sencha Touch
Baseado em componentes
Grande comunidade de desenvolvedores
Eduardo Mendes (edumendes@gmail.com)6
É um Framework FrontEnd
Deve ser utilizado com outras tecnologias para realizar a parte ServerSide
Pode integrar com outros frameworks JS
Até a versão 3 precisa de um adapter, mas agora não é mais necessário
PHPRAILS
SPRINGSTRUTS 2
PYTHON
As informações entre servidor e ExtJS são trocadas por JSON e XML
Eduardo Mendes (edumendes@gmail.com)
Orientado a Objetos
7
Ext.define(Nome, configuracoes, callback);
Eduardo Mendes (edumendes@gmail.com)
Carregamento Dinâmico
8
Ext.Loader.setConfig({ enabled: true }); !
Ext.Loader.setPath(‘Ext.ux’, ‘../ux’); !
Ext.require(…);
Eduardo Mendes (edumendes@gmail.com)
Package Data
9
Ext.Loader.setConfig({ enabled: true }); !
Ext.Loader.setPath(‘Ext.ux’, ‘../ux’); !
Ext.require(…);
Eduardo Mendes (edumendes@gmail.com)
Model Fields
10
Ext.define('User', { extend: 'Ext.data.Model', fields: [ { name: ‘id’, type: 'int'}, {name: 'name', type: 'string'} ] });
Eduardo Mendes (edumendes@gmail.com)
Model Association
11
Ext.define('User', { extend: 'Ext.data.Model', fields: [‘id’,’name’], hasMany: 'Posts' }); !
Ext.define('Post', { extend: 'Ext.data.Model', fields: [‘id’,’user_id’, ‘title’, ‘body’], belongsTo: 'User' });
Eduardo Mendes (edumendes@gmail.com)15
Faça o download do ExtJS no site da Sencha
Eduardo Mendes (edumendes@gmail.com)17
Estruturadocs: contém a documentação completa (que você precisa para implantá-lo em um servidor local para ser capaz de executá-lo) !
exemplos: Este contém exemplos de como usar os componentes Ext JS !
packages: contém os módulos Ext JS, empacotados !
resources: contém o CSS e imagens utilizados pelos temas Ext !
src: código fonte completo !
welcome: contém imagens utilizadas pelo index.html !
builds: arquivos adicionais !
Eduardo Mendes (edumendes@gmail.com)18
Ouvindo o evento ready
Ext.onReady(function(){ <code> });
DOM
"I'm ready"
O código só executará depois que o DOM estiver "pronto"
Eduardo Mendes (edumendes@gmail.com)19
Utilizando ExtJS
dowload ExtJS
carregue-o em seu documento HTML
<script src=“extjs-all.js”></script>
carregue o CSS do ExtJS
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
1
2
3
Eduardo Mendes (edumendes@gmail.com)20
Exemplo completo<html> <head> !
!
!
!
</head> <body></body> !
!
!
!
!
</html>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
<script> Ext.onReady(function() { Ext.MessageBox.alert('Hello','Hello, World!'); }); </script>
<script src="../extjs/ext-all.js"></script>
Eduardo Mendes (edumendes@gmail.com)
widget.panel
24
Criando um Painel Simples
Eduardo Mendes (edumendes@gmail.com)25
Criando um Painel Simples<body> <div id="painelPrincipal"></div> </body>
Ext.onReady(function () { !
!
!
!
!
!
!
!
!
});
renderTo: 'painelPrincipal', !
title: 'Painel ExtJS 4', width: 400, height: 300, frame: true, !
html: "<div id='contentID'></div>"
Ext.create('widget.panel', { !
!
!
!
!
!
!
});
Eduardo Mendes (edumendes@gmail.com)27
Criando um Painel Simples + jQuery Ext.onReady(function () { Ext.create('widget.panel', { renderTo: 'painelPrincipal', !
title: 'Painel ExtJS 4', width: 400, height: 300, frame: true, !
html: "<div id='contentID'></div>" }); $("#contentID").load("conteudo.html"); });
Eduardo Mendes (edumendes@gmail.com)
Definir classes 02 maneiras
30
Ext.define(Nome, configuracoes, callback);
Ext.ClassManager(Nome, configuracoes, callback);
Eduardo Mendes (edumendes@gmail.com)
32
Definindo uma classe Ext.onReady(function () { !
!
!
!
!
!
!
!
!
!
!
!
});
Ext.define('Usuario', { !
!
!
!
!
!
!
!
!
!
});
nome: '', senha: '', login: function() { console.log("Logando na aplicacao..."); }, logout: function() { console.log("Saindo d aplicação...") } },
function() { console.log("Callback acionado"); }
Eduardo Mendes (edumendes@gmail.com)33
SobrescreverExiste um construtor padrão no ExtJS
constructor: function(options){ Ext.apply(this, options || {}); }
Eduardo Mendes (edumendes@gmail.com)
34
Sobrescrevendo o construtorExt.onReady(function () { Ext.define('Usuario', { nome: '', senha: '', !
!
!
login: function() { console.log("Logando na aplicacao..."); }, logout: function() { console.log("Saindo d aplicação...") } }, … });
constructor: function(options) { Ext.apply(this, options || {}); },
Eduardo Mendes (edumendes@gmail.com)
Instanciar um objeto 02 maneiras
35
Ext.create(Nome, opcoes);
Ext.ClassManager.instantiate(Nome, opcoes);
Eduardo Mendes (edumendes@gmail.com)
Instanciar um objeto Usuario
36
var usuario = Ext.create('Usuario');
Eduardo Mendes (edumendes@gmail.com)37
Passando parâmetros
var usuario = Ext.create(‘Usuario’, { nome: ‘Eduardo’, senha: ‘123456’ });
Eduardo Mendes (edumendes@gmail.com)38
Código final Ext.onReady(function () { Ext.define('Usuario', { nome: '', senha: '', ! constructor: function (options) { Ext.apply(this, options || {}); ! console.log("Construtor chamado"); }, login: function () { console.log("Logando na aplicacao..."); }, logout: function () { console.log("Saindo d aplicação...") } }, function () { console.log("Callback acionado"); } ); ! var usuario = Ext.create('Usuario', { nome: 'Eduardo', senha: '123456' }); console.log(usuario); });
Eduardo Mendes (edumendes@gmail.com)39
Refatorando Ext.define('Usuario', { nome: '', senha: '', ! constructor: function (options) { Ext.apply(this, options || {}); ! console.log("Construtor chamado"); }, login: function () { console.log("Logando na aplicacao..."); }, logout: function () { console.log("Saindo d aplicação...") } }, function () { console.log("Callback acionado"); } ); ! Ext.onReady(function () { var usuario = Ext.create('Usuario', { nome: 'Eduardo', senha: '123456' }); console.log(usuario); });
Eduardo Mendes (edumendes@gmail.com)41
HerançaA finalidade de utilizar herança com ExtJS é personalizar os componentes existentes para as necessidades de um sistema específico
Escolha um componente e configure suas propriedades e comportamentos
Eduardo Mendes (edumendes@gmail.com)42
Herdando dos componentes ExtJS
A opção extend permite que se possa herdar e personalizar um componente ExtJS
Ext.define('MyButton', { } );
Ext.onReady(function () { Ext.create("MyButton", { !
!
}); });
O 1.º passo é utilizar o código de definição de uma classe
extend:
É necessário informar o nome completo da classe que se quer herdar
O valor informado deve ser uma String
text: ‘Olá ExtJs', renderTo: Ext.getBody()
'Ext.button.Button'
Eduardo Mendes (edumendes@gmail.com)44
Herdando dos componentes ExtJS Ext.define('MyButton', { } );
Ext.onReady(function () { Ext.create("MyButton", { !
!
}); });
extend:
text: ‘Olá ExtJs', renderTo: Ext.getBody()
'Ext.button.Button'
Vamos adicionar à definição da classe a característica e o comportamento
Eduardo Mendes (edumendes@gmail.com)45
Herdando dos componentes ExtJS Ext.define('MyButton', { extend: ‘Ext.button.Button' text: ‘Olá ExtJs', renderTo: Ext.getBody() !
} );
Ext.onReady(function () { Ext.create("MyButton"); });
Essa opção ainda permite que haja sobrescrita de valores
Como fazer para evitar isso?
Eduardo Mendes (edumendes@gmail.com)
Adicionando propriedades finais
46
initComponent: function(){}
this.callParent();
gancho para personalizar a inicialização de um componente
faz uma chamada ao construtor da superclasse imediata
Eduardo Mendes (edumendes@gmail.com)47
Propriedades finais Ext.define('MyButton', { extend: 'Ext.button.Button', initComponent: function() { this.text = "Outra frase"; this.callParent(); } } );
Ext.onReady(function () { Ext.create("MyButton"); });
Eduardo Mendes (edumendes@gmail.com)48
Propriedades finais Ext.define('MyButton', { extend: 'Ext.button.Button', initComponent: function() { this.text = "Outra frase"; this.callParent(); } } );
Ext.onReady(function () { Ext.create("MyButton", { text: 'Olá ExtJS', renderTo: Ext.getBody() }); });
Eduardo Mendes (edumendes@gmail.com)49
Reaproveitando o componente
<body> <section id="opcao1"></section> <section id="opcao2"></section> <section id="opcao3"></section> </body>
Eduardo Mendes (edumendes@gmail.com)50
Reaproveitando o componente Ext.onReady(function () { Ext.create("MyButton", { renderTo: 'opcao1' }); !
Ext.create("MyButton", { renderTo: 'opcao2' }); !
Ext.create("MyButton", { renderTo: 'opcao3' }); !
});
<body> <section id="opcao1"></section> <section id="opcao2"></section> <section id="opcao3"></section> </body>
Eduardo Mendes (edumendes@gmail.com)52
MixinsDefinem um conjunto de comportamentos e configurações reutilizáveis que podem ser mixadas a uma classe
o 1.º passo é criar uma classe para ser o mixin
Eduardo Mendes (edumendes@gmail.com)53
Mixins
Um mixin pode ter qualquer número de métodos
Uma classe pode utilizar qualquer n.º de mixins
Eduardo Mendes (edumendes@gmail.com)54
Mixins Locavel e Vendivel Ext.define( !
);
‘Exemplo.mixin.Locavel’, { }
alugar: function() { console.log('Imovel está disponível para aluguel!');
Ext.define( !
);
‘Exemplo.mixin.Vendivel’, { }
vender: function() { console.log('Imovel está disponível para venda!');
Eduardo Mendes (edumendes@gmail.com)55
Mixins Locavel e Vendivel Ext.define('Exemplo.mixin.Locavel', { alugar: function() { console.log('Imovel está disponível para aluguel!'); } }); ! Ext.define('Exemplo.mixin.Vendivel', { vender: function() { console.log('Imovel está disponível para comprar!'); } });
Ext.define('Exemplo.imovel.Apartamento', { !
!
!
});
!
mixins: { !
!
}
!
!
alugarApartamento: ‘Exemplo.mixin.Locavel’, !
!
!
!
venderApartamento: ‘Exemplo.mixin.Vendivel’
as chaves podem possuir qualquer valor
Eduardo Mendes (edumendes@gmail.com)56
Mixins Locavel e Vendivel Ext.define('Exemplo.imovel.Apartamento', { mixins: { alugarApartamento: 'Exemplo.mixin.Locavel', venderApartamento: 'Exemplo.mixin.Vendivel' } });
Ext.onReady(function () { !
var meuAp = Ext.create('Exemplo.imovel.Apartamento'); meuAp.alugar(); meuAp.vender(); !
});
Eduardo Mendes (edumendes@gmail.com)58
ConfigCria métodos acessores e modificadores de forma automática, mais utilitários
getter setter reset apply
Eduardo Mendes (edumendes@gmail.com)59
Config
Ext.onReady(function () { Ext.define('Usuario', { nome: '', senha: '', }); });
Eduardo Mendes (edumendes@gmail.com)60
Config
Ext.define('Usuario', { config: { nome: '', senha: ‘', } });
getNome setNome resetNome
getSenha setSenha resetSenha
Eduardo Mendes (edumendes@gmail.com)63
Acionando um MessageBox a partir do botão
Ext.onReady(function() { Ext.create('Ext.Button', { text: 'Saudar a Turma', renderTo: 'botao-saudar', handler: function() { Ext.MessageBox.alert('Saudacao','Ola, Turma!'); } }); });
informa em o id do elemento onde será renderizado
informa a ação que será realizada ao clicar no botão
<p id="botao-saudar"></p>
Eduardo Mendes (edumendes@gmail.com)65
MessageBox + CallbackO 3.º parâmetro é um callback que é executado quando o botão OK é chamado
Ext.onReady(function() { Ext.create('Ext.Button', { text: 'Saudar a Turma', renderTo: 'botao-saudar', handler: function() { Ext.MessageBox.alert('Saudacao','Ola, Turma!'); } }); });
Eduardo Mendes (edumendes@gmail.com)66
MessageBox + CallbackO 3.º parâmetro é um callback que é executado quando o botão OK é chamado
Ext.onReady(function() { Ext.create('Ext.Button', { text: 'Saudar a Turma', renderTo: 'botao-saudar', handler: function() { Ext.MessageBox.alert('Saudacao','Ola, Turma!’, function() { console.log("A turma foi saudada"); } ); } }); });
Eduardo Mendes (edumendes@gmail.com)68
MessageBox + confirmA mensagem de confirmação
Ext.create('Ext.Button', { text: 'Confirmar Aula', renderTo: 'botao-confirmar', handler: function() { Ext.MessageBox.confirm( ‘Confirmacao', 'Confirmar a aula?’, function(btn) { console.log("A aula foi confirmada? R: " + btn); } ); } });
Eduardo Mendes (edumendes@gmail.com)70
MessageBoxA mensagem de confirmacao
Ext.create('Ext.Button', { text: 'Confirmar Aula', renderTo: 'botao-confirmar', handler: function() { Ext.MessageBox.confirm( ‘Confirmacao', 'Confirmar a aula?’, function(btn) { console.log("A aula foi confirmada? R: " + btn); } ); } });
Eduardo Mendes (edumendes@gmail.com)71
MessageBox + confirm + acao!
Ext.MessageBox.confirm( ‘Confirmacao', 'Confirmar a aula?’, function(btn) { console.log("A aula foi confirmada? R: " + btn); if (btn == "yes") { Ext.MessageBox.alert('Confirmada','Ola, …’); } } );
Eduardo Mendes (edumendes@gmail.com)73
MessageBox + PromptO botão de prompt
Ext.create('Ext.Button', { text: 'Prompt', renderTo: 'botao-prompt', handler: function() { Ext.MessageBox.prompt( 'Prompt', 'Qual o horario da aula?', function(btn, text) { console.log("O horario da aula eh: " + text); } ); } });
Eduardo Mendes (edumendes@gmail.com)75
MessageBox + Prompt + multilineO botão de prompt
Ext.create('Ext.Button', { text: 'Prompt', renderTo: 'botao-prompt', handler: function() { Ext.MessageBox.prompt( 'Prompt', 'Qual o horario da aula?', function(btn, text) { console.log("O horario da aula eh: " + text); } ); } });
Eduardo Mendes (edumendes@gmail.com)76
MessageBox + Prompt + multilineO botão de prompt
Ext.create('Ext.Button', { text: 'Prompt-area', renderTo: 'botao-prompt-area', handler: function() { Ext.MessageBox.prompt( 'Prompt', ‘Qual sera o conteudo da aula?', function(btn, text) { console.log("O conteudo da aula eh: " + text); }, this, true ); } });
Eduardo Mendes (edumendes@gmail.com)79
PanelVárias classes no ExtJS são subclasses de Panel como: !
Menu !
Form !
Grid !
Window
Eduardo Mendes (edumendes@gmail.com)
Configurações
81
html items buttons dockedItems layout tools title bars
Eduardo Mendes (edumendes@gmail.com)82
PanelCódigo básico
Ext.onReady(function() { Ext.create('Ext.panel.Panel', { title: 'Ola', width: 200, html: '<p>Turma!</p>', renderTo: Ext.getBody() }); });
Eduardo Mendes (edumendes@gmail.com)83
PanelCódigo básico
Ext.onReady(function() { Ext.create('Ext.panel.Panel', { title: 'Ola', width: 200, height: 300, html: '<p>Turma!</p>', renderTo: Ext.getBody() }); });
Eduardo Mendes (edumendes@gmail.com)
Configurações
84
html items buttons dockedItems layout tools title bars
Eduardo Mendes (edumendes@gmail.com)85
Panel + items
Ext.onReady(function() { Ext.create('Ext.panel.Panel', { bodyPadding: 20, width: 300, title: 'Filters', items: [{ xtype: 'datefield', fieldLabel: 'Data inicial' }, { xtype: 'datefield', fieldLabel: 'Data final' }], renderTo: Ext.getBody() }); });
Eduardo Mendes (edumendes@gmail.com)86
Panel + items + grid
Ext.onReady(function() { Ext.create('Ext.panel.Panel', { bodyPadding: 20, width: 300, title: 'Filters', items: [{ xtype: 'datefield', fieldLabel: 'Data inicial' }, { xtype: 'datefield', fieldLabel: 'Data final' }], renderTo: Ext.getBody() }); });
Eduardo Mendes (edumendes@gmail.com)
Configurações
87
html items buttons dockedItems layout tools title bars
Eduardo Mendes (edumendes@gmail.com)88
Panel + dockedItems Ext.create('Ext.panel.Panel', { bodyPadding: 20, title: 'Filters', width: 300, items: [{ xtype: 'datefield', fieldLabel: 'Data inicial' }, { xtype: 'datefield', fieldLabel: 'Data final' }], dockedItems: [{ xtype: 'toolbar', dock: 'bottom', items: [{ text: 'Encaixado na base' }] }], renderTo: Ext.getBody() });
Recommended