extjs-4

Sencha ExtJS

Eduardo Mendes ([email protected])

Introdução

2

mailto:[email protected]


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 ([email protected])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

PHPRAILS

SPRINGSTRUTS 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', { extend: 'Ext.data.Model', fields: [‘id’,’name’], hasMany: 'Posts' }); !

Ext.define('Post', { extend: 'Ext.data.Model', 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



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 !



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

Criando um Painel Simples



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

!

!

!

!

!

!

});



Integrando com jQuery

26



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"); });



Carregando o conteúdo com jQuery



Definindo classes

29



Definir classes 02 maneiras

30

Ext.define(Nome, configuracoes, callback);

Ext.ClassManager(Nome, configuracoes, callback);



Classe Usuario



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"); }



SobrescreverExiste um construtor padrão no ExtJS

constructor: function(options){ Ext.apply(this, options || {}); }



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



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 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); });



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); });



Herança

40



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



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'



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



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?



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



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

Ext.onReady(function () { Ext.create("MyButton"); });



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() }); });



Reaproveitando o componente

<body> <section id="opcao1"></section> <section id="opcao2"></section> <section id="opcao3"></section> </body>



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>



Mixins

51



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



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



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



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

});



Config (getters, setters)

57



ConfigCria métodos acessores e modificadores de forma automática, mais utilitários

getter setter reset apply



Config

Ext.onReady(function () { Ext.define('Usuario', { nome: '', senha: '', }); });



Config

Ext.define('Usuario', { config: { nome: '', senha: ‘', } });

getNome setNome resetNome

getSenha setSenha resetSenha



MessageBoxalert, confirm, prompt

61



Botão e MessageBox



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>



Saudar Turma

64



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



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"); } ); } }); });



Callback

67



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); } ); } });



Confirmação

69



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); } ); } });



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, …’); } } );



Alerta da aula

72



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); } ); } });



Prompt

74



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); } ); } });



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 ); } });



Conteudo da Aula

77



Panel

78



PanelVárias classes no ExtJS são subclasses de Panel como: !

Menu !

Form !

Grid !

Window



Panel



Configurações

81

html items buttons dockedItems layout tools title bars



PanelCódigo básico

Ext.onReady(function() { Ext.create('Ext.panel.Panel', { title: 'Ola', width: 200, html: '<p>Turma!</p>', renderTo: Ext.getBody() }); });



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() }); });



Configurações

84




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() }); });



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() }); });



Configurações

87




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() });


extjs-4

Technology