3. 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
6. 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
PHP
RAILS
SPRING
STRUTS 2
PYTHON
As informações entre servidor e ExtJS
são trocadas por JSON e XML
17. Eduardo Mendes (edumendes@gmail.com)17
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
!
41. Eduardo Mendes (edumendes@gmail.com)41
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
42. 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'
44. 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
45. 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?
63. 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>
65. Eduardo Mendes (edumendes@gmail.com)65
MessageBox + Callback
O 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!');
}
});
});
66. Eduardo Mendes (edumendes@gmail.com)66
MessageBox + Callback
O 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");
}
);
}
});
});