You are on page 1of 23

O ComboBox ou SELECT como seu conhecido em HTML, também chamado de menu drop-

down,
é um elemento de forma altamente útil. Isso reduz a necessidade dos usuários para tocar as
teclas do
seus teclados. O ComboBox Ext tem uma tonelada de usos práticos, e assim como muitos
opções de configuração para acompanhar.
Primeiro, vamos fazer um combo com dados locais. Para isso, precisamos criar um
armazenamento de dados.
Existem alguns tipos diferentes de armazenamento de dados, cada um dos quais pode ser
utilizado para diferentes
situações. No entanto, para este, nós estamos indo para usar um armazenamento simples:
‘

var genres = new Ext.data.SimpleStore({


fields: ['id', 'genre'],
data : [['1','Comedy'],['2','Drama'],['3','Action']]
});

Isso nos dá uma caixa de combinação que utiliza dados locais, o que é bom para listas
pequenas, ou listas
que não mudam com freqüência. O que acontece quando a nossa lista tem de ser puxado para
cima a partir de
um banco de dados?

Tabela de Conteúdo
Prefácio 1
Capítulo 1: Introdução 9
Ext Cerca de 9
Ext: Não é apenas a biblioteca JavaScript mais 11
Cross-browser DOM (Document Object Model) 12
interfaces orientada a eventos 12
Ext e AJAX 12
Obter Ext 13
Onde colocar o ramal 13
Incluindo Ext nas páginas 14
O que esses arquivos não? 15
Usando a biblioteca Ext 15
Tempo de ação 16
O exemplo 17
Não está funcionando? 17
Adaptadores de 18
Usando placas de 18
Estou assíncrona! 19
Localização 20
Inglês apenas 20
A língua diferente do Inglês 21
Vários idiomas 21
Ext JS comunidade on-line 22
Resumo 22
Este material é direitos autorais e é licenciado para uso exclusivo por Roman
Heinrich em 25 de dezembro de 2008
Am Hilligenbusch 47, NRW, Paderborn, 33098
Tabela de Conteúdos
[Ii]
Capítulo 2: A Staples Ext de 23
Ready, Set, Go! 23
Spacer image 24
Widget 24
Tempo de ação 24
O que aconteceu? 25
Usando 25 onReady
Mais widget maravilhas 26
Conheça JSON eo objeto de configuração 28
A maneira velha 28
A nova forma-config objetos 28
O que é um objeto de configuração? 29
Como funciona o JSON? 30
Tempo de ação 30
Acender o lume 32
O laborioso Ext.get-33
Velocidade de ponta 34
Resumo 35
Capítulo 3: Formulários 37
Os principais componentes de um formulário 37
Nosso primeiro formulário 38
Nice forma como ele funciona? 39
Os campos do formulário 39
Validação de 40
Built-in validação vtypes 41
Estilos para exibir erros de 43
Personalizar validação criar o seu próprio vtype 44
Máscara de imprensa que-não-chave! 45
Os botões de rádio e caixas de seleção 46
Não é um botão, é um botão de 46
X marca a caixa de seleção 46
O ComboBox 47
ComboBox Database-driven 47
TextArea e HTMLEditor 50
Ouvir para eventos de campo de formulário 51
51 eventos ComboBox
Botões e ação de formulário 53
apresentação de formulário 53
Talking back-as respostas do servidor 54
Este material é direitos autorais e é licenciado para uso exclusivo por Roman
Heinrich em 25 de dezembro de 2008
Am Hilligenbusch 47, NRW, Paderborn, 33098
Tabela de Conteúdos
[Iii]
Carregar um formulário com os dados 56
A carga estática de dados 56
Objeto de referência ou componente de configuração 58
Instanciado 58
Componente de configuração 58
Resumo 59
Capítulo 4: botões, menus e barras de ferramentas 61
Uma barra de ferramentas para cada ocasião 61
Barras de Ferramentas 61
Os 63 botões
Menu 63
Dividir o botão 64
Barra de ferramentas de alinhamento item, divisórias, e espaçadores 65
Atalhos 66
Ícone de 66 botões
Manipuladores de botão do mouse em mim! 67
Carregar conteúdo clique no menu o item 68
Os campos do formulário em uma barra de ferramentas 69
Barras de ferramentas nas janelas, grades e painéis de 70
Resumo 71
Capítulo 5: Resultados de dados com 73 grades
O que é uma grade de qualquer maneira? 74
Exibição de dados estruturado com uma GridPanel 74
Configurando um armazenamento de dados 75
Adicionando dados ao nosso armazenamento de dados 75
Definindo seus dados para o armazenamento de dados 76
Especificando os tipos de dados 77
Exibindo os 78 GridPanel
Como isso funciona? 80
Configurando o 80 GridPanel
Definição de um modelo de coluna Grades 81
Usando renderizadores de célula 82
Formatação de dados usando o built -renderizadores de células em 82
Criação de dados de pesquisa de células lojas personalizado de
processamento 83
A combinação de duas colunas de 84
Gerando HTML e gráficos 84
Built-in apresenta 85
Do lado do cliente triagem 86
Hidden / 86 colunas visíveis
Coluna reordenação 86
Este material é direitos autorais e é licenciado para uso exclusivo por Roman
Heinrich em 25 de dezembro de 2008
Am Hilligenbusch 47, NRW, Paderborn, 33098
Tabela de Conteúdos
[Iv]
Exibição de dados no lado do servidor na rede 88
Carregando o banco de dados do filme de um arquivo XML 88
Carregando o banco de dados do filme de um arquivo JSON 90
Carregando dados de um banco de dados usando PHP 91
Programação da grade de 92
Trabalhando com células e linha 92 seleções
Ouvir o nosso modelo de seleção para 93 seleções
Manipulando o grid (e seus dados) com o código 94
Alterando a grade com o clique de um botão 94
Advanced formatação da grade 95
Paginação da grade 96
Agrupamento 98
Agrupamento de armazenar 98
Resumo 100
Capítulo 6: Redes Editor 101
O que posso fazer com uma grade editável? 101
Trabalhando com grids editáveis 102
Edição mais células de dados 104
Edite tipos de campo mais 104
Edição de um valor de data 105
Editar com um ComboBox 106
Reagindo a uma célula edição 106
O que é uma cela suja? 107
Reagindo quando ocorre uma edição 107
Excluindo e adicionando no armazenamento de dados 108
Removendo linhas de grade do armazenamento de dados 109
Adicionando uma linha para a rede 11 0
Salvar dados editados para o servidor 112
Enviar atualizações para o servidor 112
Excluindo os dados do servidor 114
Salvando as novas linhas para o servidor 115
Resumo 117
Capítulo 7: Layouts 119
Quais são os layouts, regiões e viewports? 119
Nosso primeiro layout 121
Dividindo as 122 regiões
Eu quero 123 opções
painéis Tab 124
Adição de um painel separador 124
Este material é direitos autorais e é licenciado para uso exclusivo por Roman
Heinrich em 25 de dezembro de 2008
Am Hilligenbusch 47, NRW, Pa derborn, 33098
Tabela de Conteúdos
[V]
Widgets em qualquer lugar 126
Adicionando uma grade para o 126 TabPanel
Acordeões 128
Aninhar um layout acordeão em uma guia 128
Colocar uma barra de ferramentas em seu layout 129
Um formulário para adicionar novos fi lmes 131
Truques e layouts avançados 132
layouts Nested 132
Os ícones em abas 134
Programaticamente manipular um layout 135
Agora você me vê, agora você não 135
Dá-me outra aba 136
Resumo 136
Capítulo 8: Ext JS dá em árvores 137
Plantando para o futuro 137
De pequenas sementes ... 138
O nosso primeiro rebento 138
Preparando o terreno 139
Uma árvore não pode crescer sem os dados de 140
JSON 141
Uma palavra rápida sobre o ID 141
dados extra 142
XML 142
Tendendo a 143 árvores
Arraste e solte 143
Classificando 145
Edição 146
Aparar e poda de 147
Seleção de modelos 147
Round-up com menus de contexto 148
Manuseio do menu 149
Filtragem 150
Os 151 raízes
ajustes TreePanel 151
Cosméticos 152
Tweaking TreeNode 152
Manipulando 153
métodos mais 154
Evento de captura de 155
Este material é direitos autorais e é licenciado para uso exclusivo por Roman
Heinrich em 25 de dezembro de 2008
Am Hilligenbusch 47, NRW, Paderborn, 33098
Tabela de Conteúdos
[Vi]
Lembrando estado 156
StateManager 156
Advertências 157
Resumo 157
Capítulo 9: Windows e caixas de diálogo 159
Abrindo uma caixa de diálogo 159
Diálogos 160
Fora da prateleira 160
Confirmação 162
Está tudo evoluindo muito bem 163
Roll seu próprio 164
Comportamento 165
Windows 166
Exemplos que começam 166
Painéis de 167 potenciais
Layout 168
Configuração 169
Quando estou a limpeza de janelas 169
Os 169 figurantes
Desktopping 170
Outras opções 171
Framing nossa janela 171
Manipulando 172
Eventos 173
Estado manipulação 174
Janela de gerenciamento 175
O comportamento padrão de gerenciador de janelas 175
Várias exemplo janela 175
WindowGroups serviço ao cliente 179
Resumo 180
Capítulo 10: Efeitos 183
É fundamental 183
Fantasia apresenta 184
It's ok para amar 184
funções Fxcellent 184
Metódica loucura 184
Fading 185
Framing 186
Woooo: 186 fantasmas
Destacando 187
Huffing e soprar 188
Escalando as alturas Ext JS 189
Este material é direitos autorais e é licenciado para uso exclusivo por Roman
Heinrich em 25 de dezembro de 2008
Am Hilligenbusch 47, NRW, Paderborn, 33098
Tabela de Conteúdos
[Vii]
Correr em ação 189
Mudança de visto para 190 invisível
Deslocando 190
E agora, as coisas interessantes 191
O Fx é em 191
Ancorando-se com Ext 192
Opções de 192
Fácil não é 194
Múltiplos efeitos 195
Encadeamento 195
Queuing 196
Simultaneidade 196
Bloqueio e métodos de utilidade Ext.Fx 196
Elemental 197
Fazer um movimento 197
A utilização de componentes Ext 198
Tragam o flash 198
Você está Maskin, estou dizendo a 198
contos Ligação de dados e outros 200
Considerando os componentes 200
QuickTipping 200
Resumo 202
Capítulo 11: Arrastar e Soltar -205
Soltar o que está fazendo 205
A vida é uma drag 206
Aquisição de uma solução 206
Aproximando 206
Snap! 207
Me deixar 207
Mas espere: Não está acontecendo nada! 208
Interagindo o tolo 209
Zonas de controle 209
Mudar a nossa lista 211
Registrando um interesse 211
Extreme arrastar e soltar-212
DataView arrastando 212
Lidar com dados arrastar 213
Proxies e 214 metadados
Soltando os detalhes 215
Arrastar-soltar os grupos 216
Enfermagem nosso arrastar-soltar para a saúde 216
Está tudo nos detalhes 217
Este material é direitos autorais e é licenciado para uso exclusivo por Roman
Heinrich em 25 de dezembro de 2008
Am Hilligenbusch 47, NRW, Paderborn, 33098
Tabela de Conteúdos
[Viii]
Configuração 217
Está tudo sob controle 217
Gerenciando nosso movimento 218
propriedades Global 218
Vá gestão 219
Arrastando dentro de componentes 220
TreePanel 220
GridPanel 221
Usá-lo no mundo real, 221
Resumo 222
Capítulo 12: É toda sobre os dados 223
Compreender os formatos de dados 223
Basic remota de dados em painel 223
Pegadinhas com dados em HTML 227
Outros formatos 227
O objeto de armazenamento de dados 228
Definição de dados 229
Mais informações sobre o mapeamento nossos dados 230
Puxar dados para o armazenamento de 231
Utilizando um DataReader para mapear dados 233
Utilizando um DataReader personalizado 234
Obter o que deseja: Encontrando dados 237
Encontrando dados por valor do campo 237
Encontrando dados pelo índice de registro de 237
Encontrando dados pelo registr o ID 238
Obter o que deseja: Filtragem de dados 238
Remote Filtering: O porquê eo como 238
Lidar com as alterações de registros 244
Muitos objetos ter uma Loja 246
Guarde em um ComboBox 246
Guarde em um DataView 247
Lojas em Grades 247
Resumo 248
Capítulo 13: Código para Reutilização: Ext JS Estendendo 249
JavaScript Object-oriented 249
Programação orientada a objetos com Ext JS 251
Herança 251
Decompô-lo e torná-lo simples 251
Soa bem, mas o que isso significa? 253
Agora, o que era este material primordial ? 253
Este material é direitos autorais e é licenciado para uso exclusivo por Roman
Heinrich em 25 de dezembro de 2008
Am Hilligenbusch 47, NRW, Paderborn, 33098
Tabela de Conteúdos
[Ix]
Entendendo os pacotes, classes e namespaces 254
Pacotes de 254
Classes 254
Namespaces 254
Qual é o próximo? 254
Ok, o que queremos estender? 255
Criando um espaço personalizado 255
Nossa primeira classe personalizado 256
Substituindo métodos 259
Entendendo a ordem dos eventos 260
Quando podemos fazer o quê? 261
O que é uma aplicação orientada a eventos? 261
Criar os nossos próprios eventos personalizados 262
Nosso primeiro componente personalizado: 264 Completo
Qual é o próximo? Quebrando -267
Usando xtype: Os benefícios da instanciação preguiçoso 271
Usando nosso componentes personalizados em outros objetos 271
Resumo 272
Capítulo 14: O Poder da Ext JS: O que mais você pode fazer? 273
Tanta coisa para trabalhar com 273
Formulário de 273 widgets
DateField 274
TimeField 275
NumberField 276
CheckboxGroups e RadioGroups 276

HTMLEditor 277
Formatação de dados 278
Basic seqüência de formatação 278
Formatando datas 279
formatação Outros 280
Gerenciando o estado do aplicativo 281
'Estado' Basic 281
Como faço para obter essa janela? 282
Usando o botão voltar em aplicações Ext JS 2 82
Acessando o DOM do 282
Localizando elementos DOM 283
Manipulando o DOM 283
Trabalhando com estilos 284
Ext JS para a área de trabalho: Adobe AIR 284
Este material é direitos autorais e é licenciado para uso exclusivo por Roman
Heinrich em 25 de dezembro de 2008
Am Hilligenbusch 47, NRW, Paderborn, 33098
Tabela de Conteúdos
[X]
Ext JS extensões comunidade 286
DatePickerPlus 286
PowerWizard 287
TinyMCE 287
SwfUploadPanel 288
ColorPicker 288
Outros recursos 289
Amostras e demos 289
Ext JS API 289
Fóruns Ext JS 289
Passo-a-passo tutoriais 290
Comunidade manual 290
Spket IDE 290
Aptana Studio 290
Google 290
Resumo 291
Para onde vamos daqui? 291
Índice 293
‘

Primeiro, vamos fazer um combo com dados locais. Para isso, precisamos criar
um armazenamento de dados.
Existem alguns tipos diferentes de armazenamento de dados, cada um dos
quais pode ser utilizado para diferentes
situações. No entanto, para este, nós estamos indo para usar um
armazenamento simples:
var = Ext.data.SimpleStore gêneros novos ({
campos: ['id', 'gênero'],
dados: [['1 ',' Comédia'],[' 2 ',' Drama'],[' 3 ','] Ação ']
});
Assim como os outros campos em nosso formulário, adicioná -lo aos itens de
configuração. Algumas outras
opções de configuração são necessários quando estamos a criar uma caixa de
combinação. A loja é a
óbvio, isto é os dados que preenchem as opções para a nossa combinação. Os
outros
coisas que nós precisamos é o modo, que determina se os dados são
provenientes de um local
fonte ou uma origem remota, e os displayField, que determina qual coluna
de dados é exibido nas opções de combinação:
{
xtype: 'combo',
nome: 'gênero',
fieldLabel: "Gênero,
modo: 'local',
loja: gêneros,
displayField: 'gênero',
width: 120
}
Isso nos dá uma caixa de combinação que utiliza dados locais, o que é bom
para listas pequenas, ou listas
que não mudam com freqüência. O que acontece quando a nossa lista tem de
ser puxado para cima a partir de
um banco de dados?
ComboBox Database-driven
A maior mudança que precisa acontecer é no lado do servidor, ficando os seus
dados e
formatá-lo em uma string JSON que a caixa de combinação pode usar.
Independentemente do lado do servidor
linguagem é usada, teremos uma biblioteca JSON "codificar" os dados. Se
estamos usando
PHP 5.1 ou superior, este é construído dentro
Este material é direitos autorais e é licenciado para uso exclus ivo por Roman
Heinrich em 25 de dezembro de 2008
Am Hilligenbusch 47, NRW, Paderborn, 33098
Formulários
[48]
Para verificar a nossa versão do PHP, que tanto pode executar um comando
em um
janela de terminal ou executar uma única linha de código PHP. S e temos
acesso a
esta linha de comando, podemos executar php -v para verificar a nossa versão,
caso contrário,
executando um script que tem apenas uma única linha <php phpinfo ();?> irá
fazer o trabalho.
Isto é o que nós usaríamos para gerar dados de no sso JSON usando o PHP
5.1 ou superior:
<? Php
/ / Conexão com o banco de dados vai aqui
$ Resultado = mysql_query ("SELECT id, gêneros genre_name de ');
If (mysql_num_rows ($ resultado)> 0) {
while ($ obj = mysql_fetch_object ($ resultado)) {
$ Arr [] = $ obj;
}
}
Echo '{linhas:. Json_encode ($ arr ).'}';
?>
Quando usamos dados remotos, existem mais algumas coisas que precisam
acontecer. Primeiro, o
armazenamento de dados precisa saber qual o formato dos dados está dentro
Nós especificar isso usando uma base de dados
leitor, no nosso caso, é o leitor de JSON.
var = Ext.data.Store gêneros novos ({
leitor: novos Ext.data.JsonReader ({
campos: ['id', 'genre_name'],
root: 'rows'
}),
proxy: new Ext.data.HttpProxy ({
url: 'data / genres.php'
})
});
O primeiro argumento para o leitor de dados é um objeto que contém a
configuração do
nosso leitor, especificamente, quais campos serão lidos e que o elemento raiz
é. A
lista de campos é simplesmente uma matriz de nomes de domínio; perceber
que nós deixamos para fora sort_order-presente
campo não estará disponível para o nosso conjunto de dados. Nossa raiz é o
elemento que contém a nossa
matriz de dados, neste caso, é as linhas, mas poderia facilmente ser bobs -Crab
Shack, ou
tudo o que sentia:
{Linhas: [
{
"Id": "1",
"Genre_name": "Comédia",
"Sort_order": "0"
}, {
Este material é direitos autorais e é licenciado para uso exclusivo por Roman
Heinrich em 25 de dezembro de 2008
Am Hilligenbusch 47, NRW, Paderborn, 33098
Capítulo 3
[49]
"Id": "2",
"Genre_name": "Drama",
"Sort_order": "1"
}, {
/ ...// Snip /
}]
}
Temos também configurar o proxy normalmente este será um proxy HTTP que
recupera
dados do mesmo domínio que a página web. Este é o método mais comum,
mas
há também uma ScriptTagProxy que pode ser usado para recuperar dados de
um outro
domínio. Todos nós precisamos proporcionar aos nossos proxy é a URL para
obter os nossos dados de.
Sempre que especificar um 'proxy' estamos realmente usando AJAX. Isto
requer
que você tem um servidor web rodando, caso contrário, AJAX não irá
funcionar.
Basta executar o código do sistema de arquivos em um navegador da web não
de trabalho.
Vamos jogar em uma chamada para a função de carga no final, por isso os
dados são carregados em nosso
caixa de combinação para que o usuário começa a interagir com ele.
genres.load ();
Isso nos dá uma caixa de combinação que é preenchida a partir de nossa base
de dados, e deve procurar
como este:
Outra forma de pré-carregar os dados da loja é para def inir a opção autoLoad a
verdade em nossas
armazenar dados de configuração:
var = Ext.data.Store gêneros novos ({
leitor: novos Ext.data.JsonReader ({
campos: ['id', 'genre_name'],
root: 'rows'
}),
proxy: new Ext.data.HttpProxy ({
url: 'data / genre s.php'
}),
autoLoad: true
});
Este material é direitos autorais e é licenciado para uso exclusivo por Roman
Heinrich em 25 de dezembro de 2008
Am Hilligenbusch 47, NRW, Paderborn, 33098
Formulários
[50]
TextArea e HTMLEditor
Estamos indo para adicionar um campo de texto para o nosso formulário de
informações do filme, e Ext tem um casal
de opções para isso. Podemos usar o textarea padrão que estavam
familiarizados
com a utilização de HTML, ou podemos usar o campo HTMLEditor, que fornece
ricos
edição de texto:
textarea: Semelhante a um típico campo textarea HTML
HTMLEditor: Um editor de texto rico, com uma barra de botões para o comum
formatação de tarefas
Se colocarmos hideLabel a verdadeira e limpar o separador de etiqueta, então
podemos ter
um textarea que abrange toda a largura do nosso painel formulário. Isto dá uma
aparência agradável
a forma:
{
xtype: 'textarea',
name: "descrição",
hideLabel: true,
labelSeparator:'',
height: 100,
âncora: '100% '
}
Mudando apenas o xtype, como mostrado abaixo, agora temos um HTML bem
simples
editor com opções embutidas para a cara da fonte, tamanho, cor, itálico,
negrito, e assim por diante. Esta é
o primeiro componente Ext temos usado o componente que requer QuickTips
ser
inicializados antes que possamos utilizá-lo.
{
xtype: 'HTMLEditor,
name: "descrição",
hideLabel: true,
labelSeparator:'',
height: 100,
âncora: '100% '
}
‡
‡
Este material é direitos autorais e é licenciado para uso exclusivo por Roman
Heinrich em 25 de dezembro de 2008
Am Hilligenbusch 47, NRW, Paderborn, 33098
Capítulo 3
[51]
Ouvir para eventos de campo de formulário
Ext torna extremamente simples para ouvir as ações do usuário em particular,
como clicar em
um elemento ou pressionar uma tecla específica.
Uma tarefa comum seria escutar a tecla Enter ser pressionada e, em seguida
enviar o formulário. Então vamos ver como isso é feito:
{
xtype: 'textfield',
fieldLabel: 'Título',
nome: 'title',
allowBlank: false,
ouvintes: {
função (f, e) {: SpecialKey
if (e.getKey () == e.ENTER) {
. Movie_form.getForm () enviar ();
}
}
}
}
O ouvinte SpecialKey é chamado sempre que uma chave relacionadas com a
navegação é pressionado.
Esse ouvinte é também chamada cada vez que as setas forem pressionadas,
junto com Tab,
Esc, e assim por diante. É por isso que temos que verificar para ver se era a
tecla Enter antes de nós
agir.
Agora, o formulário só será enviado quando você pressionar Enter.
eventos ComboBox
Parece que as caixas de combinação comumente precisa m ter eventos ligados
a eles. Vamos
levar a nossa caixa de combinação gênero e anexar a ele um ouvinte que será
executado quando um item na
lista é selecionada.
Primeiro vamos adicionar um item fictício com nossos dados como o primeiro
item na lista e chamar-lhe
Novo gênero:
var = Ext.data.SimpleStore gêneros novos ({
campos: ['id', 'gênero'],
dados: [
['0 ',' Novo gênero '],
['1 ',' Comédia '],
['2 ',' Drama '],
['3 ',' Ação ']
]
});
Este material é direitos autorais e é licenciado para uso e xclusivo por Roman
Heinrich em 25 de dezembro de 2008
Am Hilligenbusch 47, NRW, Paderborn, 33098
Formulários
[52]
Em seguida, adicione o ouvinte a nossa combinação:
{
xtype: 'combo',
nome: 'gênero',
fieldLabel: "Gênero,
modo: 'local',
loja: gêneros,
displayField: 'gênero',
width: 130,
ouvintes: {
função (f, r, i) {: selecione
if (i == 0) {
('Novo gênero', 'Nome', Ext.emptyFn) Ext.Msg.prompt;
}
}
}
}
O ouvinte é configurado para esperar por um evento de seleção e em seguida,
executar a função que
é especificado. Cada tipo de ouvinte tem seu próprio conjunto de variáveis que
é passado para o
função destes podem ser consultados na referência da API.
Para o evento de escolha, a nossa função é passada três coisas:
O campo de formulário
O registro de dados do item selecionado combo
O número índice do item que foi clicado
Uma vez que o item da lista está selecionado, podemos ver que item da lista foi
selecionado. O terceiro
argumento em nossa função de ouvinte é o índice do item que foi clicado. Se
isso tem
um índice de zero (o primeiro item na lista), então vamos solicitar que o usuário
insira um
novo gênero com a janela de prompt aprendemos em capítulo anterior.
‡
‡
‡
Este material é direitos autorais e é licenciado para uso exclu sivo por Roman
Heinrich em 25 de dezembro de 2008
Am Hilligenbusch 47, NRW, Paderborn, 33098
Capítulo 3
[53]
Praticamente todos os componentes do Ext tem um ouvinte. Uma lista dos
eventos válidos para
esses ouvintes podem ser encontrados na parte infe rior da página de
documentação da API
para cada componente.
Botões e ação de formulário
Agora, temos uma grande bagunça de um formulário com apenas um problema
- não enviar os dados para
o servidor, que foi o ponto de real por trás da criação do nosso formulário em
primeiro lugar. Para
não, isso nós vamos adicionar alguns botões.
Nossos botões são adicionados a um objeto de configuração botões,
semelhante à maneira que a forma
campos foram adicionados. Estes botões realmente só precisa de duas coisas :
o texto a ser exibido
no botão, ea função (que é chamado de manipulador) para executar quando o
botão é clicado.
botões: [{
text: 'Salvar',
function () {: manipulador
movie_form.getForm (). submit ({
função (f, a) {: sucesso
Ext.Msg.alert ('Sucesso', 'Funcionou');
}
função (f, a) {: insuficiência
Ext.Msg.alert ('Aviso', 'Erro');
}
});
}
}, {
texto: "Reset",
function () {: manipulador
movie_form.getForm () reset ().;
}
}]
O manipulador é dotado de uma função ou uma referência a uma fun ção que
irá
ser executado uma vez que o botão é clicado. Neste caso, estamos fornecendo
um
função anônima.
apresentação de formulário
Nosso FormPanel tem uma opção de url que contém o nome do arquivo que os
dados do formulário
será enviada. Isto é bastante simples, assim como um formulário HTML, todos
os nossos campos serão
ser enviadas para este url, para que eles possam ser processados no lado do
servidor.
Este material é direitos autorais e é licenciado para uso exclusivo por Roman
Heinrich em 25 de dezembro de 2008
Am Hilligenbusch 47, NRW, Paderborn, 33098
Formulários
[54]
Dentro do nosso botão Salvar, temos uma função anônima que executa os
seguintes
código. Isto irá executar a função de submissão de nosso formulário, que envia
o
dados para o servidor usando AJAX. Não atualização da página é necessário
enviar o formulário. Tudo
acontece em segundo plano, enquanto a página que você está olhando
permanece o mesmo:
movie_form.getForm (). submit ({
função (f, a) {: sucesso
Ext.Msg.alert ('Sucesso', 'Funcionou');
}
função (f, a) {: insuficiência
Ext.Msg.alert ('Aviso', 'Erro');
}
});
Para que o nosso envio de formulário para funcionar corretamente, ele deve
ser executado a partir de um
servidor web.
opções de sucesso e fracasso desde a apresentar identificador de chamada do
servidor
a resposta. Estas são também funções anônimas, mas poderia facilmente ser
feitas
às funções criadas anteriormente no código.
Você notou que as funções têm um par de argumentos passados para eles?
Estes
será utilizado para descobrir o que deu a resposta do servidor. Mas primeiro,
nós precisamos discutir
como fornecer essa resposta no lado do servidor.
Talking back-as respostas do servidor
Quando o nosso formulário é enviado para o servidor, um script d o lado do
servidor irá processar o
dados de postagem do formulário, e decidir se uma mensagem de verdadeiro
ou falso "sucesso" deve ser
enviado de volta para o lado do cliente. As mensagens de erro pode ser
enviado de volta junto com a nossa resposta,
e estes podem conter mensagens que correspondem aos nossos nomes de
campos de formulário.
Na utilização de formulários e validação do lado do servidor, um valor booleano
sucesso é necessário.
Um exemplo de uma resposta do servidor ficaria assim:
{
sucesso: false,
erros: {
Título: "Soa como um Flick"
}
}
Quando a bandeira sucesso é definido como false, ele aciona o formulário Ext
ler na
mensagens de erro e aplicá -los para a validação do formulário para apresentar
ao usuário
mensagens de erro.
Este material é direitos autorais e é licenciado para uso exclusivo por Roman
Heinrich em 25 de dezembro de 2008
Am Hilligenbusch 47, NRW, Paderborn, 33098
Capítulo 3
[55]
do lado do servidor de validação de nossa submissão do formulário dá -nos
uma forma de buscar informações
no lado do servidor, e os erros de retorno com base nesta. Digamos que temos
um banco de dados
nomes de filme ruim, e nós não queremos que os usuários enviem -los ao
nosso banco de dados. Nós podemos
enviar o formulário para o nosso script, que verifica o banco de dados e retorna
uma resposta
da base de dados de pesquisa de mesmo nome.
Se quiséssemos filtrar chick flicks a resposta poderia ser algo como isto:
{
sucesso: false,
erros: {
Título: "Soa como um Flick"
}
errormsg: "Esse título do filme soa como um chick flick".
}
A resposta do sucesso disparos falsos formas as mensagens de erro a ser
exibido. Um
erros objeto é passado com a resposta. O formulário usa esse objeto para
determinar
cada uma das mensagens de erro. Um par nome / valor existe nos erros de
objeto para cada
erro de campo de formulário.
Nossa resposta exemplo, também passa uma errormsg, que não é utilizada
pela forma, mas é
vai ser acessados separadamente para apresentar a nossa própria mensagem
de erro.
Vamos dar a mensagem de erro extra que estávamos passando para trás, e
exibi-lo em um
caixa de mensagem.
botões: [{
text: 'Salvar',
function () {: manipulador
movie_form.getForm (). submit ({
função (f, a) {: sucesso
Ext.Msg.alert ('Sucesso', 'Fun cionou');
}
função (f, a) {: insuficiência
Ext.Msg.alert ('Aviso', a.result.errormsg);
}
});
}
}, {
texto: "Reset",
function () {: manipulador
movie_form.getForm () reset ().;
}
}]
Nossa ação de envio de formulário passa as informações de volt a para o
sucesso eo fracasso
manipuladores. O primeiro argumento é um objeto de formulário Ext, ea
segunda é uma ação Ext
objeto. Vamos dar uma olhada no que está disponível no objeto da ação Ext:
Este material é direitos autorais e é licenciado para us o exclusivo por Roman
Heinrich em 25 de dezembro de 2008
Am Hilligenbusch 47, NRW, Paderborn, 33098
Formulários
[56]
Opção Descrição
failureType Relatórios String tanto do lado do cliente e os erros do lado do
servidor
Objeto resposta Contém informações bruto sobre a resposta do servidor,
incluindo informações de cabeçalho útil
Objeto resultado Parsed objeto JSON com base na resposta do servidor
Tipo String O tipo de ação que foi executada, ou submeter ou carregar
Agora que sabemos o que está disp onível para o manipulador de falha, nós
podemos configurar alguns
verificação de erros simples:
função (f, a) {: insuficiência
if (a.failureType === Ext.form.Action.CONNECT_FAILURE)
{Ext.Msg.alert 'fracasso' ('Servidor relatou:
'+ + A.response.status' a.response.statusText +);
}
if (a.failureType === Ext.form.Action.SERVER_INVALID) {
Ext.Msg.alert ('Aviso', a.result.errormsg);
}
}
Ao verificar o tipo de falha, podemos determinar se houve um erro de conexão
com o servidor
e agir em conformidade, mesmo fornecendo detalhes sobre a mensagem de
erro do servidor específico
usando a propriedade resultado.
Carregar um formulário com os dados
Há três formas básicas em que as formas são utilizadas em uma interface de
usuário:
Para entrada de dados para uma pesquisa separada ação, digamos, do Google
Para criar novos dados
Para alterar os dados existentes
É a última opção que nos interessa no momento. Para isso, precisamos
aprender
como carregar os dados da sua nascente (estático ou banco de dados) em
nossa interface de usuário.
A carga estática de dados
Nós podemos ter os dados de algum lugar no nosso código, e exibi -lo como o
valor em um formulário
de campo. Esta única linha de código define um valor campos:
movie_form.getForm (). findField ('tit le').
setValue ("Dumb & Dumber");
‡
‡
‡
Este material é direitos autorais e é licenciado para uso exclusivo por Roman
Heinrich em 25 de dezembro de 2008
Am Hilligenbusch 47, NRW, Paderborn, 33098
Capítulo 3
[57]
Assim que começar a trabalhar com f ormas mais complexas, este método
torna-se um aborrecimento.
É por isso que também temos a capacidade de carregar os dados através de
um pedido de AJAX. O servidor
lado seria muito trabalho como aconteceu quando nós carregamos a caixa de
combinação:
<? Php
/ / Conexão com o banco de dados vai aqui
$ Resultado = mysql_query ("SELECT * FROM filmes WHERE id = '. $ _
['Id'] PEDIDO);
If (mysql_num_rows ($ resultado)> 0) {
$ Obj = mysql_fetch_object ($ resultado);
'Sucesso {: true, os dados:' Echo. Json_ encode ($ obj ).'}';
Else {}
'{O sucesso: false}' Echo;
}
?>
Isso retorna um objeto JSON que contém uma bandeira de sucesso, e um
objeto de dados que
seria usado para preencher os valores dos campos do formulário. Os dados
retornados que
algo parecido com isto:
{
sucesso: verdade,
dados: {
"Id": "1",
"Title": "Office Space",
"Diretor": "Mike Judge",
"Liberado": "1999/02/19",
"Gênero": "1",
"Slogan": "Work Sucks",
"Coverthumb": "84m.jpg",
"Preço": "19,95",
"Disponível": "1"
}
}
Para acionar esse, nós precisamos usar o manipulador de formulário da carga:
movie_form.getForm (). carga ({
url: 'data / movie.php,
params: {
ID: 1
}
});
Este material é direitos autorais e é licenciado para uso exclusivo por Roman
Heinrich em 25 de dezembro de 2008
Am Hilligenbusch 47, NRW, Paderborn, 33098
Formulários
[58]
Dando-lhe uma url e parâmetros de configuração irá fazer o truque. O params
config
representa o que é enviado para o script do lado do servidor como post / get
parâmetros. Por padrão,
estes são enviados como parâmetros post.
Objeto de referência ou componente config
Ao longo desses primeiros capítulos, que começaram a usar mais e mais
objetos de configuração para configurar nossos componentes Ext JS, ao invés
de instanciar eles.
Vamos fazer uma rápida comparação dos dois métodos.
Instanciado
var = teste Ext.form.TextField novo ({
fieldLabel: 'Título',
nome: 'title',
allowBlank: false
});
Aqui, o componente foi criado e memória usada imediatamente, mesmo que
seja
não aparece na tela ainda. Dependendo de como o trabalho dos usuários finais
com a sua
aplicação, eles nunca nem precisa nem usar esse campo de texto específico.
No entanto,
quando é a hora de mostrar esse campo para os usuários finais, ele mostra -se
muito rápido.
Componente config
{
xtype: 'textfield',
fieldLabel: 'Título',
nome: 'title',
allowBlank: false
}
Este material é direitos autorais e é licenciado para uso exclusivo por Roman
Heinrich em 25 de dezembro de 2008
Am Hilligenbusch 47, NRW, Paderbor n, 33098
Capítulo 3
[59]
Com o componente de configuração, temos uma "descrição" de que tem que
acontecer quando ele estiver
tempo para usar o campo. Não há memória é usado imediatamente. É somente
quando o usuário precisa
que a memória é usado. Nesse ponto, o campo é processado depois que o
usuário clicou
em ou interagiu com outra coisa, o que pode atrasar a exibição inicial
ligeiramente.
Este método de criação de componentes tem muitas outras vantagens, uma
delas
é ser capaz de enviar as configura ções "sobre o fio. O método de envio
configurações "sobre o fio" significa que o código do lado do servidor podem
gerar um
configuração para criar um componente do lado do cliente.
Resumo
Temos tido a fundação da web clássica aplicação de formas e inje tado
com o poder da Ext JS, criar um usuário exclusivo flexível e poderoso
interface. O formulário criado neste capítulo pode validar a entrada do usuário,
dados de carga de um
banco de dados e enviar os dados para o servidor. Dos métodos descritos
neste
capítulo, podemos ir para criar formulários para uso em pesquisas de texto
simples, ou uma complexa
dados validados tela de entrada.
‘

You might also like