102
Workshop de ExtJS 4 + PHP pela School of Net Javascript Zaedy Sayão

Workshop ExtJS4

Embed Size (px)

DESCRIPTION

Slides do Workshop de ExtJS4 ministrado na School of Net por Zaedy Sayão

Citation preview

Page 1: Workshop ExtJS4

Workshop  de  ExtJS  4  +  PHP  pela  School  of  Net  

Javascript  

Zaedy  Sayão  

Page 2: Workshop ExtJS4

Agenda  

Debugando  Voltando  ao  básico  de  JS  

Page 3: Workshop ExtJS4

Problemas  comuns  

•   Inclui  todos  os  arquivos?  •   Inclui  na  ordem  correta?  •   Inclui  os  arquivos  corretos?  •   Todos  os  arquivos  estão  sendo  carregados  e  excutados?  •   Erros  básicos  de  escrita    

• If  (num  =  10)  • Case  SensiBve  

•   Null  !==  undefined  •   0  é  falso  

Page 4: Workshop ExtJS4

Debugando  

Firebug  Developer  Tools  

•   Javascript  “on  the  fly”  •   Auto  complete  •   Line  ediBng  •   Breakpoints  •   Inspect  Elements  •   Table  •   Navegação  

Page 5: Workshop ExtJS4

Debugando  

IlluminaBons  for  Developers  JSLint  

Page 6: Workshop ExtJS4

Back  to  basics!  

• Tipos  • Operadores  • Variables  x  References  • Objects  

Page 7: Workshop ExtJS4

Tipos  básicos  

• String  • Integer  • Float  • Object  • Array  • Boolean  • Date  • FuncBon  

Page 8: Workshop ExtJS4

Operadores  aritméLcos  

•   +  •   -­‐  •   *  •   /  •   %  •   ++  •   -­‐-­‐  

Page 9: Workshop ExtJS4

Operadores  lógicos  e  relacionais  

• !  • &&  • ||  •   ==  •   !=  •   ===  •   !==  •   <  

•   <=  • >  • >=  

Page 10: Workshop ExtJS4

References  

“A   referência   para   uma   “variável”   é   um  ponteiro  para  uma  área  de  memória  onde  um  valor  ou  objeto  está  guardado.”  

Exemplo:  •   Criar  uma  func=on,  referenciá-­‐la  e  passá-­‐la  

Page 11: Workshop ExtJS4

References  

PARE  de  usar  a  palavra  “variável”!!!!  

•   Use  o  termo  referência  •   Lembre-­‐se  que  na  verdade  é  um  ponteiro  •   Usaremos  referência  daqui  em  diante  

Page 12: Workshop ExtJS4

Referências  Globais  

•    Se   não   usarmos   a   palavra   “var”,   são  tratadas  como  globais  

•   SÃO  PERIGOSAS  ===  EVIL  ===  DEMO!!!  •   NÃO  USEM!!!!  •   Únicas  que  são  permiBdas  são  Namespaces  •   Sempre  usem  “var”  

Page 13: Workshop ExtJS4

Convenções  (JS)  ===  OBRIGAÇÃO  

•   References  devem  começar  com  letra  minúscula  •   Exceto  quando  aponta  para  uma  Classe  (construtor  ou  singleton)  

Page 14: Workshop ExtJS4

Por  que  se  usa  “variável”?  

•   Javascript  tem  Bpagem  dinâmica  

Page 15: Workshop ExtJS4

References  

3  

3  3  

Memória  

var  a   var  b  

Page 16: Workshop ExtJS4

References  

9  

3  9  

Memória  

var  a   var  b  

3  

Memória  

• Não  há  encadeamento  de  valor  

Page 17: Workshop ExtJS4

References  

Page 18: Workshop ExtJS4

References  e  Objects  

Page 19: Workshop ExtJS4

References  e  Objects  

Page 20: Workshop ExtJS4

Passando  objetos  como  referências  

Page 21: Workshop ExtJS4

Passando  objetos  como  referências  

•    String,   boolean,   integer,   null   ===  override,  sobrescreve-­‐se  o  valor  •   Objetos  SÃO  DIFERENTES!  

Page 22: Workshop ExtJS4

FuncLons  

•   São  class  objects  •   Possuem  propriedades  e  métodos  

•   Extend  de  Object  •   Herdam  de  FuncBon.prototype  • call  e  apply  são  herdados  

Page 23: Workshop ExtJS4

“this”  

•   É  uma  referência  “mágica”  • Extremamente   importante   que   se  entenda  o  que  é  e  como  usar  

• Define  o  escopo  de  execução  

Page 24: Workshop ExtJS4

Escopo  

1.   Quando  uma  função  é  executada  via  uma  referência   “var”,   o   contexto   padrão   de  execução  (‘this’)  é  “window”  

2.   Quando   uma   função   é   executada   via   um  “key”   de   um   objeto,   o   contexto   de  execução   (‘this’)   é   o   objeto   ao   qual   o  “key”  pertence    

Page 25: Workshop ExtJS4

Execução  padrão  para  funções  com  “var”  

Page 26: Workshop ExtJS4

Execução  padrão  para  objetos  –  func/on  based  

Page 27: Workshop ExtJS4

Qual  o  escopo  de  execução  de  getNome()?  

Page 28: Workshop ExtJS4

Qual  o  escopo  de  execução  de  getNome()?  

Page 29: Workshop ExtJS4

Forçando  escopo  de  execução  

•   call  e  apply  podem  ser  usados  para  forçar  o  escopo  de  execução  

•    Logo,   você   tem   TOTAL   controle   sob   o  escopo   de   execução   de   qualquer   função  em  Javascript  

Page 30: Workshop ExtJS4

call  

Page 31: Workshop ExtJS4

O  Problema  do  “call”  

• Você   tem   que   definir   todos   os  argumentos  

• Ruim  para  refactoring  

Page 32: Workshop ExtJS4

apply  

Page 33: Workshop ExtJS4

HoisLng  

Javascript   muda   todas   as   variáveis  declaradas   para   o   topo   do   escopo   da  função  

Page 34: Workshop ExtJS4

Objects  

• Classe   base   de   tudo   que   está   dentro   do  Javascript  

• Basicamente,  tudo  extends  de  Object  

• String,  Array,  FuncBons,  etc  

Page 35: Workshop ExtJS4

Construtores  

• Inicializa  os  objetos  • São   nada   mais   do   que   funções   que   são  executadas  no  escopo  de  um  novo  Object  

• Apenas  isso,  nada  mais    

Page 36: Workshop ExtJS4

Prototype  

Page 37: Workshop ExtJS4

Namespace  

• Container  que  provê  um  agrupamento  lógico  

Exemplo:  diretório  

 Cada  nome  dentro  de  um  diretório  idenBfica  unicamente   um   arquivo,   mas   o   mesmo   nome  pode  ser  usado  em  diretórios  diferentes  

Page 38: Workshop ExtJS4

Namespace  

Exemplo:  

•   Ext.grid.Panel  •   Ext.form.Panel  

•   MinhaApp.usuario.Panel  

Page 39: Workshop ExtJS4

Namespace  

Por  que  usar?  

Page 40: Workshop ExtJS4

Namespace  

GLOBAL  ===  EVIL  

Page 41: Workshop ExtJS4

Namespace  

O   root  de   todos  os  namespaces  é  o   “window”  object  do  browser  

Root  do  Ext:    window.Ext  ou  simplesmente  Ext  

Page 42: Workshop ExtJS4

Package  

Namespace   Package   Class  

Ext   grid   Panel  

Namespace   Package   Sub-­‐package   Class  

Ext   form   field   Text  

Page 43: Workshop ExtJS4

ExtJS  

História  

•   Extensão  –  YUI  (Yahoo!  User  Interface)  • yui-­‐ext  • YUI  era  base  

•   Jack  Slocum  •   Virou  Ext  na  sua  versão  1.0  •    Na   versão   1.1.1   passou   a   ser   suportado   por  diversos  browsers  •   IE  6,  Firefox  1.5,  Safari  2,  Opera  9  e  outros  

Page 44: Workshop ExtJS4

ExtJS  

Licença  

•   Open  Source  –  GPL  v3  •   Comercial  • $329    • $299  –  suporte  • Há  pacotes  de  licença  

Page 45: Workshop ExtJS4

ExtJS  

Vantagens  

•   Cross-­‐browser  •    OO   based   –   alta   reuBlização   de   código   e  alta  produBvidade  •   Tecnologia  não  proprietária  –  não  depende  de  plugins  •   Sencha  Plataform  –  reusabilidade  para  uso  do  Sencha  Touch  

Page 46: Workshop ExtJS4

ExtJS  

Vantagens  

•   Deploy  fácil  •   Muito  bem  organizado  

•   Fácil  de  manter  

•   Extensível  •    Fácil   de   aprender   (espero   que   concordem  ao  final  do  Workshop  )  

Page 47: Workshop ExtJS4

Sencha  

Produtos  

•   ExtJS  4  •   Sencha  Touch  •   Sencha.io  •   Sencha  Animator  

•   Ext  GWT  

•   Ext  Designer  

Page 48: Workshop ExtJS4

ExtJS  

Baixando  e  Instalando  

Page 49: Workshop ExtJS4

ExtJS  

API  

•   Navegação  •   Search  •   Vídeos  •   Guides  •   USE!!!!!  

Page 50: Workshop ExtJS4

ExtJS  

Examples  

•   Alto  número  de  exemplos  

•   Mostram  o  uso  geral  dos  componentes  

•   Código  acessível  •   Devem  ser  SEMPRE  usados!!  

Page 51: Workshop ExtJS4

ExtJS  

Regras  sobre  o  que  NÃO  fazer  

1.   Nunca  altere  os  arquivos  do  framework  

2.   NUNCA  3.   NEVER  4.   JAMAIS  

5.   EM  NENHUMA  HIPÓTESE  

6.   Mas...  EU  DISSE  NUNCA!  

Page 52: Workshop ExtJS4

ExtJS  

Regras  sobre  o  que  NÃO  fazer  

1.   Não   mude   de   uma   versão   para   outra   sem  testar  

2.   Não  use  mais  a  palavra  “new”  –  Ext.create  3.   Não  programe  sem  ferramenta  de  debug  4.   Não  programe  fora  das  convenções  5.   Não   misture   código   PHP   (ou   outra  

linguagem)  com  seu  código  JS  1.   Mantenha  seu  código   limpo  e   independente  de  

plataforma  

Page 53: Workshop ExtJS4

ExtJS  

Regras  sobre  o  que  fazer    

1.   Abuse  e  use  do  OO  2.   Use  classes  abstratas  3.   Documente  seu  código  

1.   Existem   ferramentas   que   geram   documentação  para  JS  

4.   Abuse  e  use  de:  1.   Extends  2.   Override  

Page 54: Workshop ExtJS4

ExtJS  

Regras  sobre  o  que  fazer    

1.   Use  as  convenções  1.   Use  nomes  condizentes  

2.   Use   sempre   arquivo   de   debug   em  desenvolvimento  

3.   Use  Loader  em  desenvolvimento  1.   Jamais  use  em  produção!  

4.   Tenha  sempre  a  API  a  mão  5.   Google  é  sempre  seu  pastor!  6.   Lembre-­‐se,  no  final,  é  tudo  JS!  

Page 55: Workshop ExtJS4

ExtJS  

Arquivos  do  framework  

Arquivo  bootstrap.js  x  app.js  

• ext-­‐debug.js   –   Core,   apenas   para  desenvolvimento  • Usar  com  Loader  

• ext.js  –  igual  o  ext-­‐debug,  porém  minified  • ext-­‐all-­‐debug.js  –  Todo  o  framework  • ext-­‐all.js  –  ext-­‐all-­‐debug.js  minified  

Page 56: Workshop ExtJS4

ExtJS  

Arquivos  do  framework  

Locale  

 /locale/ext-­‐lang-­‐*.js  

   *  =  pt_BR  

   *  =  es  

   ...  

Page 57: Workshop ExtJS4

ExtJS  

Estrutura  de  pastas  Do  framework  

Page 58: Workshop ExtJS4

ExtJS  

Estrutura  de  pastas  Da  nossa  aplicação  

Page 59: Workshop ExtJS4

Convenções  ===  OBRIGAÇÃO  

Classes  • Deve  conter  apenas  números  e  letras  • Números  não  são  indicados  • Aceitos  quando  se  referem  a  termos  técnicos  

• Não   use   underscore,   hífen   e   outros   Bpos   de  caracteres  que  não  sejam  alfa-­‐numéricos  

• MinhaApp.admin_area.Login    -­‐  NÃO  FAÇA  

• MinhaApp.admin.Login    • MinhaApp.uBl.Base64    

Page 60: Workshop ExtJS4

Convenções  ===  OBRIGAÇÃO  

Classes  • Devem  ser  agrupadas  em  PACKAGES,  com  seus  respecBvos   NAMESPACES,   usando   notação   por  “.”  • Devem   ter   ao   menos   2   níveis,   um   do  Namespace  e  outro  do  nome  da  classe  

• MinhaClasse    

• MinhaApp.MinhaClasse    • MinhaApp.data.MeuProxy    

Page 61: Workshop ExtJS4

Convenções  ===  OBRIGAÇÃO  

Classes  • O  Namespace  e  o  nome  da  classe  devem  ser  usados   em   CamelCased.   Todo   o   resto   deve  estar  em  minúsculo  

• MinhaApp.Admin.MinhaClasse    

• MinhaApp.admin.MinhaClasse    

Page 62: Workshop ExtJS4

Convenções  ===  OBRIGAÇÃO  

Classes  • Classes   que   não   são   do   framework   nem  fornecidas   pela   Sencha   não   podem   usar   o  namespace  Ext  –  NUNCA  • Acrônimos  devem  ser  CamelCased  

• MinhaApp.server.HTTP    

• MinhaApp.server.H�p    

Page 63: Workshop ExtJS4

Convenções  ===  OBRIGAÇÃO  

Arquivos  • Os   nomes   dos   arquivos   devem   ser  mapeados  diretamente  para  o  caminho  onde  estão.  • Só  deve  haver  uma  classe  por  arquivo  

• Ext.uBl.Observable   –   caminhoApp/src/Ext/uBl/Observable.js  • MinhaApp.server.H�p   –   caminhoApp/src/MinhaApp/server/H�p.js  

Page 64: Workshop ExtJS4

Convenções  ===  OBRIGAÇÃO  

Métodos  e  variáveis  • Deve  conter  apenas  números  e  letras  • Números  não  são  indicados  

• Aceitos  quando  se  referem  a  termos  técnicos  

• Não  use  underscore,  hífen  e  outros  Bpos  de  caracteres  que  não  sejam  alfa-­‐numéricos  

• Devem   sempre   ser   camelCased.   Essa   regra  também  se  aplica  a  acrônimos  

Page 65: Workshop ExtJS4

Convenções  ===  OBRIGAÇÃO  

Métodos  e  variáveis  

Métodos:  base64Encode()  getHtml()  x  getHTML()  

Variáveis:  var  base64Encoder  

var  xmlReader  

Page 66: Workshop ExtJS4

Convenções  ===  OBRIGAÇÃO  

Propriedades  

Mesmas   regras   de   métodos   e   variáveis,  exceto  no  caso  staBc  StaBc   properBes   devem   ser   sempre   upper-­‐cased  (maiúscula)  

Ext.MessageBox.YES  =  “SIM”  

MinhaApp.math.MinhaClasse.PI  =    3.14  

Page 67: Workshop ExtJS4

Ext.define  e  Ext.create  

Page 68: Workshop ExtJS4

Gefers  e  Sefers  

Page 69: Workshop ExtJS4

Extends  

Page 70: Workshop ExtJS4

Mixins  

Herança  MúlBpla  Bastante  usados  no  framework  

 Observable  

 State  

 Draggable  

 .....  

Page 71: Workshop ExtJS4

Ext.Loader  

• Provê   carregamento   de   classes   sob  demanda  • Síncrono  e  assíncrono  

• Baseado  em  controle  de  dependência  

• Pode   ser   usado   para   praBcamente   toda   a  aplicação  

• Muito  fácil  de  usar  

• Menos  HTML  que  se  escreve  

• Alguns  “tricks”  

Page 72: Workshop ExtJS4

Ext.Loader  

Síncrono  • Carrega  usando  XHR  • Várias   desvantagens   (mais   do   que   o  assíncrono)  • Limitado  ao  mesmo  domínio  de  origem  • Requer  um  web  server  

• Horrível  para  debugar!  

Page 73: Workshop ExtJS4

Ext.Loader  

Assíncrono  • Solução:  use  Ext.require()  • Antes  do  Ext.onReady()  • Usará  carregamento  assíncrono  

• Adiciona  script  tags  no  HEAD  • Muito  melhor  para  debugar  • Cross-­‐domain  • Não  precisa  de  web  server  

• Problema:   deve-­‐se   especificar   todas   as  dependências  antes  da  classe  ser  instanciada  

Page 74: Workshop ExtJS4

Ext.Loader  

Problemas  gerais  • Muito  custoso  

• Gera  várias  requisições  ao  servidor  • Problemas  com  cache  

• Lento  • Não  carrega  os  arquivos  minified  

• Carrega  classes  desnecessárias  • Ext.require(‘Ext.Component’)   carrega   items   de  Sprite  do  pacote  draw  

Page 75: Workshop ExtJS4

Ext.Loader  

Problemas  gerais  • Muito  custoso  

• Gera  várias  requisições  ao  servidor  • Problemas  com  cache  

• Lento  • Não  carrega  os  arquivos  minified  

• Carrega  classes  desnecessárias  • Ext.require(‘Ext.Component’)   carrega   items   de  Sprite  do  pacote  draw  

Page 76: Workshop ExtJS4

Extensions  

• Ext  foi  desenvolvido  para  ser  extendido  • Tire  proveito  disso  

• Cuidado   para   não   extender   o   component/class  errado  • Pode  causar  problema  de  performance  

Page 77: Workshop ExtJS4

Extensions  

Extendendo  Panel  • Preciso  de  Docked?  • Title  Bar?  • Sim?  Então  extenda  Panel  • Caso   contrário,   pense   em   extender   Container  ou  Component  

• Preciso   de   algo   que   gerencie   outros  componentes  usando  layout?  • Sim?  Então  extenda  Ext.container.Container  

• Caso  contrário,  extenda  Ext.Component  

Page 78: Workshop ExtJS4

Ciclo  de  vida  dos  Components  

• Ext.component.AbstractComponent  • Muito  importante  saber!  

• É   o   que   diferencia   o   ExtJS   de   outros  frameworks  • Provê   confiabilidade   e   previsibilidade   ao  framework  

Page 79: Workshop ExtJS4

Ciclo  de  vida  dos  Components  

InicializaLon  

DestrucLon  Render  

45%  

Page 80: Workshop ExtJS4

Inicializa/on  

•   Bootstrap  • Cria  o  id  •   Registra  o  componente  no  ComponentMgr  

Page 81: Workshop ExtJS4

Render  

•   Renderiza  o  componente  na  tela  •   Adiciona  eventos  • Usa   os   layouts   para   organizar   os  componentes  

Page 82: Workshop ExtJS4

Destruc/on  

• ReBra  o  Component  da  tela  • ReBrar  os  eventos  -­‐  listeners  

Page 83: Workshop ExtJS4

Ciclo  de  vida  dos  Components  

Passo  a  Passo  -­‐  InicializaBon  • Configuração   do   objeto   é   aplicada   e  guardada  • Eventos  básicos  são  adicionados  • BeforeacBvate,  beforeshow,  show,  render,  etc  

• ID  é  atribuído  ou  gerado  automaBcamente  • Plugins  são  construídos  • initComponent  é  executado  • listeners  customizados  são  aplicados  • eventos  são  inicializados  

Page 84: Workshop ExtJS4

Ciclo  de  vida  dos  Components  Passo  a  Passo    -­‐  InicializaBon  

• Component  é  registrado  no  ComponentManager  • Construtores  dos  mixins  de  Base  são  executados  • Construtor  de  Observable  é  chamado  • Construtor  de  State  é  chamado  

• Plugins  são  inicializados  • ComponentLoader  é  inicialiado  (não  é  Ext.Loader!)  • Se   configurado,   o   Component   é   renderizado  (renderTo,  applyTo)  • Se  configurado,  Component  é  mostrado  

Page 85: Workshop ExtJS4

Ciclo  de  vida  dos  Components  

Passo  a  Passo  -­‐  Render  

• Evento  beforerender  é  chamado  

• Component   element   é   guardado   na  referência  ‘el’  • Se   for   um   floaBng   Component,   floaBng   é  habilitado  e  registrado  no  WindowsManager  

• O  container  do  Component  é  inicializado  

Page 86: Workshop ExtJS4

Ciclo  de  vida  dos  Components  

Passo  a  Passo  -­‐  Render  

• onReder  é  executado  • Elementos   do   Component   são   injetados   no  DOM  • Base  CSS  e  styles  são  aplicados  • “ui”  é  aplicado  • “frame”  é  inicializado  • renderTpl  é  inicializado  • renderData  é  inicializado  

Page 87: Workshop ExtJS4

Ciclo  de  vida  dos  Components  Passo  a  Passo  -­‐  Render  

• onReder  é  executado  • renderTpl  é  aplicado  usando  renderData  • Render  selectors  são  aplicados  • “ui”  styles  são  aplicados  

• Visibilidade   do   elemento   é   setada   a   parBr   do  atributo  hideMode  • Se   overCls   esBver   setado,   eventos   de   mouseover/out  são  capturados  • Evento  de  render  é  disparado  • Conteúdo   do   Component   é   inicialiado   (html,  contentEl,  tpl/data)  

Page 88: Workshop ExtJS4

Ciclo  de  vida  dos  Components  Passo  a  Passo  -­‐  Render  

• a�erRender  é  executado  • Container  Layout  é  inicializado  (AbstractConteiner)  • ComponentLayout   é   inicializado  (AbstractComponent)  • Tamanho  do  Component  é  setado  • Se   for   um   floaBng   Component,   é   movido   para  coordenada  XY  

• a�erRender   é   disparado   e   passado   para   o  elemento  do  Component  • Component  é  escondido,  se  configurado  • Component  é  desabilitado,  se  configurado  

Page 89: Workshop ExtJS4

Ciclo  de  vida  dos  Components  

Passo  a  Passo  -­‐  DestrucBon  

• beforedestroy  é  disparado  • Se  floaBng  esBver   setado,  o   componente  é  desregistrado  do  floaBng  manager  • Component   é   removido   do   seu   container  pai  

• Elemento  é  removido  do  DOM  • Listeners  são  removidos  

Page 90: Workshop ExtJS4

Ciclo  de  vida  dos  Components  

Passo  a  Passo  -­‐  DestrucBon  

• onDestroy  é  chamado  

• Plugins  são  destruidos  • O   Component   é   desregistrado   do  ComponentManager  • destroy  é  disparado  • Mixin  de  State  é  destruído  

• Listeners  do  Component  são  removidos  

Page 91: Workshop ExtJS4

Layouts  

Dois  Bpos  

• Container  Layout  • Responsável   por   organizar   e   gerenciar   o  tamanho  dos  itens  filhos  

• Component  Layout  • Responsável   por   organizar   o   conteúdo   HTML  do  componente  

Page 92: Workshop ExtJS4

Layouts  

Auto  Layout  

• Layout  default  • Burro!  • Usa  HTML  para  dar  tamanho  aos  itens  • Não   renderiza   os   filhoes   de   acordo   com   o  pai  • Você   DEVE   usar   outro   layout   caso   queira  uma   mudança   dinâmica   de   tamanho   dos  filhos  

Page 93: Workshop ExtJS4

Layouts  

Column  Layout  

• Extends  Auto  Layout  • Gerencia  o  width  dos  itens  filhos  • Não  redimensiona  os  filhos  verBcalmente  

Page 94: Workshop ExtJS4

Layouts  

Fit  Layout  

• Extends  Container  Layout  • Redimensiona  o  filho  para  todo  o  Container  

• Não  permite  scrolling  

Page 95: Workshop ExtJS4

Layouts  

Anchor  Layout  

• Extends  Container  Layout  • Redimensiona   dinamicamente   os   filhos  tanto  na  altura  como  na  largura,  basiado  em  suas  regras  • Permite  scrolling  

Page 96: Workshop ExtJS4

Layouts  

Absolute  Layout  

• Extends  Anchor  Layout  • Posiciona   dinamicamente   os   filhos   nas  coordenados  X  e  Y  • NÃO  redimensiona  dinamicamente  os  filhos  

• Permite  scrolling  

Page 97: Workshop ExtJS4

Layouts  

Border  Layout  

• Extends  Container  Layout  • Redimensiona  automaBcamente  os  filhos  

• Organiza  os  filhos  em  regiões  • North,  south,  east,  west,  center  

• As   regiões   podem   ser   redimensionadas   ou  collapsible  

• Região  center  é  obrigatória  

Page 98: Workshop ExtJS4

Layouts  

Box  Layout  

• Extends  Container  Layout  • Classe  base  para  HBox  e  VBox  • HBox  organiza  os  filhos  horizontalmente  • Linha,  lado  a  lado  

• VBox  organiza  os  filhos  verBcalmente  • Pilha  

• Configs  usuais  do  layout:  align,  pack  • Configs  usuais  dos  filhos:  height,  width,  flex  

Page 99: Workshop ExtJS4

Layouts  

Box  Layout  –  align  config  

• HBox  • Top,  middle,  stretch,  stretchmax  

• VBox  • Le�,  center,  strecth,  stretchmax  

Page 100: Workshop ExtJS4

Layouts  

Box  Layout  –  pack  config  

• start,  middle,  end  

Page 101: Workshop ExtJS4

Layouts  

Accordion  Layout  

• Extends  VBoxLayout  • Empilha  os  itens  verBcalmente  

• Permite  que  1   item  seja  expandido  por  vez  e  apenas  1  • Filhos   devem   ser   Panels   ou   herdarem   de  Panel  

Page 102: Workshop ExtJS4

Problemas  comuns  

• this.el  is  undefined  •   store.load()  -­‐>  store.getCount()  • Quando  meu  código  será  executado?  Ajax  -­‐>  callback  • Scope  -­‐>  this  (especificar  escopo)  • Loading  data  

•   Url  está  correta?  •   O  request  foi  completado  com  sucesso?  •   A  informação  é  válida?  Verifique  o  JSON  ou  XML  •   O  modelo  está  condizente  com  o  componente?  

• AJAX  –  ASSÍNCRONO  • Execução  não  pára  • Use  callbacks  

• Layout  • OvernesBng  

• TabPanel  -­‐>  Panel  -­‐>  Grid