Novidades da versão 3.0

O post Upgrading to Ext 3, do fórum americano, faz síntese das alterações da nova versão do Ext. Segue abaixo uma tradução e alguns comentários

Alterado em: 24/06

Modificações e Adições

Ext:
- Novo:
  - Método iterate – itera sobre um array ou objeto invocando a função especificada
  - Método isNumber – Retorna true se o objeto informado for número
  - Método isString – Retorna true se o objeto informado for string
  - Método isBoolean – Retorna true se o objeto informado for booleano
  - Método isDefined – Retorna true se o objeto informado não for undefined
  - Config. enableFx – Habilita ou desabilita globalmente os efeitos do Ext
Ext.lib.Ajax
- Alterado:
  - Resposta Ajax. A classe Ext.lib.Ajax foi alterada para respeitar as novas especificações W3 XMLHttpRequest. O objeto response, que emula um objeto XHR agora tem os métodos getResponseHeader e getAllResponseHeaders. Por serem funções, e não mais arrays eles ficam de acordo com o real objeto XHR. Então qualquer um que esteja examinando os headers usando como array, terá de alterar para usar as funções
Ext.util.Observable
- Novo
  - Ext.util.Observable.observeClass() – Observa eventos em nível de classe. Qualquer instância da classe que disparar o evento especificado, irá disparar o listener da classe.
```
Ext.util.Observable.observeClass(Ext.data.Connection);Ext.data.Connection.on('beforerequest', function(con, options){   console.log("Ajax request made to " + options.url);});
```
Ext.ComponentMgr
- Novo:
  - Método isRegistered – verifica se um xtype já foi registrado
Ext.Component
- Novo:
  - !Os eventos de um componente agora implementam o conceito de “event bubbling”. Um evento disparado em um componente também é disparado no seu pai, e no pai do seu pai, e assim por toda a hierarquia acima.
  - Evento afterrender adicionado
  - Config. ref – Cria uma referência do componente no seu container ou em outro:
```
var myGrid = new Ext.grid.EditorGridPanel({    title: 'My EditorGridPanel'   ,store: myStore   ,colModel: myColModel   ,tbar: [{      text: 'Save'      ,handler: saveChanges      ,disabled: true      ,ref: '../saveButton'   }]   ,listeners: {      afteredit: function() {         //A referêmcia do botão está no GridPanel         myGrid.saveButton.enable();      }   }});
```
  - ptypes – Assim como existem os xtypes para os Componentes, foram criados ptypes para os plugins. O Método para registrar é Ext.preg, similar ao Ext.reg
```
new Ext.Panel({   title:"test"   ,plugins:[{      ptype:"panel-plugin"      //mais config...   }]});
```
  - Método nextSibling() – Referência para o irmão próximo
  - Método previousSibling() – Referência para o irmão anterior
  - Método getDomPositionEl() – Referência ao componente que define posicionamento
Ext.BoxComponent
- Novo:
  - Método getWidth()
  - Método getHeight()
  - Método getOuterSize()
Ext.Container
- Novo:
  - Método get() – Busca um componente pelo ID ou índice.
Ext.Button
- Alterado:
  - !Botão agora é um BoxComponent válido e pode participar da gerência de layouts assim como Panel. Sendo assim a estrutura HTML to botão foi completamente alterada então se alguma rotina realiza alguma consulta/alteração na estrutura de um botão, deverá ser revista. Temas personalizados também devem ser revistos.
  - Por extender de BoxComponent, botões agora podem ser colocados em qualquer lugar, e não somente em toolbars e menus.
  - Botões podem dimensionados com qualquer altura e largura e possuir alinhamento de texto diferenciado
- Novo:
  - Config. scale: ‘small’ – escala do botão
  - Config. iconAlign : ‘left’ – indica aonde fica alinhado o ícone
  - Config. arrowAlign : ‘right’ – indica aonde fica alinhada a seta, quando tiver
Ext.data.Reader
- Novo:
  - Config. idProperty – indica daonde será informado o ID para o registro. depreciado – id
Ext.data.Field
- Novo:
  - Método isValid
  - Config. allowBlank – indica se aceita valores vazios
Ext.data.Store
- Novo:
  - Config. storeId – Id do store para registrar no gerenciado de stores (StoreMgr).depreciado – id
  - Evento exception – depreciado – loadException
  - Novo Store, Ext.data.ArrayStore – depreciado – Ext.data.SimpleStore
  - Config autoDestroy – Quando true destrói o store ao destruir o componente associado a este store. Útil quando temos um grid associado a um store e queremos liberar a memória destruindo o store ao destruir o grid. Deve ser usado com cuidado caso o store seja associado a mais de 1 componente.
  - Método setBaseParam()
- Alterado
  - !baseParams são sobreescrevidos pelos params, quando por exemplo o método load é invocado.
```
var store = new Ext.data.JsonStore({   ...   ,baseParams:{      fnTarget: 'getClientes'   }});

store.load({   params:{      fnTarget: 'getAtendentes' //sobreescreve   }});
```
Ext.Element
- Novo
  - Eventos mouseenter e mouseleave
- Alterado
  - depreciado getAttributeNS() em favor de getAttribute()
  - Método autoHeight() removido
  - Método alignTo() – parâmetro “position” alterado.
  - Método query() – paramêtro “unique” adicionado
  - Método focus() – parâmetro “defer” adicionado
Ext.EventManager
- Alterado
  - Método within() – Agora pode também verificar se o elemento passado é o elemento do evento ou relacioado ao elemento do evento.
Ext.form
- Novo
  - Quando um componente é a
    dicionado a um formulário, todos os campos são procurados e adicionados a coleção de campos do BasicForm. Assim métodos como setValues irão funcionar corretamente em formulários dinâmicos.
  - Novo componente Ext.form.DisplayField.
- Alterado:
  - Ext.form.Radio/Checkbox – Por ter muitos problemas o tema CSS desses componentes foram removidos. Agora são controlados pelo próprio browser. Para uma solução e ver a discussão em torno do assunto visite este link.
Ext.grid.GridPanel
- Novo
  - Config. columnLines (boolean) – adiciona a classe ‘x-grid-with-col-lines’
  - !Nova classe Ext.grid.Column, para especificar as colunas do columnModel. Separando a definição das colunas em uma classe possibilita utilizar xtype para as colunas, diferentes formas de informar um renderer, e outras coisas a mais que podem ser vistas na documentação.
  - Nova classe ListView e ListView.Sorter – Simula um grid porém mais leve, com menos funcionalidades.
  - Novo exemplo Grid BufferedView – Realiza otimizações do grid realizando um buffer da estrutura html, aguardado para renderizar linhas somente quando visíveis.
Ext.layout
- Novo
  - !Novos layouts – hbox e vbox
- Alterado
  - !Gerenciadores de layout agora aguardam componentes escondidos ou contraídos ficarem visíveis para realizar cálculos do layout. Com isso muitos problemas de layout em componentes não visíveis serão corrigidos, evitando que tenhamos que colocar hideMode:’offsets’ para resolver erros.
Ext.Menu
- Novo
  - Menu Overflow – Quando um menu fica tão grande que seus items não ficam mais visíveis, o menu fornece uma interface fácil para o usuário usar scroll nele.
- Alterado
  - !Menu, assim como Toolbar, agora extendem de Container. Sendo assim ele pode se comportar como um menu flutuante, ou você pode “encaixar” um menu como qualquer outro container setando floating:false.
  - !O ID dos itens de menu não são mais locais ao menu, e sim globais. Isso significa que você não poderá ter o mesmo id em itens de menus diferentes. Uma solução é usar ids únicos ou usar o config. option itemId.
Ext.Toolbar
- Novo
  - Toolbar Overflow. Quando os itens do toolbar estouram seus limites, o toolbar implementa uma interface fácil para o usuário visualizar itens escondidos.
- Alterado
  - Toolbar agora extende de Container.
Ext.Tooltip
- Novo
  - Config. delegate – Adiciona o tooltip à todos os items de um determinado elemento. Útil por exemplo quando queremos criar tooltip para linhas de um grid. Adicionamos o tooltip no grid e ajustamos o delegate para as linhas do grid, vide documentação.
  - Tooltips agora suportam “anchor”, vide exemplos.
Ext.util.Format
- Novo
  - ellipsis() – parâmetro “word” adicionado
  - focus() – parâmetro “defer” adicionado
  - number()
  - numberRenderer()
  - plural()
!Classes Removidas
- Ext.StatusBar – será adicionada como extensão Ext.ux.StatusBar.
- Ext.MenuButton – utilize SplitButton ao invés.
- Ext.Menu.DateItem e Ext.Menu.ColorItem – Não existe mais necessidade já que você pode colocar componentes como items de menu.
Novas Classes
- Gráficos (Chart, PieChart, CartesianChart, LineChart, BarChart – numeric, time, category axis)
- Ext.FlashComponent
- !Direct (Direct, Ext.data.DirectStore, Ext.data.DirectProxy) – comunicação direta com o servidor
- Ext.data.DataWriter
- Ext.Spacer – xtype ‘spacer’ (para boxComponent vazios)
- Ext.ButtonGroup (xtype: ‘buttongroup’)
- !Ext.Error – Ajuda no desenvolvimento Ext alertando dos erros de uma forma mais compreensível.

Posts relacionados:

Novidades da versão 3.0

Modificações e Adições

2 Comments

Escreva um comentário

Categorias

Leia um livro

Links interessantes

Sobre o autor

Bruno Tavares

Copyright