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 doseus teclados. O ComboBox Ext tem uma tonelada de usos práticos, e assim como muitosopçõ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 diferentessituaçõ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 listasque não mudam com freqüência. O que acontece quando a nossa lista tem de ser puxado para cima a partir deum banco de dados?

Tabela de ConteúdoPrefácio 1Capítulo 1: Introdução 9Ext Cerca de 9Ext: Não é apenas a biblioteca JavaScript mais 11Cross-browser DOM (Document Object Model) 12interfaces orientada a eventos 12Ext e AJAX 12Obter Ext 13Onde colocar o ramal 13Incluindo Ext nas páginas 14O que esses arquivos não? 15Usando a biblioteca Ext 15Tempo de ação 16O exemplo 17Não está funcionando? 17Adaptadores de 18Usando placas de 18Estou assíncrona! 19Localização 20Inglês apenas 20A língua diferente do Inglês 21Vários idiomas 21Ext JS comunidade on-line 22Resumo 22Este material é direitos autorais e é licenciado para uso exclusivo por Roman Heinrich em 25 de dezembro de 2008Am Hilligenbusch 47, NRW, Paderborn, 33098

Tabela de Conteúdos[Ii]Capítulo 2: A Staples Ext de 23Ready, Set, Go! 23Spacer image 24Widget 24Tempo de ação 24O que aconteceu? 25Usando 25 onReadyMais widget maravilhas 26Conheça JSON eo objeto de configuração 28A maneira velha 28A nova forma-config objetos 28O que é um objeto de configuração? 29Como funciona o JSON? 30Tempo de ação 30Acender o lume 32O laborioso Ext.get-33Velocidade de ponta 34Resumo 35Capítulo 3: Formulários 37Os principais componentes de um formulário 37Nosso primeiro formulário 38Nice forma como ele funciona? 39Os campos do formulário 39Validação de 40Built-in validação vtypes 41Estilos para exibir erros de 43Personalizar validação criar o seu próprio vtype 44Máscara de imprensa que-não-chave! 45Os botões de rádio e caixas de seleção 46Não é um botão, é um botão de 46X marca a caixa de seleção 46O ComboBox 47ComboBox Database-driven 47TextArea e HTMLEditor 50Ouvir para eventos de campo de formulário 5151 eventos ComboBoxBotões e ação de formulário 53apresentação de formulário 53Talking back-as respostas do servidor 54Este material é direitos autorais e é licenciado para uso exclusivo por Roman Heinrich em 25 de dezembro de 2008Am Hilligenbusch 47, NRW, Paderborn, 33098Tabela de Conteúdos[Iii]Carregar um formulário com os dados 56A carga estática de dados 56Objeto de referência ou componente de configuração 58Instanciado 58

Componente de configuração 58Resumo 59Capítulo 4: botões, menus e barras de ferramentas 61Uma barra de ferramentas para cada ocasião 61Barras de Ferramentas 61Os 63 botõesMenu 63Dividir o botão 64Barra de ferramentas de alinhamento item, divisórias, e espaçadores 65Atalhos 66Ícone de 66 botõesManipuladores de botão do mouse em mim! 67Carregar conteúdo clique no menu o item 68Os campos do formulário em uma barra de ferramentas 69Barras de ferramentas nas janelas, grades e painéis de 70Resumo 71Capítulo 5: Resultados de dados com 73 gradesO que é uma grade de qualquer maneira? 74Exibição de dados estruturado com uma GridPanel 74Configurando um armazenamento de dados 75Adicionando dados ao nosso armazenamento de dados 75Definindo seus dados para o armazenamento de dados 76Especificando os tipos de dados 77Exibindo os 78 GridPanelComo isso funciona? 80Configurando o 80 GridPanelDefinição de um modelo de coluna Grades 81Usando renderizadores de célula 82Formatação de dados usando o built-renderizadores de células em 82Criação de dados de pesquisa de células lojas personalizado de processamento 83A combinação de duas colunas de 84Gerando HTML e gráficos 84Built-in apresenta 85Do lado do cliente triagem 86Hidden / 86 colunas visíveisColuna reordenação 86Este material é direitos autorais e é licenciado para uso exclusivo por Roman Heinrich em 25 de dezembro de 2008Am Hilligenbusch 47, NRW, Paderborn, 33098Tabela de Conteúdos[Iv]Exibição de dados no lado do servidor na rede 88Carregando o banco de dados do filme de um arquivo XML 88Carregando o banco de dados do filme de um arquivo JSON 90Carregando dados de um banco de dados usando PHP 91Programação da grade de 92Trabalhando com células e linha 92 seleçõesOuvir o nosso modelo de seleção para 93 seleçõesManipulando o grid (e seus dados) com o código 94

Alterando a grade com o clique de um botão 94Advanced formatação da grade 95Paginação da grade 96Agrupamento 98Agrupamento de armazenar 98Resumo 100Capítulo 6: Redes Editor 101O que posso fazer com uma grade editável? 101Trabalhando com grids editáveis 102Edição mais células de dados 104Edite tipos de campo mais 104Edição de um valor de data 105Editar com um ComboBox 106Reagindo a uma célula edição 106O que é uma cela suja? 107Reagindo quando ocorre uma edição 107Excluindo e adicionando no armazenamento de dados 108Removendo linhas de grade do armazenamento de dados 109Adicionando uma linha para a rede 110Salvar dados editados para o servidor 112Enviar atualizações para o servidor 112Excluindo os dados do servidor 114Salvando as novas linhas para o servidor 115Resumo 117Capítulo 7: Layouts 119Quais são os layouts, regiões e viewports? 119Nosso primeiro layout 121Dividindo as 122 regiõesEu quero 123 opçõespainéis Tab 124Adição de um painel separador 124Este material é direitos autorais e é licenciado para uso exclusivo por Roman Heinrich em 25 de dezembro de 2008Am Hilligenbusch 47, NRW, Paderborn, 33098Tabela de Conteúdos[V]Widgets em qualquer lugar 126Adicionando uma grade para o 126 TabPanelAcordeões 128Aninhar um layout acordeão em uma guia 128Colocar uma barra de ferramentas em seu layout 129Um formulário para adicionar novos filmes 131Truques e layouts avançados 132layouts Nested 132Os ícones em abas 134Programaticamente manipular um layout 135Agora você me vê, agora você não 135Dá-me outra aba 136Resumo 136Capítulo 8: Ext JS dá em árvores 137

Plantando para o futuro 137De pequenas sementes ... 138O nosso primeiro rebento 138Preparando o terreno 139Uma árvore não pode crescer sem os dados de 140JSON 141Uma palavra rápida sobre o ID 141dados extra 142XML 142Tendendo a 143 árvoresArraste e solte 143Classificando 145Edição 146Aparar e poda de 147Seleção de modelos 147Round-up com menus de contexto 148Manuseio do menu 149Filtragem 150Os 151 raízesajustes TreePanel 151Cosméticos 152Tweaking TreeNode 152Manipulando 153métodos mais 154Evento de captura de 155Este material é direitos autorais e é licenciado para uso exclusivo por Roman Heinrich em 25 de dezembro de 2008Am Hilligenbusch 47, NRW, Paderborn, 33098Tabela de Conteúdos[Vi]Lembrando estado 156StateManager 156Advertências 157Resumo 157Capítulo 9: Windows e caixas de diálogo 159Abrindo uma caixa de diálogo 159Diálogos 160Fora da prateleira 160Confirmação 162Está tudo evoluindo muito bem 163Roll seu próprio 164Comportamento 165Windows 166Exemplos que começam 166Painéis de 167 potenciaisLayout 168Configuração 169Quando estou a limpeza de janelas 169Os 169 figurantesDesktopping 170

Outras opções 171Framing nossa janela 171Manipulando 172Eventos 173Estado manipulação 174Janela de gerenciamento 175O comportamento padrão de gerenciador de janelas 175Várias exemplo janela 175WindowGroups serviço ao cliente 179Resumo 180Capítulo 10: Efeitos 183É fundamental 183Fantasia apresenta 184It's ok para amar 184funções Fxcellent 184Metódica loucura 184Fading 185Framing 186Woooo: 186 fantasmasDestacando 187Huffing e soprar 188Escalando as alturas Ext JS 189Este material é direitos autorais e é licenciado para uso exclusivo por Roman Heinrich em 25 de dezembro de 2008Am Hilligenbusch 47, NRW, Paderborn, 33098Tabela de Conteúdos[Vii]Correr em ação 189Mudança de visto para 190 invisívelDeslocando 190E agora, as coisas interessantes 191O Fx é em 191Ancorando-se com Ext 192Opções de 192Fácil não é 194Múltiplos efeitos 195Encadeamento 195Queuing 196Simultaneidade 196Bloqueio e métodos de utilidade Ext.Fx 196Elemental 197Fazer um movimento 197A utilização de componentes Ext 198Tragam o flash 198Você está Maskin, estou dizendo a 198contos Ligação de dados e outros 200Considerando os componentes 200QuickTipping 200Resumo 202Capítulo 11: Arrastar e Soltar-205

Soltar o que está fazendo 205A vida é uma drag 206Aquisição de uma solução 206Aproximando 206Snap! 207Me deixar 207Mas espere: Não está acontecendo nada! 208Interagindo o tolo 209Zonas de controle 209Mudar a nossa lista 211Registrando um interesse 211Extreme arrastar e soltar-212DataView arrastando 212Lidar com dados arrastar 213Proxies e 214 metadadosSoltando os detalhes 215Arrastar-soltar os grupos 216Enfermagem nosso arrastar-soltar para a saúde 216Está tudo nos detalhes 217Este material é direitos autorais e é licenciado para uso exclusivo por Roman Heinrich em 25 de dezembro de 2008Am Hilligenbusch 47, NRW, Paderborn, 33098Tabela de Conteúdos[Viii]Configuração 217Está tudo sob controle 217Gerenciando nosso movimento 218propriedades Global 218Vá gestão 219Arrastando dentro de componentes 220TreePanel 220GridPanel 221Usá-lo no mundo real, 221Resumo 222Capítulo 12: É toda sobre os dados 223Compreender os formatos de dados 223Basic remota de dados em painel 223Pegadinhas com dados em HTML 227Outros formatos 227O objeto de armazenamento de dados 228Definição de dados 229Mais informações sobre o mapeamento nossos dados 230Puxar dados para o armazenamento de 231Utilizando um DataReader para mapear dados 233Utilizando um DataReader personalizado 234Obter o que deseja: Encontrando dados 237Encontrando dados por valor do campo 237Encontrando dados pelo índice de registro de 237Encontrando dados pelo registro ID 238Obter o que deseja: Filtragem de dados 238

Remote Filtering: O porquê eo como 238Lidar com as alterações de registros 244Muitos objetos ter uma Loja 246Guarde em um ComboBox 246Guarde em um DataView 247Lojas em Grades 247Resumo 248Capítulo 13: Código para Reutilização: Ext JS Estendendo 249JavaScript Object-oriented 249Programação orientada a objetos com Ext JS 251Herança 251Decompô-lo e torná-lo simples 251Soa bem, mas o que isso significa? 253Agora, o que era este material primordial? 253Este material é direitos autorais e é licenciado para uso exclusivo por Roman Heinrich em 25 de dezembro de 2008Am Hilligenbusch 47, NRW, Paderborn, 33098Tabela de Conteúdos[Ix]Entendendo os pacotes, classes e namespaces 254Pacotes de 254Classes 254Namespaces 254Qual é o próximo? 254Ok, o que queremos estender? 255Criando um espaço personalizado 255Nossa primeira classe personalizado 256Substituindo métodos 259Entendendo a ordem dos eventos 260Quando podemos fazer o quê? 261O que é uma aplicação orientada a eventos? 261Criar os nossos próprios eventos personalizados 262Nosso primeiro componente personalizado: 264 CompletoQual é o próximo? Quebrando-267Usando xtype: Os benefícios da instanciação preguiçoso 271Usando nosso componentes personalizados em outros objetos 271Resumo 272Capítulo 14: O Poder da Ext JS: O que mais você pode fazer? 273Tanta coisa para trabalhar com 273Formulário de 273 widgetsDateField 274TimeField 275NumberField 276CheckboxGroups e RadioGroups 276

HTMLEditor 277

Formatação de dados 278Basic seqüência de formatação 278Formatando datas 279formatação Outros 280Gerenciando o estado do aplicativo 281'Estado' Basic 281Como faço para obter essa janela? 282Usando o botão voltar em aplicações Ext JS 282Acessando o DOM do 282Localizando elementos DOM 283Manipulando o DOM 283Trabalhando com estilos 284Ext JS para a área de trabalho: Adobe AIR 284Este material é direitos autorais e é licenciado para uso exclusivo por Roman Heinrich em 25 de dezembro de 2008Am Hilligenbusch 47, NRW, Paderborn, 33098Tabela de Conteúdos[X]Ext JS extensões comunidade 286DatePickerPlus 286PowerWizard 287TinyMCE 287SwfUploadPanel 288ColorPicker 288Outros recursos 289Amostras e demos 289Ext JS API 289Fóruns Ext JS 289Passo-a-passo tutoriais 290Comunidade manual 290Spket IDE 290Aptana Studio 290Google 290Resumo 291Para 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 exclusivo 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. Se 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 nosso 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 definir 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 / genres.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 precisam ter eventos ligados a eles. Vamos levar a nossa caixa de combinação gênero e anexar a ele um ouvinte que será executado quando um item na lista é selecionada. Primeiro vamos adicionar um item fictício com nossos dados como o primeiro item na lista e chamar-lhe 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 exclusivo 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 exclusivo 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 inferior 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 do lado do servidor irá processar o dados de postagem do formulário, e decidir se uma mensagem de verdadeiro ou falso "sucesso" deve ser enviado de volta para o lado do cliente. As mensagens de erro pode ser enviado de volta junto com a nossa resposta, e estes podem conter mensagens que correspondem aos nossos nomes de campos de formulário. Na utilização de formulários e validação do lado do servidor, um valor booleano sucesso é necessário. Um exemplo de uma resposta do servidor ficaria assim: { 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', 'Funcionou'); } 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 volta para o sucesso eo fracasso manipuladores. O primeiro argumento é um objeto de formulário Ext, ea segunda é uma ação Ext objeto. Vamos dar uma olhada no que está disponível no objeto da ação Ext: 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 [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á disponí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 ('title'). 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 formas mais complexas, este método

torna-se um aborrecimento. É por isso que também temos a capacidade de carregar os dados através de um pedido de AJAX. O servidor lado seria muito trabalho como aconteceu quando nós carregamos a caixa de combinação: <? Php / / 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, Paderborn, 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 injetado 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.