Widgets do Web UI Framework

Na visualização Paleta do Designer and Extensibility Workbench, é possível localizar os componentes, como Controles, Grades (somente 3.0.2), Painéis e Outros, associados aos widgets do web UI framework.

As tabelas a seguir descrevem os widgets que estão disponíveis na visualização Paleta do Workbench Designer e Extensibility Workbench.

A maioria dos widgets pode ser usada com o Ext JS 2.2.1 e o Ext JS 3.0.2. Widgets que podem ser usados apenas com uma versão são identificados.

Os itens a seguir não podem ser criados com os widgets:
  • Menus. Trabalha com a classe Ext.menu.Menu do Ext JS.
  • Assistentes. Os Assistentes devem ser definidos usando um arquivo XML.
  • Painéis de repetição com botões de opções. Trabalha com a classe Ext.form.Radio do Ext JS.

Controles

Observação: Para obter informações sobre o widget Coluna, consulte a seção Grades. Esse widget aparece na seção Controles no Ext JS 2.2.1 e na seção Grades no Ext JS 3.0.2.
Controle Descrição
Rótulo Texto que pode identificar outros controles.
Texto Texto para entrada e exibição.
Data Hora Valores de data e hora.
Número Valores de número, até 16 dígitos.
Número grande

Valores de número, mais de 16 dígitos.

O controle Número Grande funciona da mesma forma que o controle Número, exceto que a função getValue() retorna uma sequência.

O controle Número Grande é um controle customizado que não é documentado na documentação online do Ext JS. Ele estende os recursos do controle Texto.

TextArea Diversas linhas de texto.
Campo Fornece manipulação de eventos, dimensionamento, manipulação de valor e outra funcionalidade padrão.
Widget de Upload de Arquivo Usado para acessar arquivos de fontes externas.
Oculto Oculta valores em formulários que precisam ser transmitidos quando enviar um formulário.
Link Conecta-se fora da tela atual (por exemplo, uma URL).
Botão

Quando clicado, faz uma ação.

Nota: o Ext JS 3.0.2 não suporta Toolbar.Button, Toolbar.Splitbuttonou o botão de menu.
Botão de Ciclo Botão que percorre os menus conforme você clica nele. A seta para baixo exibe os itens de cada menu.
Caixa de seleção Única caixa que sinaliza um valor como true ou false.
Rádio Um tipo de caixa de opções que pode ser agrupado com outros controles de opções e permite que apenas um controle em um grupo seja verificado.
TriggerField Um tipo de campo de texto que inclui um botão acionador clicável.
Caixa de Combinação Um tipo de campo de texto que inclui uma lista de valores que podem ser selecionados.
Hora Um campo de entrada de tempo com uma ferramenta suspensa de tempo e validação automática de tempo.
Data Campo de entrada de data com uma ferramenta selecionadora de data e validação de tempo automática.
ProgressBar Mostra o progresso de uma operação.
Régua de controle Suporta orientação vertical ou horizontal, ajustes de teclado, snapping configurável, clique em eixos e animação.
Campo de exibição (somente 3.0.2) Campo de texto somente de exibição que não é validado ou submetido.
Espaçador (somente 3.0.2) Fornece um intervalo ou um espaço em um layout.
Spinner (somente 3.0.2) Um campo de número com setas para cima e para baixo para aumentar ou diminuir o valor em incrementos específicos.

Grades (somente 3.0.2)

Grade/Coluna Descrição
Grade Painel que inclui colunas e linhas do tipo tabela.
EditableGrid Um tipo de grade que permite que edição da célula em colunas selecionadas.
Coluna Coluna normal/padrão para uma grade.
Coluna booleana (somente 3.0.2) Renderiza campos de dados booleanos.
Coluna numérica (somente 3.0.2) Renderiza campos numéricos de acordo com uma sequência de formatações.
Coluna de data (somente 3.0.2) Renderiza os campos de data de acordo com um formato especificado.
Coluna de modelo (somente 3.0.2) Renderiza valores ao processar os dados de um registro usando o XTemplate.

Painéis

Nota: Para obter informações sobre os widgets Grid e EditableGrid , consulte a seção Grids. Esses dois widgets aparecem na seção Painéis no Ext JS 2.2.1 e na seção Grades no Ext JS 3.0.2.
Painel Descrição
Painel
Contêiner que pode incluir:
  • Barras de ferramentas inferiores e superiores
  • Sessões separadas de cabeçalho, rodapé e corpo
  • Comportamento expansível e reduzível integrado
  • Botões de ferramentas pré-construídos que podem ser customizados
Painel Árvore Representação estruturada em árvore de dados organizados hierarquicamente
Conjunto de Campos Campos de formulário de grupo.
TabPanel Agrupa guias que podem responder de maneiras exclusivas ao serem ativadas e desativadas.
Barra de ferramentas (somente 3.0.2) Contêiner que pode incluir praticamente qualquer tipo de componente.

Outros

Use a opção Componente Customizado na seção Outros para incluir, na tela, um componente que tenha sido criado (como outra tela desenvolvida usando o Designer Workbench). A opção Componente Customizado fornece a uma tela acesso a uma segunda tela cujos componentes incluem esta primeira tela (acesso de tela filho-pai). Utilize as propriedades pré-configuradas para especificar esse acesso.