tradução do livro learning extjs
TRANSCRIPT
Tradução do Livro Learning EXTJS
The Staples of Ext – Capitulo 2
Neste capítulo, vamos começar a usar e interagir com widgets Ext pela primeira vez, porcriando uma série de diálogos que interagem uns com os outros, o usuário, ea página web.Nós estaremos usando o onReady, MessageBox, e obter as funções para aprender a criardiferentes tipos de diálogos e modificar HTML e estilos em nossa página. Além disso, emNeste capítulo, será:
Descobrir como configurar widgets Ext facilmente Esperando o DOM (Document Object Model) a ser disponibilizado
para a interação Usando diálogos de descobrir o que o usuário quer fazer Alterar dinamicamente o HTML e CSS na nossa página, em resposta ao entradas do
utilizador
Vamos começar cobrindo algumas das funções essenciais da Ext. Vamos dar uma olhada como o exemplo dado no primeiro capítulo trabalhou, e expandi-la. A seguintes funções essenciais da Ext será utilizado em todos os projetos que trabalhamos durante o curso deste livro:
Ext.onReady: Esta função garante que o nosso documento está pronto para serdebatidas
Ext.Msg: Esta função cria caixas de mensagens de aplicativos de estilo para nósobjetos de configuração: Esta função define como widgets Ext atuará
Ext.get: Esta função acessa e manipula os elementos no DOM
Ready, set, go!
Nesta seção, vamos olhar para a coisa onReady evento a primeira vez que você precisa para lidar quando você está trabalhando com Ext. Veremos também como apresentar alguns diferentes tipos de dialog, e como responder a interação dos usuários com esses dialog. Antes de chegarmos a isso, temos de cobrir algumas regras básicas sobre como trabalhar com Ext.
Spacer image
Antes de passarmos adiante, devemos prestar Ext com algo que precisa-a spacer imagem. Ext precisa de um 1 pixel por 1 pixel, transparente, imagem de GIF para esticar aformas diferentes, dando uma largura fixa para seus widgets. Precisamos definir o local daimagem espaçadora usando a seguinte linha:
Ext.onReady(function(){Ext.BLANK_IMAGE_URL = 'images/s.gif';
});
Você provavelmente está se perguntando por que precisamos de uma imagem espaçadora em tudo. A interface do usuário Ext é criado usando CSS, mas as necessidades CSS elementos subjacentes HTML para estilo tão que pode criar a aparência de componentes Ext. O elemento HTML que é um tamanho exato, previsível em todos os navegadores é uma imagem. Assim uma imagem é usada para definir como um componente Ext é desenhado. Esta é uma parte de como Ext mantém a sua cross-browser compatibilidade.
Widget
Ext tem muitos "widgets". Estes incluem componentes como uma caixa de mensagem, grade, janela, e tudo o mais muito bonita, que serve uma interface de usuário em particularfunção. Eu prefiro ver como componentes onReady mais como funções principais, e somentereferem-se a componentes que fornecem uma função determinada interface de usuário como um "widget", como o grade que é usado para apresentar dados tabulares para o usuário.
Time for action - É tempo de agir
Vamos criar uma nova página (ou apenas modificar a página de exemplo, "começar") e adicionar o código para exibir uma caixa de diálogo quando a página está pronto:
Ext.onReady(function(){Ext.BLANK_IMAGE_URL = 'images/s.gif';Ext.Msg.show({
title: 'Milton',msg: 'Have you seen my stapler?',buttons: {
yes: true,no: true,cancel: true
}});
});
Como fizemos no capítulo anterior, nós colocamos o nosso código dentro de um onReady função. Podemos então começar a codificar o nosso diálogo e configurá-lo usando um objeto de configuração. O objeto de configuração usado para este diálogo tem três elementos, o último dos quais é um objeto aninhado para os três botões. Aqui é como o nosso código agora aparece no navegador:
Isso mostra o que parece ser um diálogo muito mínimo, mas se começar a clicar sobrecoisas, a funcionalidade interna da Ext se torna aparente. O diálogo pode ser arrastado ao redor da tela segurando a barra de título, assim como o diálogo em um desktop típico pedido. Há um botão para fechar built-in, e pressionando a tecla Esc quando o diálogo tem foco, ou clicando no botão Cancel irá fechar o diálogo.
What just happened? - O que aconteceu?
Vamos dar uma olhada nas duas funções essenciais Ext acabámos utilizados:
Ext.onReady: Esta função fornece uma maneira de tornar o nosso código de esperar até que o DOM está disponível, antes de fazer qualquer coisa. Isso é necessário porque o JavaScript inicia a execução, logo que for encontrado no documento, em que ponto,nossos elementos DOM poderia não existir.
Ext.Msg.show: Esta é a função central usado para a criação de um diálogo. Écuida de tudo o necessário para ter um diálogo de trabalho. Há algunsatalhos que podem ser usados para tipos de diálogo comum, o que irá ajudá-lopoupar tempo. Nós vamos cobrir esses em apenas um minuto.
Using onReadyÉ hora de examinar o código que acabamos de usar para mostrar o nosso diálogo.
Ext.onReady(function(){Ext.Msg.show({title: 'Milton',msg: 'Have you seen my stapler?',buttons: {
yes: true,no: true,cancel: true}
});});
A função onReady é o que usamos para fazer o nosso código esperar até que o documento seja carregado. O argumento passado para onReady é uma função, que pode ser passado como um nome da função, ou criados em linha, como fizemos no código de exemplo. Este método da criação de uma função in-line é referido como uma função anônima, que é utilizado quando você está pensando em chamar uma função em particular apenas uma vez.Se estivéssemos executando uma função que vai ser usado novamente, então poderíamos definir e chamar assim:
Function stapler(){Ext.Msg.show({
title: 'Milton',msg: 'Have you seen my stapler?',buttons: {
yes: true,no: true,cancel: true
}});
}Ext.onReady(stapler());
Quando começamos a fazer o nosso pedido maior, nós não estamos aptos para fazer uso funções anônimas, e provavelmente vai optar pela criação de funções reutilizáveis.
O registro de teclas também pode especificar o texto a ser exibido no botão.Em vez de passar um valor booleano, basta passar-lhe o texto que você quer, paraexemplo, {yes: 'NomeDoBotao'}.
More widget Wonders - Mais maravilhas widget
Vamos voltar a fazer o nosso pequeno aplicativo tão irritante quanto possível acrescentando uma ícones e botões! Isso pode ser feito adicionando um estilo para o ícone, e modificando o config para ter um registro ícone junto com um registro de botões.
Primeiro, vamos discutir a CSS que precisamos. Adicione o seguinte código para a cabeça do documento, em uma marca de estilo:
.milton-icon {background: url(milton-head-icon.png) no-repeat;
}
Além disso, vamos fazer algumas alterações à configuração do nosso widgets. O registro de ícone apenas as necessidades de nossos nome do estilo como o valor, ícone Milton. Também incluímos um função a ser executada quando um usuário clica em qualquer um dos botões no diálogo. Este função é criada como uma função anônima, e neste caso, é apenas usado para passar variáveis:
Ext.Msg.show({title: 'Milton',msg: 'Have you seen my stapler?',buttons: {
yes: true,no: true,cancel: true
},icon: 'milton-icon',fn: function(btn) {
Ext.Msg.alert('You Clicked', btn);}
});
No nosso caso, a função tem apenas um argumento, que é o nome do botão que foi clicado. Portanto, se o nosso usuário era de clicar no botão Sim, a variável que btn contêm um valor de yes. Usando o código exemplo, nós estamos levando o nome do botão clicado, e passá-lo para alertar, como a mensagem.
A funcionalidade embutida cuida de garantir o botão Cancelar, o botão de fechamento no canto superior direito, ea tecla Esc estão amarrados todos juntos para executar a cancelar a ação. Esta é uma das muitas maneiras pelas quais Ext faz a codificação de aplicações web mais fácil para nós.
Meet JSON and the config object - Conheça JSON e do objeto config
No nosso exemplo, estamos utilizando o que se chama um objeto de configuração, que é o principal maneira de obter Ext para fazer o que quiser. Isto é o que fornece a configuração do diferentes opções que estão disponíveis para a função que está sendo usado.
The old way - A maneira antiga
Nós costumávamos chamar as funções com um pré-determinado conjunto de argumentos. Isso significa que tivemos que lembrar a ordem dos argumentos de cada vez que a função foi utilizada.
var test = new TestFuntion('three','fixed','arguments'
);
Esta velha maneira de usar as funções podem criar muitos problemas:
Ele obriga-nos a lembrar a ordem dos argumentos Ele não descreve os argumentos sobre o que representam Ele oferece menos flexibilidade para lidar com argumentos opcionais
The new way—config objects - A nova forma-config objetos
Usando um objeto de configuração, somos capazes de ter um maior nível de flexibilidade, e posso dizer que nossas variáveis estão em texto simples descritivo. A ordem dos argumentos não mais matérias firstWord, poderia ser o último item, e thirdWord pode ser o primeiro, ou poderiam estar em qualquer ordem aleatória. Com a configuração do objeto, método de passar argumentos para as suas funções, os argumentos já não precisa de ser amarrado a umlugar específico.
var test = new TestFunction({firstWord: 'three',secondWord: 'fixed',thirdWord: 'arguments'
});
Este método também permite a expansão ilimitada de argumentos em nossa função. Usando menos argumentos ou adicionando novos argumentos é simples.
Outro grande resultado que vem usando um objeto de configuração é que o uso prévio das suas funções não serão prejudicados pela adição ou subtração de argumentos em um momento posterior.
var test = new TestFunction({secondWord: 'three'
});var test = new TestFunction({
secondWord: 'three',fourthWord: 'wow'
});
What is a config object? - O que é um objeto de configuração?
Se você estiver familiarizado com CSS ou JSON, você vai perceber que um objeto de configuração semelhante desses, principalmente porque eles são todos iguais. objetos de configuração são apenas formas de estruturação de dados para que possa ser facilmente lido por linguagens de programação em nossa caso, JavaScript.
Por exemplo, vamos dar uma olhada na parte de configuração do nosso código de exemplo:
{title: 'Milton',msg: 'Have you seen my stapler?',buttons: {
yes: true,no: true,cancel: true
},icon: 'milton-icon',fn: function(btn) {
Ext.Msg.alert('You Clicked', btn);}
}
A configuração particular que estamos usando aqui pode parecer complexo à primeira vista, mas uma vez ficamos a conhecer, torna-se uma maneira extremamente rápida de configurar widgets. Apenas sobre cada widget Ext usa um objeto de configuração, então isso é algo que nós vai querer se tornar muito familiar. O objeto de configuração será o nosso novomelhor amigo.
Aqui estão algumas coisas importantes a lembrar quando trabalhar com um objeto de configuração:
colchetes envolver em torno de seu conjunto de registro inteiro, que simboliza aregistros dentro dos colchetes como fazendo parte de um objeto {} registros.
Cada registro é composto de um conjunto de par nome / valor, com o nome eo valor separados por dois pontos, e os pares separados por vírgulas {Name0: value0,nome1: valor1}.
Os valores dos registros podem conter qualquer tipo de dados, incluindo boolean, array, função, ou até mesmo um outro objeto {Name0: true, nome1:{Nome2: valor2}}.
Colchetes identificar uma matriz {nome: ['um', 'dois', 'três']}. Uma matriz também pode conter objetos com os registros, os valores, ou qualquer número deoutras coisas.
A melhor coisa sobre como usar JSON para configurar nossos widgets é que se nós queremos mais opções, basta começar a digitá-los. Presto! Diferentemente de uma chamada de função típica, a ordem de sua opções de configuração se tornou irrelevante, e não pode haver tão poucos ou muitos conforme necessário.
How does JSON work? - Como funciona o JSON?
Às vezes, você vai ouvir as pessoas falar sobre eval, que geralmente se refere a JSON. A função eval é o JavaScript usa para interpretar uma string JSON, convertendo-para os objetos, matrizes e funções que estamos usando.
Time for action - É tempo de agir
Ok! Então agora nós vimos como obter o nosso partido Ext JS começaram e pedir ao usuário uma pergunta. Agora vamos ver o que podemos fazer com as suas respostas. Let's adicionar ao nosso diálogo é função para que possamos decidir o que fazer em resposta a cada botão cliques. A switch pode cuidar de decidir o que fazer em cada caso:
fn: function(btn) {switch(btn){case 'yes':
Ext.Msg.prompt('Milton', 'Where is it?');break;
case 'no':Ext.Msg.alert('Milton','Im going to burn the building down!');break;
case 'cancel':Ext.Msg.wait('Saving tables to disk...','File Copy');break;
}}
Lembre-se aqueles construídos em vários tipos de diálogo que mencionei anteriormente?
Bem, nós apenas usamos alguns dos elas. Eles permitem-nos realizar algumas tarefas comuns sem gastar tempo a escrever a configuração necessária para cada cenário padrão.
Clique em OK e você receberá um aviso. Um alerta é o nome comum para uma pequena janela que permite que você insira um valor único, e é um elemento padrão em quase todos os interface do usuário.
Clique em Não e você receberá um alerta. Tenho certeza que você está familiarizado com o alerta-padrão diálogo em JavaScript. Eu me lembro da primeira vez que usei uma caixa de diálogo de alerta em JavaScript. Eu estava tão animado para ter uma mensagem de alerta na minha home page que eu fiz pop-up e dizer "Clique em OK, se você é um idiota".
Clique no botão Cancelar (ou clique no botão Fechar ou pressione a tecla Escape) e você vai receber uma mensagem de espera que está usando um diálogo de progresso.
O diálogo de progresso que estamos utilizando pode ser controlado por Ext e ser notificado quando ele deve desaparecer. Mas por uma questão de simplicidade, neste exemplo, nós estamos deixando isso Corra para sempre.
ordens Button foco e guia são construídos em Ext. Normalmente, o OK ou Simbotão será a ação padrão. Então pressione Enter em seu teclado acionar esse botão, e pressionar Tab você vai passar através dos botões e outros itens na caixa de diálogo.
Lighting the fire - Acender o fogo
Agora, podemos começar a causar algumas reações em nossa página, com base nas respostas dos usuários aos diálogos. Vamos adicionar ao nosso switch, que cuida deum clique no botão Sim. A função de alerta pode lidar com um terceiro argumento, que é o função a ser executada após o botão 'Sim' foi clicado. Estamos definindo isso paraque a função irá verificar se o valor inserido em nosso diálogo de aviso é igualpara o escritório e depois escrevo este texto para um DIV em nossa página, se ela é, e um texto padrão Dull da Obra, se isso não acontece. O código aplica-se também um estilo ao mesmo DIV, que usa um "Swingline" imagem de fundo grampeador.
case 'yes':Ext.Msg.prompt('Milton', 'Where is it?', function(btn,txt)
{if (txt.toLowerCase() == 'the office') {Ext.get('minhaDiv').dom.innerHTML = 'Dull Work';}else{Ext.get('minhaDiv').dom.innerHTML = txt;
}Ext.DomHelper.applyStyles('my_id',{
background: 'transparenturl(images/stapler.png) 50% 50% no-repeat'
});});
break;
O caso não irá mostrar uma mensagem de alerta, que também os estilos do documento quando o Nenhum botão é clicado.
case 'no':Ext.Msg.alert('Milton', 'Im going to burn the building down!',function() {
Ext.DomHelper.applyStyles('minhaDiv',{'background': 'transparent url(images/fire.png) 0 100% repeat-x'
});Ext.DomHelper.applyStyles(Ext.getBody(),{
'background-color': '#FF0000'});Ext.getBody().highlight('FFCC00',{
endColor:'FF0000',duration: 6
});});break;
The workhorse—Ext.get
Ext é capaz de trabalhar tão bem, porque tem uma fundação que dá acesso aDOM, e muitas funções que permitem a manipulação do DOM. Destes funções, obtém é um dos mais utilizados.
Ext.get(‘minhaDiv’);
Isso nos dá acesso a um elemento no documento com a identificação, my_id. Se tomarmos um olhar para o primeiro exemplo, ele está usando getBody, que recupera o elemento do corpo e se aplica ao nosso efeito. Vamos mudar que volta a usar my_id vez. Mas primeiro, nós Será necessário criar um elemento my_id no nosso documento:
<div id='my_id'style='width:200px;height:200px;'>test</div>
Se somarmos isso à seção do corpo do nosso documento, e mudar o nosso sentido de referência a esse lugar do corpo, então o nosso efeito vai acontecer apenas na my_id div criamos:
Ext.get('my_id').highlight('FF0000',{endColor:'0000FF', duration: 3
});
Se agora olhamos para o nosso documento em um navegador, veríamos uma caixa de 200 pixels quadrados mudando de cor, em vez de todo o corpo de mudar a cor do documento.Tenha em mente que as identificações são únicos. Portanto, uma vez que usamos my_id, não podemos usar esse ID novamente em nosso documento. Se existem identificações duplicadas em seu documento, então o último encontrado será usado. Mas isso deve ser considerado como um bug, e não uma prática do design. Para a maior parte, Ext cria e controla os seus próprios IDs, e na maioria das vezes, nós padrão de rastreamento Ext de os elementos do documento e não criá-los em nosso próprio.
Tendo identificações duplicadas no seu documento pode levar a um comportamento estranho, como um widgets sempre aparece no canto superior esquerdo da browser, e por isso é melhor evitá-los.
Speed tip - Velocidade de ponta
Este não é exatamente uma dica de velocidade, mas é mais sobre a preservação da memória usando algo como um "contrapeso" para executar tarefas simples, o que resulta em maior velocidade por não entupir a memória do navegador. O efeito mesmo destaque que acabamos de usar, pode ser escrito através de um contrapeso em vez disso:
Ext.fly('my_id').highlight('FF0000',{endColor:'0000FF', duration: 3
});
Isso é usado quando queremos executar uma ação em um elemento em uma única linha de código, e não precisamos fazer referência a esse elemento novo. A re-flyweight usa omesma memória mais e mais cada vez que for chamado.
Aqui está um exemplo da utilização de um contrapeso incorretamente:
var my_id = Ext.fly('my_id');
Ext.fly('another_id');my_id.highlight('FF0000',{endColor:'0000FF', duration: 3
});
Como o re-flyweight usa a mesma memória cada vez que ele é chamado, pelo tempoque executa a função de destacar a nossa referência my_id, a memória foi alterado parana verdade, incluir uma referência à another_id.
Summary
Utilizando apenas algumas linhas de código, criamos um programa divertido que irá mantê-lo entreter por horas! Bem, talvez não por horas, mas pelo menos alguns minutos. No entanto, temos o início da funcionalidade básica e interface com o usuáriode uma aplicação desktop típico. Nós aprendemos o básico do uso de objetos de configuração, e tenho certeza que isso vai faz ainda mais sentido depois que tivemos a oportunidade de jogar com um pouco mais Extwidgets. Mas a questão real aqui é que o objeto de configuração é algo que é muito fundamental quando se utiliza Ext. Então, quanto mais rápido você pode esquentar a cabeça com isso, o melhor para você será. Não se preocupe se você não está totalmente confortável com o objeto de configuração ainda. Temos muito tempo para descobrir isso. Por agora, vamos em frente a um dos meus favoritos coisas de forms.
Forms – Capitulo 3
Neste capítulo, vamos aprender a criar forms Ext, que são similares ao HTMLforms que usamos, sem as restrições de usabilidade e interface de usuário chato. Usamos alguns diferentes tipos de campo de formulário para criar um formulário que valida e envia de forma assíncrona. Então vamos criar um banco de dados orientado menu drop-down (ComboBox) e acrescentar algumas validação de campos mais complexos e mascaramento.
Nós então terminar com alguns tópicos avançados que vão dar aos nossos formulários alguns graves 'Wow' fator.
Os objetivos deste capítulo incluem:
Criando um formulário que usa AJAX apresentação Validação de dados de campo e criando validação personalizada Carregando dados de formulário de um banco de dados
The core components of a form - Os principais componentes de um formulário
As possibilidades são infinitas com forms Ext. Principais ouvintes, validação, mensagens de erro e restrições de valor são todas construídas com simples opções de configuração.
Estendendo um formulário opção para suas necessidades específicas pode ser feito facilmente, que é algo que vamos cobrir mais tarde neste capítulo. Aqui estão alguns dos componentes do núcleo que forma você deve familiarizar-se com:
Ext.form.FormPanel: Grupos campos juntos em um painel, assim como o FORMTag faz de um formulário HTML padrão
Ext.form.Field: Como o manipulador primário de criação de campos de formulário einteração, pode ser comparada com a tag INPUT em HTML
Our first form - Nosso primeiro formulário
Para começar, vamos criar um formulário com vários tipos de campo, um selecionador de data, validação, mensagens de erro, e apresentação AJAX apenas um simples para a nossa primeira tentativa. Para este exemplo, os nossos campos será criado usando um objeto de configuração em vez de um Ext.form.Field componente instanciado.
Este método vai funcionar muito bem, terá menos tempo para codificar, e vai ajudar o nosso executar o código mais rápido.
Uma página HTML básica como a usamos no exemplo anterior, será utilizado como ponto de partida. O padrão de Ext. arquivos da biblioteca devem ser incluídos e, como com tudo o que criamos na Ext, o nosso código terá de ser envolvido na função onReady.
Ext.onReady(function(){var movie_form = new Ext.FormPanel({
url: 'movie-form-submit.php',renderTo: document.body,frame: true,title: 'Movie Information Form',width: 250,items: [{
xtype: 'textfield',fieldLabel: 'Title',name: 'title'},{xtype: 'textfield',fieldLabel: 'Director',name: 'director'},{xtype: 'datefield',fieldLabel: 'Released',name: 'released'
}]});
});
Ao executar esse código em um navegador, vamos acabar com um painel de forma que parece como este:
Nice form—how does it work? - Nice forma como ele funciona?
O FormPanel é muito semelhante a um formulário HTML. Ele atua como um recipiente para o nosso campos do formulário.
Nosso formulário tem uma url de configuração para que formam o sabe para onde enviar os dados quando este for apresentado. Ele também tem uma renderTo config, que define onde o formulário é exibidas na página. Os itens de configuração é um elemento importante, pois contém todos os campos do formulário.
Os itens de configuração do elemento é um array de campos. Cada elemento tem um campo que xtype define que tipo de componente Ext serão utilizados: data, texto ou número. Isso pode mesmo ser uma grade ou algum outro tipo de componente Ext.
Form fields - Os campos do formulário
Agora sabemos que cada tipo de campo é definida pela sua xtype. Mas de onde é que xtypes vem, e quantos deles estão lá? Um xtype é apenas uma referência a um Ext componente específica, de modo xtype um 'campo de texto é o mesmo que seu Ext.form.TextField contrapartida.
Aqui estão alguns exemplos de alguns dos xtypes que estão disponíveis para nós:
textfield timefield numberfield datefield combo textarea
Porque estes são todos os componentes apenas Ext, que poderia ser facilmente usando uma grade, barra de ferramentas ou botão de praticamente qualquer coisa! Um tema recorrente em componentes é que Ext tudo é intercambiável, e compartilha tudo as funções do mesmo núcleo.
Este garante que praticamente qualquer cenário pode ser tratado com a biblioteca Ext.Nosso campo de base de configuração é criado assim:
{xtype: 'textfield',
fieldLabel: 'Title',name: 'title'}
É claro, temos o xtype que define o tipo de um campo que é, no nosso caso é umtextfield.
O fieldLabel é o rótulo de texto que é exibido à esquerda do campo, embora este também pode ser configurado para ser exibido no topo ou no lado direito da no campo.
O name da configuração é exatamente o mesmo que suas contrapartes em HTML e será utilizadocomo o nome da variável ao enviar os dados do formulário para o servidor.
Os nomes da maioria das opções de configuração para os componentes Ext jogoseus equivalentes em HTML. Isto porque foi criado por Ext web desenvolvedores, para desenvolvedores web.
Fazendo o nosso campo de data não é muito diferente de fazer o campo de texto. Alterar o xtype a um DateField, e estamos a fazer.
{xtype: 'datefield',fieldLabel: 'Released',name: 'released'}
ValidationAlguns dos campos de nossa amostra poderia ter validações que apresentam
os usuários com erros se o usuário fizer algo errado. Vamos adicionar algumas validações para a nossa primeira forma. Um dos os tipos mais comumente utilizados da validação é verificar se o usuário digitou qualquer valor. Nós vamos usar isso para o nosso campo de título do filme. Em outras palavras, vamos fazer neste domínio um exigidos:
{xtype: 'textfield',fieldLabel: 'Title',name: 'title',allowBlank: false}
Configurando uma opção de configuração allowBlank e defini-lo como false (o padrão é true) é bastante fácil. A maioria das formas que construímos vai ter um monte de campos obrigatórios apenas como este. Cada tipo de campo Ext também tem seu próprio conjunto de validações especializados que são específicos ao tipo de dados desse campo. Por exemplo, um campo de data tem maneiras de desativar determinados dias da semana, ou para usar uma expressão regular para desativar datas específicas. O código a seguir desativa todos os dias excepto sábado e domingo:
{xtype: 'datefield',
fieldLabel: 'Released',name: 'released',disabledDays: [1,2,3,4,5]}
Neste exemplo, todos os dias exceto sábado e domingo está desativado. Mantenha em mente que a semana começa no 0 para domingo, e termina no dia 6 para sábado. Quando usamos outros tipos de campos, temos validações diferentes, como campos de número que podem restringir o tamanho de uma peça ou quantas casas decimais o número pode ter. As opções de validação padrão para cada tipo de campo pode ser encontrada na API de referência.
Built-in validation—vtypes Outro tipo mais complexo de validação é a vtype. Isso pode ser usado para validar e restringir a entrada do usuário e informar mensagens de erro. Ele vai trabalhar em praticamente qualquer cenário que você pode imaginar porque ele usa expressões regulares para fazer o trabalho pesado.Aqui estão alguns built-in vTypes que pode vir a calhar:
email url alpha alphanum
Estes built-in vtypes se destinam a ser simplista e, principalmente, usado como ponto de partida ponto de partida para criar a sua própria vtypes.
Aqui está um vtype alfa sendo usado com uma mensagem de erro balão QuickTips:
Ext.onReady(function(){var movie_form = new Ext.FormPanel({
url: 'movie-form-submit.php',
renderTo: document.body,frame: true,title: 'Movie Information Form',width: 250,items: [{
xtype: 'textfield',fieldLabel: 'Title',name: 'title',allowBlank: false
},{xtype: 'textfield',fieldLabel: 'Director',name: 'director',vtype: 'alpha'
},{xtype: 'datefield',fieldLabel: 'Released',name: 'released',disabledDays: [1,2,3,4,5]
}]});
});
Tudo que fizemos foi adicionar um vtype para o campo diretor. Isso irá validar se o valorinscrita é composta apenas de caracteres alfabéticos.
Agora estamos começando a ver que o built-in vtypes são muito básicas. A built-alfa em vtype restringe nossos campos apenas caracteres do alfabeto. No nosso caso, queremos que o usuário para digitar o nome do diretor, que geralmente contêm apenas caracteres do alfabeto, com apenas um espaço ou um hífen. Aproveitando os primeiros caracteres dos nomes poderia possivelmente torná-los olhar bonito.
Uma pesquisa do fórum Ext é provável que volte com um vtype que alguém tenha criado que seja exatamente o que você precisa, ou fechar suficiente para usar como ponto de partida para suas próprias necessidades.
Styles for displaying errors - Estilos para
mostrar os erros
Os formulários são criados por padrão com uma tela de erro muito agradável que mostra qualquer tipo de erro com uma linha vermelha abaixo do campo de formulário.
Este erro mostrar de perto imita os erros mostrados em programas como o Microsoft Word, quando você digitar uma palavra incorretamente. Temos outras opções para exibir mensagens de erro nosso, mas vamos precisa dizer Ext JS usá-lo. A opção preferencial é para mostrar a mensagem de erro em um balão. Para isso utiliza o
pequena linha padrão, mas também adiciona uma mensagem de balão que aparece quando você ponhe mouse sobre o campo.
Nós só precisamos adicionar uma linha de código antes da nossa form ser criado, que irá iniciar a mensagens de balão. Normalmente esta é a primeira linha dentro da função onReady.Por exemplo:
Ext.onReady(function(){Ext.QuickTips.init();// our form here
});
Isso é tudo o que precisa acontecer para que os campos do formulário para iniciar a exibição de erro mensagens em um balão de fantasia.
Custom validation—create your own vtypevalidação Custom-criar a sua vtype própria
Se você gosta de mim, as expressões regulares podem deixá-lo em um estupefato olhar para a sua monitor, então eu tento sempre encontrar algo que seja próximo ao que eu preciso e, em seguida, modificá-lo, ao invés de começar do zero. Para criar a nossa própria vtype, é preciso adicioná-lo às definições vtype. Cada definição tem um valor, a máscara, o texto de erro, e uma função usada para testes:
xxxVal: Esta é a expressão regular para o jogo contra xxxMask: Este é o mascaramento para restringir a entrada do usuário xxxText: Esta é a mensagem de erro que é exibido
Assim que descobrir as expressões regulares, precisamos usar, ele é bastante direto transmitir a criar o nosso próprio vtype, então vamos tentar um fora. Aqui está uma validação para campo o nosso diretor de nome. A expressão regular corresponde a um par de cadeias alfa, separados por um espaço e, cada uma começando com uma letra maiúscula. Soa como uma boa forma para validar um nome certo?
Ext.form.VTypes['nameVal'] = /^[A-Z][A-Za-z\-]+[A-Z][A-Za-z\-]+$/;Ext.form.VTypes['nameMask'] = /[A-Za-z\- ]/;Ext.form.VTypes['nameText'] = 'In-valid Director Name.';Ext.form.VTypes['name'] = function(v){return Ext.form.VTypes['nameVal'].test(v);
}
É difícil olhar para isto tudo de uma vez, portanto, vamos dividi-la em suas partes principais. Nós primeiro começam com a expressão regular que valida os dados inseridos em nosso campo de formulário:
Ext.form.VTypes['nameVal'] = /^([A-Z]{1})[A-Za-z\-]+([A-Z]{1})[A-Za-z\-]+/;
Em seguida, adicionar a máscara, que define quais caracteres podem ser digitados no formulário de campo. Esta é também a forma de uma expressão regular:
Ext.form.VTypes['nameMask'] = /[A-Za-z]/;
Então, nós temos o texto a ser exibido em um balão, se houver um erro:
Ext.form.VTypes['nameText'] = 'In-valid Director Name.';
E, finalmente, a parte que puxa-lo todos juntos, a função do real usado para testar o nossa valor do campo:
Ext.form.VTypes['name'] = function(v){return Ext.form.VTypes['nameVal'].test(v);
}
Coloque tudo isso junto e temos o nosso vtype personalizado sem muito esforço, eque pode ser usado repetidas vezes.
Masking—don't press that key! – Máscara de imprensa que-não-chave!
Mascaramento é usado quando um determinado campo é forçado a aceitar apenas alguns keystrokes, como apenas números ou apenas letras, ou letras apenas na capital.
As possibilidades são ilimitadas, porque as expressões regulares são usados para decidir quais as chaves para filtrar. Este exemplo de máscara permitiria uma seqüência ilimitada de letras maiúsculas:
maskRe: /[A-Z]/
Em vez de usar a máscara de configuração, considere criar um vtype para realizar o seu mascaramento. Se os requisitos de formatação deve acontecer a mudança, será centralmente localizado para mudança fácil. Então, quando chega o dia em que seu chefe lhe vem enlouquecendo e lhe diz, "Lembre-se os códigos dos produtos que eu disse que seria sempre dez números, bem, Acontece que eles serão oito letras em vez ", você pode fazer a mudança para o seu vtype, e ir jogar Guitar Hero para o resto do dia!
Radio buttons and check boxes
Os botões de rádio e caixas de seleção são um mal necessário. Eles são desajeitados e difíceis de trabalhar com ele. Eu tento usá-las apenas como um último recurso, quando nada mais vai fazer o trabalho. Mas vamos acrescentá-los à nosso form apenas assim nós podemos dizer que fizemos.
It's not a button, it's a radio buttonNão é um botão, é um botão de rádio
Vamos primeiro adicionar um conjunto de botões de rádio para o nosso formulário:
{xtype: 'radio',fieldLabel: 'Filmed In',name: 'filmed_in',boxLabel: 'Color'
},{xtype: 'radio',hideLabel: false,labelSeparator: '',name: 'filmed_in',boxLabel: 'Black & White'
}
Esses botões funcionam como suas contrapartes HTML. Dê-lhes todas as mesmo nome, e eles vão trabalhar juntos para você. Eu também gosto de esconder os rótulos dos arrastando os botões de rádio, definindo a verdadeira e hideLabel labelSeperator a um vazio valor. Isto dá a formar um olhar mais limpo.
X marks the check boxX marca a caixa de seleção:
Sometimes, we need to use check boxes for boolean values—sort of anon/off switch.
{xtype: 'checkbox',fieldLabel: 'Bad Movie',name: 'bad_movie'
}
The ComboBox
O ComboBox ou SELECT como seu conhecido em HTML, também chamado de menu drop-down, é um elemento de forma altamente útil. Isso reduz a necessidade dos usuários para tocar as teclas do seus teclados. O ComboBox Ext tem uma tonelada de usos práticos, e assim como muitos opções de configuração para acompanhar.
Primeiro, vamos fazer um combo com dados locais. Para isso, precisamos criar um armazenamento de dados.
Existem alguns tipos diferentes de armazenamento de dados, cada um dos quais pode ser utilizado para diferentes situações. No entanto, para este, nós estamos indo para usar um armazenamento simples:
var genres = new Ext.data.SimpleStore({fields: ['id', 'genre'],data : [['1','Comedy'],['2','Drama'],['3','Action']]
});
Assim como os outros campos em nosso formulário, adicioná-lo aos itens de configuração. Algumas outras opções de configuração são necessários quando estamos a criar uma caixa de combinação.
A loja é o óbvio, isto é os dados que preenchem as opções para a nossa combinação. Os outros coisas que nós precisamos é o modo, que determina se os dados são provenientes de um local fonte ou uma origem remota, e os displayField, que determina qual coluna de dados é exibido nas opções de combinação:
{xtype: 'combo',name: 'genre',fieldLabel: 'Genre',mode: 'local',store: genres,displayField:'genre',width: 120
}
Isso nos dá uma caixa de combinação que utiliza dados locais, o que é bom para listas pequenas, ou listas que não mudam com freqüência. O que acontece quando a nossa lista tem de ser puxado para cima a partir de um banco de dados?
Database-driven ComboBox
A maior mudança que precisa acontecer é no lado do servidor, ficando os seus dados e formatá-lo em uma string JSON que a caixa de combinação pode usar. Independentemente do lado do servidor linguagem é usada, teremos uma biblioteca JSON "codificar" os dados. Se estamos usando PHP 5.1 ou superior, este é construído dentro.
Isto é o que nós usaríamos para gerar dados de nosso JSON usando o PHP 5.1 ou superior:
<?php// connection to database goes here$result = mysql_query('SELECT id, genre_name FROM genres');If (mysql_num_rows($result) > 0) {
while ($obj = mysql_fetch_object($result)) {$arr[] = $obj;
}}Echo '{rows:'.json_encode($arr).'}';
?>
Quando usamos dados remotos, existem mais algumas coisas que precisam acontecer.
Primeiro, o armazenamento de dados precisa saber qual o formato dos dados está dentro Nós especificar isso usando uma base de dados leitor, no nosso caso, é o leitor de JSON.
var genres = new Ext.data.Store({reader: new Ext.data.JsonReader({
fields: ['id', 'genre_name'],root: 'rows'
}),proxy: new Ext.data.HttpProxy({ url: 'data/genres.php'})
});
O primeiro argumento para o leitor de dados é um objeto que contém a configuração do nosso leitor, especificamente, quais campos serão lidos e que o elemento raiz é.
A lista de campos é simplesmente uma matriz de nomes de domínio; perceber que nós deixamos para fora sort_order-presente campo não estará disponível para o nosso conjunto de dados.
Nossa raiz é o elemento que contém a nossa matriz de dados, neste caso, é as linhas, mas poderia facilmente ser bobs-Crab Shack, ou tudo o que sentia:
{rows:[{
"id":"1","genre_name":"Comedy","sort_order":"0"
},{ "id":"2",
"genre_name":"Drama","sort_order":"1"
},{// snip...//
}]}
Temos também configurar o proxy normalmente este será um proxy HTTP que recupera dados do mesmo domínio que a página web. Este é o método mais comum, mas há também uma ScriptTagProxy que pode ser usado para recuperar dados de um outro domínio. Todos nós precisamos proporcionar aos nossos proxy é a URL para obter os nossos dados de.
Sempre que especificar um 'proxy' estamos realmente usando AJAX. Isto requerque você tem um servidor web rodando, caso contrário, AJAX não irá funcionar.Basta executar o código do sistema de arquivos em um navegador da web nãode trabalho.
Vamos jogar em uma chamada para a função de carga no final, por isso os dados são carregados em nosso caixa de combinação para que o usuário começa a interagir com ele.
genres.load();
Outra forma de pré-carregar os dados da loja é para definir a opção autoLoad a verdade em nossas armazenar dados de configuração:
var genres = new Ext.data.Store({reader: new Ext.data.JsonReader({
fields: ['id', 'genre_name'],root: 'rows'
}),proxy: new Ext.data.HttpProxy({
url: 'data/genres.php'}),autoLoad: true
});
TextArea and HTMLEditor
Estamos indo para adicionar um campo de texto para o nosso formulário de informações do filme, e Ext tem um casal de opções para isso. Podemos usar o textarea padrão que estavam familiarizados com a utilização de HTML, ou podemos usar o campo HTMLEditor, que fornece ricos edição de texto:
textarea: Semelhante a um típico campo textarea HTMLHTMLEditor: Um editor de texto rico, com uma barra de botões para o comumformatação de tarefas
{xtype: 'textarea',name: 'description',hideLabel: true,labelSeparator: '',height: 100,anchor: '100%'
}
Mudando apenas o xtype, como mostrado abaixo, agora temos um HTML bem simpleseditor com opções embutidas para a cara da fonte, tamanho, cor, itálico, negrito, e assim por diante. Esta é o primeiro componente Ext temos usado o componente que requer QuickTips ser inicializados antes que possamos utilizá-lo.
{xtype: 'htmleditor',name: 'description',hideLabel: true,labelSeparator: '',height: 100,anchor: '100%'
}
Listening for form field events- Ouvindo eventos de campo de formulário
Ext torna extremamente simples para ouvir as ações do usuário em particular, como clicar em um elemento ou pressionar uma tecla específica. Uma tarefa comum seria escutar a tecla Enter para ser pressionado, e depoisenviar o formulário. Então vamos ver como isso é feito:
{xtype: 'textfield',fieldLabel: 'Title',name: 'title',allowBlank: false,listeners: {
specialkey: function(form,tecla){if (tecla.getKey() == tecla.ENTER) {
movie_form.getForm().submit();}
}}
}
O ouvinte SpecialKey é chamado sempre que uma chave relacionadas com a navegação é pressionado. Esse ouvinte é também chamado cada vez que as setas forem pressionadas, junto com Tab, Esc, e assim por diante. É por isso que temos que verificar para ver se era a tecla Enter antes de nós agir. Agora, o formulário só será enviado quando você pressionar Enter.
ComboBox events
Parece que as caixas de combinação comumente precisam ter eventos ligados a eles. Vamos levar a nossa caixa de combinação gênero e anexar a ele um ouvinte que será executado quando um item na lista é selecionada. Primeiro vamos adicionar um item fictício com nossos dados como o primeiro item na lista e chamar-lhe
New Genre:var genres = new Ext.data.SimpleStore({fields: ['id', 'genre'],data : [
['0','New Genre'],['1','Comedy'],['2','Drama'],['3','Action']
]});
Em seguida, adicione o ouvinte a nossa combinação:
{xtype: 'combo',name: 'genre',fieldLabel: 'Genre',mode: 'local',store: genres,displayField:'genre',width: 130,listeners: {
select: function(Campoform,registro,index){if (i == 0){
Ext.Msg.prompt('New Genre','Name',Ext.emptyFn);}
}}
}
O ouvinte é configurado para esperar por um evento de seleção e em seguida, executar a função que é especificado. Cada tipo de ouvinte tem seu próprio conjunto de variáveis que é passado para o função destes podem ser consultados na referência da API.Para o evento de escolha, a nossa função é passada três coisas:
O campo de formulário O registro de dados do item selecionado combo O número índice do item que foi clicado
Uma vez que o item da lista está selecionado, podemos ver que item da lista foi selecionado. O terceiro argumento em nossa função de ouvinte é o índice do item que foi clicado. Se isso tem um índice de zero (o primeiro item na lista), então vamos solicitar que o usuário insira um novo gênero com a janela de prompt aprendemos em capítulo anterior.
Praticamente todos os componentes do Ext tem um ouvinte. Uma lista dos eventos válidos para esses ouvintes podem ser encontrados na parte inferior da página de documentação da API para cada componente.
Buttons and form action
Agora, temos uma grande bagunça de um formulário com apenas um problema - não enviar os dados para o servidor, que foi o ponto de real por trás da criação do nosso formulário em primeiro lugar. Para não, isso nós vamos adicionar alguns botões. Nossos botões são adicionados a um objeto de configuração botões, semelhante à maneira que a forma campos foram adicionados. Estes botões realmente só precisa de duas coisas: o texto a ser exibido no botão, ea função (que é chamado de manipulador) para executar quando o botão é clicado.
buttons: [{text: 'Save',handler: function(){
movie_form.getForm().submit({success: function(f,a){
Ext.Msg.alert('Success', 'It worked');},failure: function(f,a){
Ext.Msg.alert('Warning', 'Error');}
});}}, {
text: 'Reset',handler: function(){ movie_form.getForm().reset();}
}}]
O manipulador é dotado de uma função ou uma referência a uma função que iráser executado uma vez que o botão é clicado. Neste caso, estamos fornecendo um função anônima.
Form submission
Nosso FormPanel tem uma opção de url que contém o nome do arquivo que os dados do formulário será enviada. Isto é bastante simples, assim como um formulário HTML, todos os nossos campos serão ser enviadas para este url, para que eles possam ser processados no lado do servidor. Dentro do nosso botão Salvar, temos uma função anônima que executa os seguintes código. Isto irá executar a função de submissão de nosso formulário, que envia o dados para o servidor usando AJAX. Não precisa atualizar a página para enviar o formulário. Tudo acontece em segundo plano, enquanto a página que você está olhando permanece o mesmo:
movie_form.getForm().submit({success: function(f,a){
Ext.Msg.alert('Success', 'It worked');},
failure: function(f,a){Ext.Msg.alert('Warning', 'Error');
}});
Para que o nosso envio de formulário funcione corretamente, ele deve ser executado a partir de um servidor web.
Opções de sucesso e fracasso desde a apresentar identificador de chamada do servidora resposta. Estas são também funções anônimas, mas poderia facilmente ser feitas às funções criadas anteriormente no código. Você notou que as funções têm um par de argumentos passados para eles? Estesserá utilizado para descobrir o que deu a resposta do servidor. Mas primeiro, nós precisamos discutir como fornecer essa resposta no lado do servidor.
Talking back—the server responses - Talking back-as respostas do servidor
Quando o nosso formulário é enviado para o servidor, um script do lado do servidor irá processar o dados de postagem do formulário, e decidir se uma mensagem de verdadeiro ou falso "sucesso" deve ser enviado de volta para o lado do cliente.
As mensagens de erro pode ser enviado de volta junto com a nossa resposta,e estes podem conter mensagens que correspondem aos nossos nomes de campos de formulário. Na utilização de formulários e validação do lado do servidor, um valor booleano sucesso é necessário.Um exemplo de uma resposta do servidor ficaria assim:{
success: false,errors: {
title: "Sounds like a Chick Flick"}
}
Quando a bandeira sucesso é definido como false, ele aciona o formulário Ext ler na mensagens de erro e aplicá-los para a validação do formulário para apresentar ao usuário mensagens de erro.
Do lado do servidor de validação de nossa submissão do formulário dá-nos uma forma de buscar informações no lado do servidor, e os erros de retorno com base nesta. Digamos que temos um banco de dados nomes de filme ruim, e nós não queremos que os usuários enviem-los ao nosso banco de dados. Nós podemosenviar o formulário para o nosso script, que verifica o banco de dados e retorna uma resposta da base de dados de pesquisa de mesmo nome.Se quiséssemos filtrar chick flicks a resposta poderia ser algo como isto:
{success: false,errors: {
title: "Sounds like a Chick Flick"},errormsg: "That movie title sounds like a chick flick."
}
A resposta do sucesso disparos falsos formas as mensagens de erro a ser exibido. Um erros objeto é passado com a resposta. O formulário usa esse objeto para
determinar cada uma das mensagens de erro. Um par nome / valor existe nos erros de objeto para cada erro de campo de formulário. Nossa resposta exemplo, também passa uma errormsg, que não é utilizada pela forma, mas é vai ser acessados separadamente para apresentar a nossa própria mensagem de erro.
Vamos dar a mensagem de erro extra que estávamos passando para trás, e exibi-lo em um caixa de mensagem.
buttons: [{text: 'Save',handler: function(){
movie_form.getForm().submit({success: function(f,a){
Ext.Msg.alert('Success', 'It worked');},failure: function(f,a){
Ext.Msg.alert('Warning', a.result.errormsg);}
});}}, {
text: 'Reset',handler: function(){
movie_form.getForm().reset();
}}]
Nossa ação de envio de formulário passa as informações de volta para o sucesso eo fracasso manipuladores. O primeiro argumento é um objeto de formulário Ext, ea segunda é uma ação Ext objeto. Vamos dar uma olhada no que está disponível no objeto da ação Ext:
Agora que sabemos o que está disponível para o manipulador de falha, nós podemos configurar alguns verificação de erros simples:
failure: function(f,a){if (a.failureType === Ext.form.Action.CONNECT_FAILURE){Ext.Msg.alert('Failure', 'Server reported:
'+a.response.status+' '+a.response.statusText);}if (a.failureType === Ext.form.Action.SERVER_INVALID){Ext.Msg.alert('Warning', a.result.errormsg);}
} Ao verificar o tipo de falha, podemos determinar se houve um erro de conexão com o servidor e agir em conformidade, mesmo fornecendo detalhes sobre a mensagem de erro do servidor específico usando a propriedade resultado.
Loading a form with data
Há três formas básicas em que as formas são utilizadas em uma interface de usuário:
Para entrada de dados para uma pesquisa separada ação, digamos, do Google Para criar novos dados Para alterar os dados existentes
É a última opção que nos interessa no momento. Para isso, precisamos aprender
como carregar os dados da sua nascente (estático ou banco de dados) em nossa interface de usuário.
Static data load
Nós podemos ter os dados de algum lugar no nosso código, e exibi-lo como o valor em um formulário de campo. Esta única linha de código define um valor campos:
movie_form.getForm().findField('title').setValue('Dumb & Dumber');
Assim que começar a trabalhar com formas mais complexas, este método torna-se um aborrecimento. É por isso que também temos a capacidade de carregar os dados através de um pedido de AJAX. O servidor lado seria muito trabalho como aconteceu quando nós carregamos a caixa de combinação:
<?php// connection to database goes here$result = mysql_query('SELECT * FROM movies WHERE id = '.$_REQUEST['id']);If (mysql_num_rows($result) > 0) {$obj = mysql_fetch_object($result);
Echo '{success: true, data:'.json_encode($obj).'}';}else{
Echo '{success: false}';}?>
Isso retorna um objeto JSON que contém uma bandeira de sucesso, e um objeto de dados que seria usado para preencher os valores dos campos do formulário.
Os dados retornados que algo parecido com isto:
{success: true,data:{
"id":"1","title":"Office Space","director":"Mike Judge","released":"1999-02-19","genre":"1","tagline":"Work Sucks","coverthumb":"84m.jpg","price":"19.95","available":"1"
}}
Para acionar esse, nós precisamos usar o manipulador de formulário da carga:
movie_form.getForm().load({url:'data/movie.php',params:{
id: 1}
});
Dando-lhe uma url e parâmetros de configuração irá fazer o truque. O params config representa o que é enviado para o script do lado do servidor como post / get parâmetros. Por padrão, estes são enviados como parâmetros post.
Object reference or component configObjeto de referência ou componente config
Ao longo desses primeiros capítulos, que começaram a usar mais e maisobjetos de configuração para configurar nossos componentes Ext JS, ao invés de instanciar eles. Vamos fazer uma rápida comparação dos dois método
Instantiated
var test = new Ext.form.TextField({fieldLabel: 'Title',name: 'title',allowBlank: false
});
Aqui, o componente foi criado e memória usada imediatamente, mesmo que sejanão aparece na tela ainda. Dependendo de como o trabalho dos usuários finais com a suaaplicação, eles nunca nem precisa nem usar esse campo de texto específico.
No entanto, quando é a hora de mostrar esse campo para os usuários finais, ele mostra-se muito rápido.
Component config{
xtype: 'textfield',fieldLabel: 'Title',name: 'title',allowBlank: false
} Com o componente de configuração, temos uma "descrição" de que tem que acontecer quando ele estiver tempo para usar o campo. Não há memória é usado imediatamente. É somente quando o usuário precisa que a memória é usado. Nesse ponto, o campo é processado depois que o usuário clicou em ou interagiu com outra coisa, o que pode atrasar a exibição inicial ligeiramente. Este método de criação de componentes tem muitas outras vantagens, uma delasé ser capaz de enviar as configurações "sobre o fio. O método de envio configurações "sobre o fio" significa que o código do lado do servidor podem gerar um configuração para criar um componente do lado do cliente.
Summary
Temos tido a fundação da web clássica aplicação de formas e injetadocom o poder da Ext JS, criar um usuário exclusivo flexível e poderoso interface.
O formulário criado neste capítulo pode validar a entrada do usuário, dados de carga de um banco de dados e enviar os dados para o servidor. Dos métodos descritos neste capítulo, podemos ir para criar formulários para uso em pesquisas de texto simples, ou uma complexa dados validados tela de entrada.