Getting Started With Ext JS 4 Guide

David Feinberg Copyright 2011 Sencha, Inc. All rights reserved. Pre-Release Content All the content in this guide is based on a early pre-release version of Ext JS 4. The concepts and code examples presented in this guide may not be applicable to the final release.

Table of Contents
2. Getting Started With Ext JS 4 ...................................................................................... 1 ............................................................................................................................... 1 Overview ................................................................................................................. 1 Ext JS Directory Tour .............................................................................................. 1 Create Your HTML File ............................................................................................ 3 Include Ext JS CSS Files ......................................................................................... 3 Include Ext JS JavaScript Files ................................................................................ 3 Including The Transparent GIF File - s.gif ................................................................. 4 Executing Your JavaScript Application Code ............................................................. 4 Complete HTML Index File ....................................................................................... 5 Code Inspection & Debugging Tools ......................................................................... 6

iii

List of Figures
2.1. 2.2. 2.3. 2.4. 2.5. 2.6. 2.7. 2.8. 2.9. Ext JS 4 Files and Folders ........................................................................................ HTML Skeleton ......................................................................................................... CSS Includes ............................................................................................................ Production JavaScript Includes .................................................................................. Development JavaScript Includes .............................................................................. Sandbox JavaScript Includes ..................................................................................... Including the Transparent GIF File for Legacy Browsers .............................................. Placing Your Application Code in Ext.onReady ........................................................... Sample Application Directory ..................................................................................... 1 3 3 3 3 4 4 4 6

iv

Getting Started With Ext JS 4

All the content in this guide is based on a early pre-release version of Ext JS 4. The concepts and code examples presented in this guide may not be applicable to the final release.

Overview
This guide will help you setup your development environment to start working with Ext JS 4. Before reading on please download and extract the latest version of the Ext JS 4 library.

Ext JS Directory Tour

Figure 2.1. Ext JS 4 Files and Folders

After uncompressing Ext JS 4 your folder should look similar to the screenshot above. Here's a brief tour of the directory contents. bootstrap.js This will eventually be the only JavaScript file you need to load. It will automatically detect your application environment (development, staging, production, etc.) and dynamically load the Ext JS files you need. Details on configuring bootstrap.js along with examples are currently being developed.

Getting Started With Ext JS 4

core Contains all the source, examples and test files for Ext Core. Ext Core provides basic crossbrower abstractions for DOM querying, element selection and more. docs Contains a locally browsable version of the Ext JS 4 API documentation. examples Contains a full series of examples built with Ext JS 4 along with annotated source code for each one. ext-all-debug.js The debug version of the complete Ext JS 4 library. ext-all-sandbox-debug.js The sandboxed debug version of the complete Ext JS 4 library. This allows Ext JS 4 to occupy the Ext4 namespace instead of the standard Ext namespace. This version is recommended if you need to run Ext JS 3 and Ext JS 4 in the same application. ext-all-sandbox.js This is the production, sandboxed version of the complete library. The sandbox version is recommended if you need to run Ext JS 3 and Ext JS 4 in the same application. ext-all.js This is the production edition of the complete Ext JS 4 library. ext-core-debug.js This is the debug edition of Ext Core. Ext Core provides basic cross-brower abstractions for DOM querying, element selection and more. ext-core-sandbox-debug.js This is the sandboxed debug version of Ext.Core. Ext.Core provides basic cross-brower abstractions for DOM querying, element selection and more. The sandbox version is recommended if you need to run Ext JS 3 and Ext JS 4 in the same application. ext-core.js This is the production edition of Ext Core. Ext Core provides basic cross-brower abstractions for DOM querying, element selection and more. ext-foundation-debug.js This is the debug edition of Ext Foundation. Ext Foundation provides a browser independent base of the Ext JS 4 library. It's designed to be used in server side JavaScript environments including Node.js, Rhino, and HammerJS. Documentation and examples for Ext Foundation are currently being developed. ext-foundation.js This is the production edition of Ext Foundation.

Getting Started With Ext JS 4

Create Your HTML File

Figure 2.2. HTML Skeleton
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Ext JS - Getting Started</title> </head> <body> </body> </html> Start by creating a standard HTML skeleton file. You'll notice we haven't set the DOCTYPE to ensure maximum cross browser compatibility. The following forum post describes this practice in greater detail.

Include Ext JS CSS Files

Figure 2.3. CSS Includes
<link rel="stylesheet" type="text/css" href="ext-4.0/resources/css/ext-all.css" /> The ext-all.css file is the only CSS file you need to start using the default blue theme.

Include Ext JS JavaScript Files

Figure 2.4. Production JavaScript Includes
<script type="text/javascript" src="libs/ext-4.0/ext-core.js"></script> <script type="text/javascript" src="libs/ext-4.0/ext-all.js"></script> To start using Ext JS you need to reference two JavaScript files from your HTML page extcore.js and ext-all.js. These are the production versions of these two files. In total, five versions of ext-all are included with the library. Now that you've seen the production setup, we'll look at the use cases for the other variations.

Figure 2.5. Development JavaScript Includes

<script type="text/javascript" src="libs/ext-4.0/ext-core-debug.js"></script> <script type="text/javascript" src="libs/ext-4.0/ext-all-debug.js"></script> During development we recommend using the debug versions of each file ext-core-debug.js and ext-all-debug.js. The ext-all-debug file is available with comments as ext-all-debug-w-

Getting Started With Ext JS 4

comments.js. The debug versions of the library files are larger in size and designed to halt execution on more error conditions to help you identify coding errors during development.

Figure 2.6. Sandbox JavaScript Includes

<script type="text/javascript" src="libs/ext-4.0/ext-core-sandbox.js"></script> <script type="text/javascript" src="libs/ext-4.0/ext-all-sandbox.js"></script> Sandbox versions of ext-core (ext-core-sandbox.js) and ext-all (ext-all-sandbox.js) are available to make easier to run Ext JS 4 and Ext JS 3 the same time. When using the sandbox files Ext JS 4 is available under the Ext4 namespace. Debug versions of the sandbox files are available as ext-core-sandbox-debug.js and ext-allsandbox-debug.js.

Including The Transparent GIF File - s.gif

To maximize compatibility with legacy browsers Ext JS uses a 1x1 transparent gif image as a fallback when advanced CSS 3 support isn't available. This transparent image helps create inline icons with CSS background images. The file is included with the library in the path shown below. If you begin working with Ext JS and find interface widgets arent displaying properly in older browsers double check to make sure this gif file is referenced correctly. As an additional troubleshooting step you can use a tool like FireBug to make sure the file is actually being loaded by the browser.

Figure 2.7. Including the Transparent GIF File for Legacy Browsers
<script type="text/javascript"> Ext.BLANK_IMAGE_URL = 'libs/ext-4.0/resources/themes/images/default/tree/s.gif'; </script>

Executing Your JavaScript Application Code

Figure 2.8. Placing Your Application Code in Ext.onReady
<script type="text/javascript"> Ext.onReady(function() { // your application code goes here }); </script>

Getting Started With Ext JS 4

The final step to setting up your environment to work with Ext JS is to place your JavaScript application code inside the Ext.onReady function. This function ensures all scripts have been loaded and the DOM is ready before running your application. More advanced guides will demonstrate different strategies for organizing larger JavaScript applications spanning multiple files.

Complete HTML Index File

<script type="text/javascript"> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Sample Ext JS HTML File</title> <link rel="stylesheet" type="text/css" href="libs/ext-4.0/resources/css/ext-all.c <link rel="stylesheet" type="text/css" href="libs/ext-4.0/resources/css/ext-stand <script type="text/javascript" src="libs/ext-4.0/ext-core.js"></script> <script type="text/javascript" src="libs/ext-4.0/ext-all.js"></script> <script type="text/javascript"> Ext.BLANK_IMAGE_URL = 'libs/ext-4.0/resources/themes/images/default/tree/s.gif'; Ext.onReady(function() { // your application code goes here }); </script> </head> <body></body> </html> </script> This is a sample index.html for a simple Ext JS application. You'll notice we haven't placed any markup in the body elements of the file. With Ext JS applications its common for the body tag of your files to remain empty. As you progress through these guides you'll learn how Ext JS generates markup and automatically places it inside the body element as needed during the component rendering process.

Getting Started With Ext JS 4

Figure 2.9. Sample Application Directory

Code Inspection & Debugging Tools

We recommend using an in browser debugging tool to help inspect and troubleshoot your JavaScript applications during development. Just about every browser includes tools designed for this purpose. The list below includes links to some of the most popular options for major browsers. Firebug for FireFox Web Inspector & JavaScript Debugger - Safari and Google Chrome Dragonfly - Opera Developer Tools or Firebug Lite - Internet Explorer Other guides will show how you can inspect your application code as you develop using these tools. After following these examples and preparing your HTML file, youre ready to start using the Ext JS framework! Continue with the next guide to start learning how to ....