203501668 Traducao Do Livro Learning EXTJS
of 31
Transcript of 203501668 Traducao Do Livro Learning EXTJS
-
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 forma-config 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, convertendo-
para 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:
test
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 built-
alfa 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:
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 events- Ouvindo eventos de campo de formulrio
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:
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.
