From Learn About the Ext JavaScript Library

Contents 1 Introdução 1.1 Cenário 1 - Iniciante 1.2 Cenário 2 - Pro 2 Me Mostre Como

Introdução

Cenário 1 - Iniciante

Você já ouviu falar sobre Ext, você viu o exemplos online, já começou a ler o API Docs. Então, você está louco para começar a usar o Ext, não precisa ter um servidor de teste na mão para iniciar!

Cenário 2 - Pro

Você estava navegando no API Docs e encontrou um método que adoraria experimentar agora, mas você deve incluir os recursos necessário uma página de teste HTML para testar um método.

Seja qual for o seu motivo, aqui está uma maneira rápida de usar o Ext, nenhum servidor de teste é necessário. Você vai precisar de Firefox com Firebug instalado , mas realmente, se você não tiver instalado, faça sua instalação agora!

Me Mostre Como

• Com FireFox iniciado em Ext API Documentação. Provavelmente, você já estava lá.
• Aperte F12 para abrir o console Firebug (você está executando o Firebug certo?)
• Se o Firebug console é uma linha única que é algo como'>>>' em seguida, clique na pequena seta vermelha para cima no canto inferior direito para expandir o console em uma versão multi-line
• Tipo como esta a sua primeira linha e pressione Ctrl-Enter para executá-lo:

Ext.get(document.body).update('<div id="test"> </ div>');

A linha acima substituir o DOM body com uma única div com id test. O conteúdo do corpo se foi mas a biblioteca Ext ainda está carregado e pronto para ser usada.

Agora, vamos supor que você estava navegando na Ext.Panel API e você queria ver com seus próprios olhos como é fácil criar um novo objeto Panel. Adicione as seguintes linhas ao seu código no firebug:

Ext.get(document.body).update('<div id="test"></div>');
new Ext.Panel({
	renderTo: 'test',
	width: '200px',
	title: 'My Title',
	html: 'My HTML content'
});

Aperte Ctrl-Enter novamente, e voila, seu novo painel criado na página.

Ok, agora você quer saber o que acontece se você adicionar mais uma opção, por exemplo, permitindo que a propriedade recolher. Seu código ainda está lá no firebug, assim que você adicionar uma linha extra com a nova opção de configuração:

Ext.get(document.body).update('<div id="test"></div>');
new Ext.Panel({
	renderTo: 'test',
	width: '200px',
	title: 'My Title',
	html: 'My HTML content',
	collapsible: true
});

Aperte Ctrl-Enter e você vê imediatamente o alternar dobrável aparecer na direita do painel.

Cada vez que você pressionar Ctrl-Enter a primeira linha remove qualquer coisa que você adicionou ao dom da sua execução anterior, de modo a manter a tela limpa para trabalhar. É um truque simples, mas que é extremamente útil se gosta de ver em primeira mão o que a multiplicidade de opções disponíveis para a configuração.

Você pode adicionar o HTML quando precisar na seqüência passada para o método update() na primeira linha e, em seguida, escrever o Javascript que gostaria de explorar a API Ext.

Agora vai começar a usar a API você mesmo!

• Ext Programmer's API Documentation
• Ext User Forums