ExtJS-4

Eduardo Mendes (edumendes@gmail.com)
Introdução
2

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

Cross-Browser
JavaScript

É 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
PHP
RAILS
SPRING
STRUTS 2
PYTHON
As informações entre servidor e ExtJS
são trocadas por JSON e XML

Orientado
a Objetos
7
Ext.define(Nome, configuracoes, callback);

Carregamento
Dinâmico
8
Ext.Loader.setConfig({
enabled: true
});
!
Ext.Loader.setPath(‘Ext.ux’, ‘../ux’);
!
Ext.require(…);

Package
Data
9
Ext.Loader.setConfig({
enabled: true
});
!
Ext.Loader.setPath(‘Ext.ux’, ‘../ux’);
!
Ext.require(…);

Model
Fields
10
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{ name: ‘id’, type: 'int'},
{name: 'name', type: 'string'}
]
});

Model
Association
11
Ext.define('User', {
fields: [‘id’,’name’],
hasMany: 'Posts'
});
!
Ext.define('Post', {
fields: [‘id’,’user_id’, ‘title’, ‘body’],
belongsTo: 'User'
});

Arquitetura MVC
12

Vasta Documentação
13

Utilizando o ExtJS
14

Faça o download do ExtJS no site da Sencha

Descompacte e renomeie

Estrutura
docs: 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
!

Ouvindo o evento ready
Ext.onReady(function(){
<code>
});
DOM
"I'm ready"
O código só executará depois que
o DOM estiver "pronto"

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

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>

Internacionalização
21

Internacionalização

Criando um Painel Simples
23

widget.panel
24

<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', {
!
!
!
!
!
!
!
});

Integrando com jQuery
26

Criando um Painel Simples + jQuery
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");
});

Carregando o conteúdo com jQuery

Deﬁnindo classes
29

Deﬁnir classes
02 maneiras
30
Ext.define(Nome, configuracoes, callback);
Ext.ClassManager(Nome, configuracoes, callback);

Classe Usuario

32
Deﬁnindo uma classe
!
!
!
!
!
!
!
!
!
!
!
!
});
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");
}

Sobrescrever
Existe um construtor padrão no ExtJS
constructor: function(options){
Ext.apply(this, options || {});
}

34
Sobrescrevendo o construtor
nome: '',
senha: '',
!
!
!
login: function() {
},
logout: function() {
}
},
…
});
constructor: function(options) {
},

Instanciar um objeto
02 maneiras
35
Ext.create(Nome, opcoes);
Ext.ClassManager.instantiate(Nome, opcoes);

Instanciar um objeto
Usuario
36
var usuario = Ext.create('Usuario');

Passando parâmetros
var usuario = Ext.create(‘Usuario’, {
nome: ‘Eduardo’,
senha: ‘123456’
});

Código ﬁnal
nome: '',
senha: '',
!
constructor: function (options) {
!
console.log("Construtor chamado");
},
login: function () {
},
logout: function () {
}
},
function () {
}
);
!
var usuario = Ext.create('Usuario', {
nome: 'Eduardo',
senha: '123456'
});
console.log(usuario);
});

Refatorando
nome: '',
senha: '',
!
constructor: function (options) {
!
console.log("Construtor chamado");
},
login: function () {
},
logout: function () {
}
},
function () {
}
);
!
var usuario = Ext.create('Usuario', {
nome: 'Eduardo',
senha: '123456'
});
console.log(usuario);
});

Herança
40

Herança
A 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

Herdando dos componentes ExtJS
A opção extend
permite que se possa
herdar e personalizar
um componente ExtJS
Ext.define('MyButton', {
}
);
Ext.create("MyButton", {
!
!
});
});
O 1.º passo é utilizar
o código de deﬁniçã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'

}
);
!
!
});
});
extend:
'Ext.button.Button'
Vamos adicionar
à deﬁnição da classe
a característica
e o comportamento

extend: ‘Ext.button.Button'
!
}
);
Ext.create("MyButton");
});
Essa opção
ainda permite
que haja sobrescrita
de valores
Como fazer para
evitar isso?

Adicionando
propriedades ﬁnais
46
initComponent: function(){}
this.callParent();
gancho para personalizar
a inicialização de um
componente
faz uma chamada
ao construtor
da superclasse imediata

Propriedades ﬁnais
extend: 'Ext.button.Button',
initComponent: function() {
this.text = "Outra frase";
this.callParent();
}
}
);
Ext.create("MyButton");
});

Propriedades ﬁnais
extend: 'Ext.button.Button',
initComponent: function() {
this.text = "Outra frase";
this.callParent();
}
}
);
text: 'Olá ExtJS',
});
});

Reaproveitando o componente
<body>
<section id="opcao1"></section>
</body>

Reaproveitando o componente
renderTo: 'opcao1'
});
!
renderTo: 'opcao2'
});
!
renderTo: 'opcao3'
});
!
});
<body>
</body>

Mixins
51

Mixins
Deﬁnem um conjunto de
comportamentos e conﬁgurações
reutilizáveis que podem ser mixadas
a uma classe
o 1.º passo é criar uma classe
para ser o mixin

Mixins
Um mixin pode ter
qualquer número
de métodos
Uma classe pode
utilizar qualquer n.º
de mixins

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!');

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

Ext.define('Exemplo.imovel.Apartamento', {
mixins: {
alugarApartamento: 'Exemplo.mixin.Locavel',
venderApartamento: 'Exemplo.mixin.Vendivel'
}
});
!
var meuAp = Ext.create('Exemplo.imovel.Apartamento');
meuAp.alugar();
meuAp.vender();
!
});

Conﬁg (getters, setters)
57

Conﬁg
Cria métodos acessores e
modiﬁcadores de forma automática,
mais utilitários
getter
setter
reset
apply

Conﬁg
nome: '',
senha: '',
});
});

Conﬁg
config: {
nome: '',
senha: ‘',
}
});
getNome
setNome
resetNome
getSenha
setSenha
resetSenha

MessageBox
alert, conﬁrm, prompt
61

Botão e MessageBox

Acionando um MessageBox a partir do botão
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>

Saudar Turma
64

MessageBox + Callback
O 3.º parâmetro é um callback que é executado quando o botão OK é chamado
Ext.MessageBox.alert('Saudacao','Ola, Turma!');
}
});
});

MessageBox + Callback
O 3.º parâmetro é um callback que é executado quando o botão OK é chamado
Ext.MessageBox.alert('Saudacao','Ola, Turma!’,
function() {
console.log("A turma foi saudada");
}
);
}
});
});

Callback
67

MessageBox + conﬁrm
A mensagem de conﬁrmação
text: 'Confirmar Aula',
renderTo: 'botao-confirmar',
Ext.MessageBox.confirm(
‘Confirmacao',
'Confirmar a aula?’,
function(btn) {
console.log("A aula foi confirmada? R: " + btn);
}
);
}
});

Conﬁrmação
69

MessageBox
A mensagem de conﬁrmacao
text: 'Confirmar Aula',
renderTo: 'botao-confirmar',
‘Confirmacao',
function(btn) {
}
);
}
});

MessageBox + conﬁrm + acao
!
‘Confirmacao',
function(btn) {
if (btn == "yes") {
Ext.MessageBox.alert('Confirmada','Ola, …’);
}
}
);

Alerta da aula
72

MessageBox + Prompt
O botão de prompt
text: 'Prompt',
renderTo: 'botao-prompt',
Ext.MessageBox.prompt(
'Prompt',
'Qual o horario da aula?',
function(btn, text) {
console.log("O horario da aula eh: " + text);
}
);
}
});

Prompt
74

MessageBox + Prompt + multiline
O botão de prompt
text: 'Prompt',
renderTo: 'botao-prompt',
'Prompt',
'Qual o horario da aula?',
console.log("O horario da aula eh: " + text);
}
);
}
});

MessageBox + Prompt + multiline
O botão de prompt
text: 'Prompt-area',
renderTo: 'botao-prompt-area',
'Prompt',
‘Qual sera o conteudo da aula?',
console.log("O conteudo da aula eh: " + text);
},
this,
true
);
}
});

Conteudo da Aula
77

Panel
78

Panel
Várias classes no ExtJS são subclasses de Panel como:
!
Menu
!
Form
!
Grid
!
Window

Panel

Conﬁgurações
81
html
items
buttons
dockedItems
layout
tools
title
bars

Panel
Código básico
Ext.create('Ext.panel.Panel', {
title: 'Ola',
width: 200,
html: '<p>Turma!</p>',
});
});

Panel
Código básico
title: 'Ola',
width: 200,
height: 300,
html: '<p>Turma!</p>',
});
});

Conﬁgurações
84
html
items
buttons
dockedItems
layout
tools
title
bars

Panel + items
bodyPadding: 20,
width: 300,
title: 'Filters',
items: [{
xtype: 'datefield',
fieldLabel: 'Data inicial'
}, {
xtype: 'datefield',
fieldLabel: 'Data final'
}],
});
});

Panel + items + grid
bodyPadding: 20,
width: 300,
title: 'Filters',
items: [{
xtype: 'datefield',
}, {
xtype: 'datefield',
}],
});
});

Conﬁgurações
87
html
items
buttons
dockedItems
layout
tools
title
bars

Panel + dockedItems
bodyPadding: 20,
title: 'Filters',
width: 300,
items: [{
xtype: 'datefield',
}, {
xtype: 'datefield',
}],
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [{
text: 'Encaixado na base'
}]
}],
});

ExtJS-4

Mais conteúdo relacionado

Destaque

Semelhante a ExtJS-4

Mais de Eduardo Mendes

ExtJS-4