Playing With Ext The Easy Way

  Introduction

Scenario 1 - Beginner

You've heard about Ext, you've seen the online examples, you've even started reading the API. Let's face it, you're itching to start playing with Ext, but you don't have a test server on hand to play with!

Scenario 2 - Pro

You're digging through the API and you see an interesting looking method that you'd love to try out right now but you really can't be bothered whipping up a test html page that includes all the appropriate resources just to test that one method.

Whatever your reason, here's a quick way to play with Ext right now, no test server required. You're going to need Firefox with Firebug installed to do this, but really, if you haven't installed it already do yourself a favour and go install it now!

Show Me How

• Fire up the Ext API Documentation. Chances are you were there already.
• Hit F12 to open the Firebug console (you are running Firebug right?)
• If your firebug console is a single line that looks something like '>>>' then click on the tiny red up arrow in the bottom right-hand corner to expand the console into a multi-line version
• Type this as your first line and hit Ctrl-Enter to run it:

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

What the above line does is replace the entire DOM body with a single div (with id test). The body content is gone but the Ext library is still loaded and ready for you to play with.

Now, let's assume you were browsing the Ext.Panel API and you wanted to see with your own eyes how easy it is to create a new Panel object. Add the following lines to your code in firebug:

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

Hit Ctrl-Enter again, and voila, your new panel created on the page.

Ok, now you want to know what happens if you add another option, say, enabling the collapsible property. Your code is still sitting there in firebug, so you add an extra line with the new configuration option:

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
});

Hit Ctrl-Enter and you immediately see the collapsible toggle appear in the panel's right-hand corner.

Every time you hit Ctrl-Enter the first line removes anything you've added to the dom on your previous execution, so you keep a clean canvas to work with. It's a simple trick but it's incredibly handy if you like seeing first-hand what the plethora of available configuration options do.

You can add as much HTML as you need in the string passed to the update() method in the first line, and then write as much Javascript as you like to explore the Ext API.