Traduo do Livro Learning EXTJS

The Staples of Ext Capitulo 2

Neste captulo, vamos comear a usar e interagir com widgets Ext pela primeira vez, por criando uma srie de dilogos que interagem uns com os outros, o usurio, ea pgina web. Ns estaremos usando o onReady, MessageBox, e obter as funes para aprender a criar diferentes tipos de dilogos e modificar HTML e estilos em nossa pgina. Alm disso, em Neste captulo, ser: Descobrir como configurar widgets Ext facilmente Esperando o DOM (Document Object Model) a ser disponibilizado para a interao Usando dilogos de descobrir o que o usurio quer fazer Alterar dinamicamente o HTML e CSS na nossa pgina, em resposta ao entradas do utilizador

Vamos comear cobrindo algumas das funes essenciais da Ext. Vamos dar uma olhada como o exemplo dado no primeiro captulo trabalhou, e expandi-la. A seguintes funes essenciais da Ext ser utilizado em todos os projetos que trabalhamos durante o curso deste livro:

Ext.onReady: Esta funo garante que o nosso documento est pronto para ser debatidas Ext.Msg: Esta funo cria caixas de mensagens de aplicativos de estilo para ns objetos de configurao: Esta funo define como widgets Ext atuar Ext.get: Esta funo acessa e manipula os elementos no DOM

Ready, set, go!

Nesta seo, vamos olhar para a coisa onReady evento a primeira vez que voc precisa para lidar quando voc est trabalhando com Ext. Veremos tambm como apresentar alguns diferentes tipos de dialog, e como responder a interao dos usurios com esses dialog. Antes de chegarmos a isso, temos de cobrir algumas regras bsicas 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 a formas diferentes, dando uma largura fixa para seus widgets. Precisamos definir o local da imagem espaadora 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 espaadora em tudo. A interface do usurio Ext criado usando CSS, mas as necessidades CSS elementos subjacentes HTML para estilo to que pode criar a aparncia de componentes Ext. O elemento HTML que um tamanho exato, previsvel em todos os navegadores uma imagem. Assim uma imagem usada para definir como um componente Ext desenhado. Esta uma parte de como Ext mantm 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 usurio em particular funo. Eu prefiro ver como componentes onReady mais como funes principais, e somente referem-se a componentes que fornecem uma funo determinada interface de usurio como um "widget", como o grade que usado para apresentar dados tabulares para o usurio.

Time for action - tempo de agir

Vamos criar uma nova pgina (ou apenas modificar a pgina de exemplo, "comear") e adicionar o cdigo para exibir uma caixa de dilogo quando a pgina 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 captulo anterior, ns colocamos o nosso cdigo dentro de um onReady funo. Podemos ento comear a codificar o nosso dilogo e configur-lo usando um objeto de configurao. O objeto de configurao usado para este dilogo tem trs elementos, o ltimo dos quais um objeto aninhado para os trs botes. Aqui como o nosso cdigo agora aparece no navegador:

Isso mostra o que parece ser um dilogo muito mnimo, mas se comear a clicar sobre coisas, a funcionalidade interna da Ext se torna aparente. O dilogo pode ser arrastado ao redor da tela segurando a barra de ttulo, assim como o dilogo em um desktop tpico pedido. H um boto para fechar built-in, e pressionando a tecla Esc quando o dilogo tem foco, ou clicando no boto Cancel ir fechar o dilogo.

What just happened? - O que aconteceu?

Vamos dar uma olhada nas duas funes essenciais Ext acabmos utilizados:

Ext.onReady: Esta funo fornece uma maneira de tornar o nosso cdigo de esperar at que o DOM est disponvel, antes de fazer qualquer coisa. Isso necessrio porque o JavaScript inicia a execuo, logo que for encontrado no documento, em que ponto, nossos elementos DOM poderia no existir. Ext.Msg.show: Esta a funo central usado para a criao de um dilogo. cuida de tudo o necessrio para ter um dilogo de trabalho. H alguns atalhos que podem ser usados para tipos de dilogo comum, o que ir ajud-lo poupar tempo. Ns vamos cobrir esses em apenas um minuto.

Using onReady
hora de examinar o cdigo que acabamos de usar para mostrar o nosso dilogo.
Ext.onReady(function(){ Ext.Msg.show({ title: 'Milton', msg: 'Have you seen my stapler?', buttons: { yes: true, no: true, cancel: true } }); });

A funo onReady o que usamos para fazer o nosso cdigo esperar at que o documento seja carregado. O argumento passado para onReady uma funo, que pode ser passado como um nome da funo, ou criados em linha, como fizemos no cdigo de exemplo. Este mtodo da criao de uma funo in-line referido como uma funo annima, que utilizado quando voc est pensando em chamar uma funo em particular apenas uma vez. Se estivssemos executando uma funo que vai ser usado novamente, ento poderamos 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 comeamos a fazer o nosso pedido maior, ns no estamos aptos para fazer uso funes annimas, e provavelmente vai optar pela criao de funes reutilizveis.
O registro de teclas tambm pode especificar o texto a ser exibido no boto. Em vez de passar um valor booleano, basta passar-lhe o texto que voc quer, para exemplo, {yes: 'NomeDoBotao'}.

More widget Wonders - Mais maravilhas widget

Vamos voltar a fazer o nosso pequeno aplicativo to irritante quanto possvel acrescentando uma cones e botes! Isso pode ser feito adicionando um estilo para o cone, e modificando o config para ter um registro cone junto com um registro de botes.
Primeiro, vamos discutir a CSS que precisamos. Adicione o seguinte cdigo para a cabea do documento, em uma marca de estilo:
.milton-icon { background: url(milton-head-icon.png) no-repeat; }

Alm disso, vamos fazer algumas alteraes configurao do nosso widgets. O registro de cone apenas as necessidades de nossos nome do estilo como o valor, cone Milton. Tambm inclumos um funo a ser executada quando um usurio clica em qualquer um dos botes no dilogo. Este funo criada como uma funo annima, e neste caso, apenas usado para passar variveis:
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 funo tem apenas um argumento, que o nome do boto que foi clicado. Portanto, se o nosso usurio era de clicar no boto Sim, a varivel que btn contm um valor de yes. Usando o cdigo exemplo, ns estamos levando o nome do boto clicado, e pass-lo para alertar, como a mensagem.

A funcionalidade embutida cuida de garantir o boto Cancelar, o boto de fechamento no canto superior direito, ea tecla Esc esto amarrados todos juntos para executar a cancelar a ao. Esta uma das muitas maneiras pelas quais Ext faz a codificao de aplicaes web mais fcil para ns.

Meet JSON and the config object Conhea JSON e do objeto config
No nosso exemplo, estamos utilizando o que se chama um objeto de configurao, que o principal maneira de obter Ext para fazer o que quiser. Isto o que fornece a configurao do diferentes opes que esto disponveis para a funo que est sendo usado.

The old way - A maneira antiga

Ns costumvamos chamar as funes com um pr-determinado conjunto de argumentos. Isso significa que tivemos que lembrar a ordem dos argumentos de cada vez que a funo foi utilizada.
var test = new TestFuntion( 'three', 'fixed', 'arguments' );

Esta velha maneira de usar as funes podem criar muitos problemas: Ele obriga-nos a lembrar a ordem dos argumentos Ele no descreve os argumentos sobre o que representam Ele oferece menos flexibilidade para lidar com argumentos opcionais

The new wayconfig objects - A nova formaconfig objetos

Usando um objeto de configurao, somos capazes de ter um maior nvel de flexibilidade, e posso dizer que nossas variveis esto em texto simples descritivo. A ordem dos argumentos no mais matrias firstWord, poderia ser o ltimo item, e thirdWord pode ser o primeiro, ou poderiam estar em qualquer ordem aleatria. Com a configurao do objeto, mtodo de passar argumentos para as suas funes, os argumentos j no precisa de ser amarrado a umlugar especfico.
var test = new TestFunction({ firstWord: 'three', secondWord: 'fixed', thirdWord: 'arguments' });

Este mtodo tambm permite a expanso ilimitada de argumentos em nossa funo. Usando menos argumentos ou adicionando novos argumentos simples.

Outro grande resultado que vem usando um objeto de configurao que o uso prvio das suas funes no sero prejudicados pela adio ou subtrao 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 configurao?

Se voc estiver familiarizado com CSS ou JSON, voc vai perceber que um objeto de configurao semelhante desses, principalmente porque eles so todos iguais. objetos de configurao so apenas formas de estruturao de dados para que possa ser facilmente lido por linguagens de programao em nossa caso, JavaScript. Por exemplo, vamos dar uma olhada na parte de configurao do nosso cdigo 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 configurao particular que estamos usando aqui pode parecer complexo primeira vista, mas uma vez ficamos a conhecer, torna-se uma maneira extremamente rpida de configurar widgets. Apenas sobre cada widget Ext usa um objeto de configurao, ento isso algo que ns vai querer se tornar muito familiar. O objeto de configurao ser o nosso novo melhor amigo. Aqui esto algumas coisas importantes a lembrar quando trabalhar com um objeto de configurao:

colchetes envolver em torno de seu conjunto de registro inteiro, que simboliza a registros 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 vrgulas {Name0: value0,nome1: valor1}. Os valores dos registros podem conter qualquer tipo de dados, incluindo boolean, array, funo, ou at mesmo um outro objeto {Name0: true, nome1: {Nome2: valor2}}. Colchetes identificar uma matriz {nome: ['um', 'dois', 'trs']}. Uma matriz tambm pode conter objetos com os registros, os valores, ou qualquer nmero de outras coisas.

A melhor coisa sobre como usar JSON para configurar nossos widgets que se ns queremos mais opes, basta comear a digit-los. Presto! Diferentemente de uma chamada de funo tpica, a ordem de sua opes de configurao se tornou irrelevante, e no pode haver to poucos ou muitos conforme necessrio.

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 funo eval o JavaScript usa para interpretar uma string JSON, convertendopara os objetos, matrizes e funes que estamos usando.

Time for action - tempo de agir

Ok! Ento agora ns vimos como obter o nosso partido Ext JS comearam e pedir ao usurio uma pergunta. Agora vamos ver o que podemos fazer com as suas respostas. Let's adicionar ao nosso dilogo funo para que possamos decidir o que fazer em resposta a cada boto 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 construdos em vrios tipos de dilogo que mencionei anteriormente? Bem, ns apenas usamos alguns dos elas. Eles permitem-nos realizar algumas tarefas comuns sem gastar tempo a escrever a configurao necessria para cada cenrio padro.
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 padro em quase todos os interface do usurio.

Clique em No e voc receber um alerta. Tenho certeza que voc est familiarizado com o alerta-padro dilogo em JavaScript. Eu me lembro da primeira vez que usei uma caixa de dilogo de alerta em JavaScript. Eu estava to 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 boto Cancelar (ou clique no boto Fechar ou pressione a tecla Escape) e voc vai receber uma mensagem de espera que est usando um dilogo de progresso.

O dilogo de progresso que estamos utilizando pode ser controlado por Ext e ser notificado quando ele deve desaparecer. Mas por uma questo de simplicidade, neste exemplo, ns estamos deixando isso Corra para sempre.

ordens Button foco e guia so construdos em Ext. Normalmente, o OK ou Sim boto ser a ao padro. Ento pressione Enter em seu teclado acionar esse boto, e pressionar Tab voc vai passar atravs dos botes e outros itens na caixa de dilogo.

Lighting the fire - Acender o fogo

Agora, podemos comear a causar algumas reaes em nossa pgina, com base nas respostas dos usurios aos dilogos. Vamos adicionar ao nosso switch, que cuida de um clique no boto Sim. A funo de alerta pode lidar com um terceiro argumento, que o funo a ser executada aps o boto 'Sim' foi clicado. Estamos definindo isso para que a funo ir verificar se o valor inserido em nosso dilogo de aviso igual para o escritrio e depois escrevo este texto para um DIV em nossa pgina, se ela , e um texto padro Dull da Obra, se isso no acontece. O cdigo aplica-se tambm 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: 'transparent url(images/stapler.png) 50% 50% no-repeat' }); }); break;

O caso no ir mostrar uma mensagem de alerta, que tambm os estilos do documento quando o Nenhum boto 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 workhorseExt.get

Ext capaz de trabalhar to bem, porque tem uma fundao que d acesso a DOM, e muitas funes que permitem a manipulao do DOM. Destes funes, obtm um dos mais utilizados.
Ext.get(minhaDiv);

Isso nos d acesso a um elemento no documento com a identificao, 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, ns Ser necessrio criar um elemento my_id no nosso documento:
<div id='my_id' style='width:200px;height:200px;'>test</div>

Se somarmos isso seo do corpo do nosso documento, e mudar o nosso sentido de referncia a esse lugar do corpo, ento 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, veramos 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 identificaes so nicos. Portanto, uma vez que usamos my_id, no podemos usar esse ID novamente em nosso documento. Se existem identificaes duplicadas em seu documento, ento o ltimo encontrado ser usado. Mas isso deve ser considerado como um bug, e no uma prtica do design. Para a maior parte, Ext cria e controla os seus prprios IDs, e na maioria das vezes, ns padro de rastreamento Ext de os elementos do documento e no cri-los em nosso prprio. Tendo identificaes 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 no exatamente uma dica de velocidade, mas mais sobre a preservao da memria usando algo como um "contrapeso" para executar tarefas simples, o que resulta em maior velocidade por no entupir a memria do navegador. O efeito mesmo destaque que acabamos de usar, pode ser escrito atravs de um contrapeso em vez disso:
Ext.fly('my_id').highlight('FF0000',{ endColor:'0000FF', duration: 3 });

Isso usado quando queremos executar uma ao em um elemento em uma nica linha de cdigo, e no precisamos fazer referncia a esse elemento novo. A re-flyweight usa o mesma memria mais e mais cada vez que for chamado.

Aqui est um exemplo da utilizao 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 memria cada vez que ele chamado, pelo tempo que executa a funo de destacar a nossa referncia my_id, a memria foi alterado para na verdade, incluir uma referncia another_id.

Summary
Utilizando apenas algumas linhas de cdigo, criamos um programa divertido que ir mant-lo entreter por horas! Bem, talvez no por horas, mas pelo menos alguns minutos. No entanto, temos o incio da funcionalidade bsica e interface com o usurio de uma aplicao desktop tpico. Ns aprendemos o bsico do uso de objetos de configurao, e tenho certeza que isso vai faz ainda mais sentido depois que tivemos a oportunidade de jogar com um pouco mais Ext widgets. Mas a questo real aqui que o objeto de configurao algo que muito fundamental quando se utiliza Ext. Ento, quanto mais rpido voc pode esquentar a cabea com isso, o melhor para voc ser. No se preocupe se voc no est totalmente confortvel com o objeto de configurao ainda. Temos muito tempo para descobrir isso. Por agora, vamos em frente a um dos meus favoritos coisas de forms.

Forms Capitulo 3
Neste captulo, vamos aprender a criar forms Ext, que so similares ao HTML forms que usamos, sem as restries de usabilidade e interface de usurio chato. Usamos alguns diferentes tipos de campo de formulrio para criar um formulrio que valida e envia de forma assncrona. Ento vamos criar um banco de dados orientado menu drop-down (ComboBox) e acrescentar algumas validao de campos mais complexos e mascaramento. Ns ento terminar com alguns tpicos avanados que vo dar aos nossos formulrios alguns graves 'Wow' fator. Os objetivos deste captulo incluem:

Criando um formulrio que usa AJAX apresentao Validao de dados de campo e criando validao personalizada Carregando dados de formulrio de um banco de dados

The core components of a form - Os principais

componentes de um formulrio

As possibilidades so infinitas com forms Ext. Principais ouvintes, validao, mensagens de erro e restries de valor so todas construdas com simples opes de configurao. Estendendo um formulrio opo para suas necessidades especficas pode ser feito facilmente, que algo que vamos cobrir mais tarde neste captulo. Aqui esto alguns dos componentes do ncleo que forma voc deve familiarizar-se com:

Ext.form.FormPanel: Grupos campos juntos em um painel, assim como o FORM Tag faz de um formulrio HTML padro Ext.form.Field: Como o manipulador primrio de criao de campos de formulrio e interao, pode ser comparada com a tag INPUT em HTML

Our first form - Nosso primeiro formulrio

Para comear, vamos criar um formulrio com vrios tipos de campo, um selecionador de data, validao, mensagens de erro, e apresentao AJAX apenas um simples para a nossa primeira tentativa. Para este exemplo, os nossos campos ser criado usando um objeto de configurao em vez de um Ext.form.Field componente instanciado. Este mtodo vai funcionar muito bem, ter menos tempo para codificar, e vai ajudar o nosso executar o cdigo mais rpido. Uma pgina HTML bsica como a usamos no exemplo anterior, ser utilizado como ponto de partida. O padro de Ext. arquivos da biblioteca devem ser includos e, como com tudo o que criamos na Ext, o nosso cdigo ter de ser envolvido na funo 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 cdigo em um navegador, vamos acabar com um painel de forma que parece como este:

Nice formhow does it work? - Nice forma como ele

funciona? O FormPanel muito semelhante a um formulrio HTML. Ele atua como um recipiente para o nosso campos do formulrio. Nosso formulrio tem uma url de configurao para que formam o sabe para onde enviar os dados quando este for apresentado. Ele tambm tem uma renderTo config, que define onde o formulrio exibidas na pgina. Os itens de configurao um elemento importante, pois contm todos os campos do formulrio. Os itens de configurao do elemento um array de campos. Cada elemento tem um campo que xtype define que tipo de componente Ext sero utilizados: data, texto ou nmero. Isso pode mesmo ser uma grade ou algum outro tipo de componente Ext.

Form fields - Os campos do formulrio

Agora sabemos que cada tipo de campo definida pela sua xtype. Mas de onde que xtypes vem, e quantos deles esto l? Um xtype apenas uma referncia a um Ext componente especfica, de modo xtype um 'campo de texto o mesmo que seu Ext.form.TextField contrapartida. Aqui esto alguns exemplos de alguns dos xtypes que esto disponveis para ns:
textfield timefield numberfield datefield combo textarea

Porque estes so todos os componentes apenas Ext, que poderia ser facilmente usando uma grade, barra de ferramentas ou boto de praticamente qualquer coisa! Um tema recorrente em componentes que Ext tudo intercambivel, e compartilha tudo as funes do mesmo ncleo.

Este garante que praticamente qualquer cenrio pode ser tratado com a biblioteca Ext. Nosso campo de base de configurao criado assim:
{

xtype: 'textfield', fieldLabel: 'Title', name: 'title' }

claro, temos o xtype que define o tipo de um campo que , no nosso caso um textfield. O fieldLabel o rtulo de texto que exibido esquerda do campo, embora este tambm pode ser configurado para ser exibido no topo ou no lado direito da no campo. O name da configurao exatamente o mesmo que suas contrapartes em HTML e ser utilizado como o nome da varivel ao enviar os dados do formulrio para o servidor.
Os nomes da maioria das opes de configurao para os componentes Ext jogo seus equivalentes em HTML. Isto porque foi criado por Ext web desenvolvedores, para desenvolvedores web.

Fazendo o nosso campo de data no muito diferente de fazer o campo de texto. Alterar o xtype a um DateField, e estamos a fazer.
{ xtype: 'datefield', fieldLabel: 'Released', name: 'released' }

Validation
Alguns dos campos de nossa amostra poderia ter validaes que apresentam os usurios com erros se o usurio fizer algo errado. Vamos adicionar algumas validaes para a nossa primeira forma. Um dos os tipos mais comumente utilizados da validao verificar se o usurio digitou qualquer valor. Ns vamos usar isso para o nosso campo de ttulo do filme. Em outras palavras, vamos fazer neste domnio um exigidos:
{ xtype: 'textfield', fieldLabel: 'Title', name: 'title', allowBlank: false }

Configurando uma opo de configurao allowBlank e defini-lo como false (o padro true) bastante fcil. A maioria das formas que construmos vai ter um monte de campos obrigatrios apenas como este. Cada tipo de campo Ext tambm tem seu prprio conjunto de validaes especializados que so especficos ao tipo de dados desse campo. Por exemplo, um campo de data tem maneiras de desativar determinados dias da semana, ou para usar uma expresso regular para desativar datas especficas. O cdigo a seguir desativa todos os dias excepto sbado e domingo:
{ xtype: 'datefield',

fieldLabel: 'Released', name: 'released', disabledDays: [1,2,3,4,5] }

Neste exemplo, todos os dias exceto sbado e domingo est desativado. Mantenha em mente que a semana comea no 0 para domingo, e termina no dia 6 para sbado. Quando usamos outros tipos de campos, temos validaes diferentes, como campos de nmero que podem restringir o tamanho de uma pea ou quantas casas decimais o nmero pode ter. As opes de validao padro para cada tipo de campo pode ser encontrada na API de referncia.

Built-in validationvtypes
Outro tipo mais complexo de validao a vtype. Isso pode ser usado para validar e restringir a entrada do usurio e informar mensagens de erro. Ele vai trabalhar em praticamente qualquer cenrio que voc pode imaginar porque ele usa expresses regulares para fazer o trabalho pesado. Aqui esto 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 prpria vtypes. Aqui est um vtype alfa sendo usado com uma mensagem de erro balo 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 valor inscrita composta apenas de caracteres alfabticos.

Agora estamos comeando a ver que o built-in vtypes so muito bsicas. A builtalfa em vtype restringe nossos campos apenas caracteres do alfabeto. No nosso caso, queremos que o usurio para digitar o nome do diretor, que geralmente contm apenas caracteres do alfabeto, com apenas um espao ou um hfen. Aproveitando os primeiros caracteres dos nomes poderia possivelmente torn-los olhar bonito.
Uma pesquisa do frum Ext provvel que volte com um vtype que algum tenha criado que seja exatamente o que voc precisa, ou fechar suficiente para usar como ponto de partida para suas prprias necessidades.

Styles for displaying errors - Estilos para mostrar os

erros Os formulrios so criados por padro com uma tela de erro muito agradvel que mostra qualquer tipo de erro com uma linha vermelha abaixo do campo de formulrio. Este erro mostrar de perto imita os erros mostrados em programas como o Microsoft Word, quando voc digitar uma palavra incorretamente. Temos outras opes para exibir mensagens de erro nosso, mas vamos precisa dizer Ext JS us-lo. A opo preferencial para mostrar a mensagem de erro em um balo. Para isso utiliza o

pequena linha padro, mas tambm adiciona uma mensagem de balo que aparece quando voc ponhe mouse sobre o campo.

Ns s precisamos adicionar uma linha de cdigo antes da nossa form ser criado, que ir iniciar a mensagens de balo. Normalmente esta a primeira linha dentro da funo onReady. Por exemplo:
Ext.onReady(function(){ Ext.QuickTips.init(); // our form here });

Isso tudo o que precisa acontecer para que os campos do formulrio para iniciar a exibio de erro mensagens em um balo de fantasia.

Custom validationcreate your own vtype

validao Custom-criar a sua vtype prpria Se voc gosta de mim, as expresses regulares podem deix-lo em um estupefato olhar para a sua monitor, ento eu tento sempre encontrar algo que seja prximo ao que eu preciso e, em seguida, modific-lo, ao invs de comear do zero. Para criar a nossa prpria vtype, preciso adicion-lo s definies vtype. Cada definio tem um valor, a mscara, o texto de erro, e uma funo usada para testes: xxxVal: Esta a expresso regular para o jogo contra xxxMask: Este o mascaramento para restringir a entrada do usurio xxxText: Esta a mensagem de erro que exibido

Assim que descobrir as expresses regulares, precisamos usar, ele bastante direto transmitir a criar o nosso prprio vtype, ento vamos tentar um fora. Aqui est uma validao para campo o nosso diretor de nome. A expresso regular corresponde a um par de cadeias alfa, separados por um espao e, cada uma comeando com uma letra maiscula. 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); }

difcil olhar para isto tudo de uma vez, portanto, vamos dividi-la em suas partes principais. Ns primeiro comeam com a expresso regular que valida os dados inseridos em nosso campo de formulrio:
Ext.form.VTypes['nameVal'] = /^([A-Z]{1})[A-Za-z\-]+([A-Z]{1})[A-Za-z\-]+/;

Em seguida, adicionar a mscara, que define quais caracteres podem ser digitados no formulrio de campo. Esta tambm a forma de uma expresso regular:
Ext.form.VTypes['nameMask'] = /[A-Za-z]/;

Ento, ns temos o texto a ser exibido em um balo, se houver um erro:

Ext.form.VTypes['nameText'] = 'In-valid Director Name.';

E, finalmente, a parte que puxa-lo todos juntos, a funo 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 esforo, e que pode ser usado repetidas vezes.

Maskingdon't press that key!

Mscara de imprensa que-no-chave!

Mascaramento usado quando um determinado campo forado a aceitar apenas alguns keystrokes, como apenas nmeros ou apenas letras, ou letras apenas na capital. As possibilidades so ilimitadas, porque as expresses regulares so usados para decidir quais as chaves para filtrar. Este exemplo de mscara permitiria uma seqncia ilimitada de letras maisculas:
maskRe: /[A-Z]/

Em vez de usar a mscara de configurao, considere criar um vtype para realizar o seu mascaramento. Se os requisitos de formatao deve acontecer a mudana, ser centralmente localizado para mudana fcil. Ento, quando chega o dia em que seu chefe lhe vem enlouquecendo e lhe diz, "Lembre-se os cdigos dos produtos que eu disse que seria sempre dez nmeros, bem, Acontece que eles sero oito letras em vez ", voc pode fazer a mudana para o seu vtype, e ir jogar Guitar Hero para o resto do dia!

Radio buttons and check boxes

Os botes de rdio e caixas de seleo so um mal necessrio. Eles so desajeitados e difceis 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 ns podemos dizer que fizemos.

It's not a button, it's a radio button

No um boto, um boto de rdio Vamos primeiro adicionar um conjunto de botes de rdio para o nosso formulrio:
{ xtype: 'radio', fieldLabel: 'Filmed In', name: 'filmed_in', boxLabel: 'Color' },{ xtype: 'radio', hideLabel: false, labelSeparator: '', name: 'filmed_in', boxLabel: 'Black & White' }

Esses botes funcionam como suas contrapartes HTML. D-lhes todas as mesmo nome, e eles vo trabalhar juntos para voc. Eu tambm gosto de esconder os rtulos dos arrastando os botes de rdio, definindo a verdadeira e hideLabel labelSeperator a um vazio valor. Isto d a formar um olhar mais limpo.

X marks the check box

X marca a caixa de seleo:
Sometimes, we need to use check boxes for boolean valuessort of an on/off switch.
{ xtype: 'checkbox', fieldLabel: 'Bad Movie', name: 'bad_movie' }

The ComboBox
O ComboBox ou SELECT como seu conhecido em HTML, tambm chamado de menu drop-down, um elemento de forma altamente til. Isso reduz a necessidade dos usurios para tocar as teclas do seus teclados. O ComboBox Ext tem uma tonelada de usos prticos, e assim como muitos opes de configurao 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 situaes. No entanto, para este, ns 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 formulrio, adicion-lo aos itens de configurao. Algumas outras opes de configurao so necessrios quando estamos a criar uma caixa de combinao. A loja o bvio, isto os dados que preenchem as opes para a nossa combinao. Os outros coisas que ns precisamos o modo, que determina se os dados so provenientes de um local fonte ou uma origem remota, e os displayField, que determina qual coluna de dados exibido nas opes de combinao:

{ xtype: 'combo', name: 'genre', fieldLabel: 'Genre', mode: 'local', store: genres, displayField:'genre', width: 120 }

Isso nos d uma caixa de combinao que utiliza dados locais, o que bom para listas pequenas, ou listas que no mudam com freqncia. 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 mudana que precisa acontecer no lado do servidor, ficando os seus dados e format-lo em uma string JSON que a caixa de combinao 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 construdo dentro. Isto o que ns usaramos 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 Ns 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 contm a configurao do nosso leitor, especificamente, quais campos sero lidos e que o elemento raiz . A lista de campos simplesmente uma matriz de nomes de domnio; perceber que ns deixamos para fora sort_order-presente campo no estar disponvel para o nosso conjunto de dados.

Nossa raiz o elemento que contm 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 tambm configurar o proxy normalmente este ser um proxy HTTP que recupera dados do mesmo domnio que a pgina web. Este o mtodo mais comum, mas h tambm uma ScriptTagProxy que pode ser usado para recuperar dados de um outro domnio. Todos ns precisamos proporcionar aos nossos proxy a URL para obter os nossos dados de. Sempre que especificar um 'proxy' estamos realmente usando AJAX. Isto requer que voc tem um servidor web rodando, caso contrrio, AJAX no ir funcionar. Basta executar o cdigo do sistema de arquivos em um navegador da web no de trabalho. Vamos jogar em uma chamada para a funo de carga no final, por isso os dados so carregados em nosso caixa de combinao para que o usurio comea a interagir com ele.
genres.load();

Outra forma de pr-carregar os dados da loja para definir a opo autoLoad a verdade em nossas armazenar dados de configurao:
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 formulrio de informaes do filme, e Ext tem um casal de opes para isso. Podemos usar o textarea padro que estavam familiarizados com a utilizao de HTML, ou podemos usar o campo HTMLEditor, que fornece ricos edio de texto:

textarea: Semelhante a um tpico campo textarea HTML HTMLEditor: Um editor de texto rico, com uma barra de botes para o comum formatao 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 simples editor com opes embutidas para a cara da fonte, tamanho, cor, itlico, 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 eventsde campo de formulrio

Ouvindo eventos

Ext torna extremamente simples para ouvir as aes do usurio em particular, como clicar em um elemento ou pressionar uma tecla especfica. Uma tarefa comum seria escutar a tecla Enter para ser pressionado, e depois enviar o formulrio. Ento 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 navegao pressionado. Esse ouvinte tambm 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 ns agir. Agora, o formulrio s ser enviado quando voc pressionar Enter.

ComboBox events
Parece que as caixas de combinao comumente precisam ter eventos ligados a eles. Vamos levar a nossa caixa de combinao gnero e anexar a ele um ouvinte que ser executado quando um item na lista selecionada. Primeiro vamos adicionar um item fictcio 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 combinao:

{ 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 seleo e em seguida, executar a funo que especificado. Cada tipo de ouvinte tem seu prprio conjunto de variveis que passado para o funo destes podem ser consultados na referncia da API. Para o evento de escolha, a nossa funo passada trs coisas: O campo de formulrio O registro de dados do item selecionado combo O nmero 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 funo de ouvinte o ndice do item que foi clicado. Se isso tem um ndice de zero (o primeiro item na lista), ento vamos solicitar que o usurio insira um novo gnero com a janela de prompt aprendemos em captulo anterior.

Praticamente todos os componentes do Ext tem um ouvinte. Uma lista dos eventos vlidos para esses ouvintes podem ser encontrados na parte inferior da pgina de documentao da API para cada componente.

Buttons and form action

Agora, temos uma grande baguna de um formulrio com apenas um problema no enviar os dados para o servidor, que foi o ponto de real por trs da criao do nosso formulrio em primeiro lugar. Para no, isso ns vamos adicionar alguns botes. Nossos botes so adicionados a um objeto de configurao botes, semelhante maneira que a forma campos foram adicionados. Estes botes realmente s precisa de duas coisas: o texto a ser exibido no boto, ea funo (que chamado de manipulador) para executar quando o boto 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 funo ou uma referncia a uma funo que ir ser executado uma vez que o boto clicado. Neste caso, estamos fornecendo um funo annima.

Form submission
Nosso FormPanel tem uma opo de url que contm o nome do arquivo que os dados do formulrio ser enviada. Isto bastante simples, assim como um formulrio HTML, todos os nossos campos sero ser enviadas para este url, para que eles possam ser processados no lado do servidor.

Dentro do nosso boto Salvar, temos uma funo annima que executa os seguintes cdigo. Isto ir executar a funo de submisso de nosso formulrio, que envia o dados para o servidor usando AJAX. No precisa atualizar a pgina para enviar o formulrio. Tudo acontece em segundo plano, enquanto a pgina 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 formulrio funcione corretamente, ele deve ser executado a partir de um servidor web. Opes de sucesso e fracasso desde a apresentar identificador de chamada do servidor a resposta. Estas so tambm funes annimas, mas poderia facilmente ser feitas s funes criadas anteriormente no cdigo. Voc notou que as funes tm um par de argumentos passados para eles? Estes ser utilizado para descobrir o que deu a resposta do servidor. Mas primeiro, ns precisamos discutir como fornecer essa resposta no lado do servidor.

Talking backthe server responses - Talking back-as

respostas do servidor

Quando o nosso formulrio enviado para o servidor, um script do lado do servidor ir processar o dados de postagem do formulrio, 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 formulrio. Na utilizao de formulrios e validao do lado do servidor, um valor booleano sucesso necessrio. 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 formulrio Ext ler na mensagens de erro e aplic-los para a validao do formulrio para apresentar ao usurio mensagens de erro. Do lado do servidor de validao de nossa submisso do formulrio d-nos uma forma de buscar informaes no lado do servidor, e os erros de retorno com base nesta. Digamos que temos um banco de dados nomes de filme ruim, e ns no queremos que os usurios enviem-los ao nosso banco de dados. Ns podemos enviar o formulrio para o nosso script, que verifica o banco de dados e retorna uma resposta da base de dados de pesquisa de mesmo nome. Se quisssemos 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 formulrio 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 formulrio. Nossa resposta exemplo, tambm passa uma errormsg, que no utilizada pela forma, mas vai ser acessados separadamente para apresentar a nossa prpria mensagem de erro. Vamos dar a mensagem de erro extra que estvamos passando para trs, 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 ao de envio de formulrio passa as informaes de volta para o sucesso eo fracasso manipuladores. O primeiro argumento um objeto de formulrio Ext, ea segunda uma ao Ext objeto. Vamos dar uma olhada no que est disponvel no objeto da ao Ext:

Agora que sabemos o que est disponvel para o manipulador de falha, ns podemos configurar alguns verificao 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 conexo com o servidor e agir em conformidade, mesmo fornecendo detalhes sobre a mensagem de erro do servidor especfico usando a propriedade resultado.

Loading a form with data

H trs formas bsicas em que as formas so utilizadas em uma interface de usurio: Para entrada de dados para uma pesquisa separada ao, digamos, do Google Para criar novos dados Para alterar os dados existentes

a ltima opo que nos interessa no momento. Para isso, precisamos aprender como carregar os dados da sua nascente (esttico ou banco de dados) em nossa interface de usurio.

Static data load

Ns podemos ter os dados de algum lugar no nosso cdigo, e exibi-lo como o valor em um formulrio de campo. Esta nica linha de cdigo define um valor campos:
movie_form.getForm().findField('title').setValue('Dumb & Dumber');

Assim que comear a trabalhar com formas mais complexas, este mtodo torna-se um aborrecimento. por isso que tambm temos a capacidade de carregar os dados atravs de um pedido de AJAX. O servidor lado seria muito trabalho como aconteceu quando ns carregamos a caixa de combinao:
<?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 contm uma bandeira de sucesso, e um objeto de dados que seria usado para preencher os valores dos campos do formulrio.

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, ns precisamos usar o manipulador de formulrio da carga:

movie_form.getForm().load({ url:'data/movie.php', params:{ id: 1 } });

Dando-lhe uma url e parmetros de configurao ir fazer o truque. O params config representa o que enviado para o script do lado do servidor como post / get parmetros. Por padro, estes so enviados como parmetros post.

Object reference or component config

Objeto de referncia ou componente config Ao longo desses primeiros captulos, que comearam a usar mais e mais objetos de configurao para configurar nossos componentes Ext JS, ao invs de instanciar eles. Vamos fazer uma rpida comparao dos dois mtodo

Instantiated
var test = new Ext.form.TextField({ fieldLabel: 'Title', name: 'title', allowBlank: false });

Aqui, o componente foi criado e memria usada imediatamente, mesmo que seja no aparece na tela ainda. Dependendo de como o trabalho dos usurios finais com a sua aplicao, eles nunca nem precisa nem usar esse campo de texto especfico. No entanto, quando a hora de mostrar esse campo para os usurios finais, ele mostra-se muito rpido.

Component config
{ xtype: 'textfield', fieldLabel: 'Title', name: 'title', allowBlank: false }

Com o componente de configurao, temos uma "descrio" de que tem que acontecer quando ele estiver tempo para usar o campo. No h memria usado imediatamente. somente quando o usurio precisa que a memria usado. Nesse ponto, o campo processado depois que o usurio clicou em ou interagiu com outra coisa, o que pode atrasar a exibio inicial ligeiramente. Este mtodo de criao de componentes tem muitas outras vantagens, uma delas ser capaz de enviar as configuraes "sobre o fio. O mtodo de envio configuraes "sobre o fio" significa que o cdigo do lado do servidor podem gerar um configurao para criar um componente do lado do cliente.

Summary
Temos tido a fundao da web clssica aplicao de formas e injetado com o poder da Ext JS, criar um usurio exclusivo flexvel e poderoso interface. O formulrio criado neste captulo pode validar a entrada do usurio, dados de carga de um banco de dados e enviar os dados para o servidor. Dos mtodos descritos neste captulo, podemos ir para criar formulrios para uso em pesquisas de texto simples, ou uma complexa dados validados tela de entrada.