layout usando componentes da ExtJS

ExtJS é uma biblioteca Javascript para criar aplicações ricas para internet (Rich Internet Application). Com ela é possível construir interfaces gráficas com aparência de uma aplicação para desktop. Suas principais características são:

• Alta performance e possibilidade de customizar componentes
• Bem desenhada, documentada e as classes dos componentes são
  extensíveis
• Possui uma versão Open Source
• Pode trabalhar em conjunto com outras bibliotecas como JQuery,
  Mootools, Protoype…
• Fácil de usar
• Integração entre cada um dos seus componentes

Exemplos de Componentes

Grid

Um Grid é uma ótima maneira de apresentar uma listagem de dados. A ExtJS provê avançados recursos para construção de grids, como células editáveis, agrupamento de dados, paginação de resultado, barra de ferramentas, utilização de imagens, ordenação por campo, etc.

Grid simples

Window

É possível criar janelas que podem ser redimensionadas, maximizadas, minimizadas e arrastadas. Também podem ser modais ou não modais. Um janela pode conter outros componentes como grid, tabs, forms, etc.

Window contendo TabPanel

Form

Componente para criação de formulários. Cada campo do form pode conter regras de validação que podem ser customizadas. Por padrão, um Form envia os dados no modo ajax (via POST usando o formato JSON).

Form simples

Tree

Estrutura em forma de árvore semelhante ao Windows Explorer.
Pode usar imagens como ícones e o recurso de arrastar e soltar para movimentar os elementos.

TreePanel padrão

Toolbar e Menu

Barra de ferramentas e menus também podem ser utilizados dentro de outros elementos, como Window e GridPanel.

Toolbar e MenuBar

Conclusão

A idéia desse texto foi apenas despertar a curiosidade sobre essa incrível biblioteca Javascript. Há muito mais recursos e exemplos que não mencionei, mas que podem ser vistos no site do projeto.
Tenho utilizado bastante em projetos de sistemas web em conjunto com o Django e com isso consegui mais agilidade já que não preciso mais me preocupar com assuntos referentes ao design, como cores e tipografia.

Sites relacionados:

• ExtJS
• Exemplos e Demonstrações
• Fórum Brasileiro
• Ext Desenv

Compartilhe esse artigo