Getting Started With Ext JS 4 GuideDavid FeinbergCopyright © 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 codeexamples presented in this guide may not be applicable to the final release.

iii

Table of Contents2. Getting Started With Ext JS 4 ...................................................................................... 1

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

iv

List of Figures2.1. Ext JS 4 Files and Folders ........................................................................................ 12.2. HTML Skeleton ......................................................................................................... 32.3. CSS Includes ............................................................................................................ 32.4. Production JavaScript Includes .................................................................................. 32.5. Development JavaScript Includes .............................................................................. 32.6. Sandbox JavaScript Includes ..................................................................................... 42.7. Including the Transparent GIF File for Legacy Browsers .............................................. 42.8. Placing Your Application Code in Ext.onReady ........................................................... 42.9. Sample Application Directory ..................................................................................... 6

1

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

OverviewThis 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 TourFigure 2.1. Ext JS 4 Files and Folders

After uncompressing Ext JS 4 your folder should look similar to the screenshot above. Here's abrief tour of the directory contents.

• bootstrap.js

This will eventually be the only JavaScript file you need to load. It will automatically detectyour application environment (development, staging, production, etc.) and dynamicallyload the Ext JS files you need. Details on configuring bootstrap.js along with examples arecurrently being developed.

Getting Started With Ext JS 4

2

• core

Contains all the source, examples and test files for Ext Core. Ext Core provides basic cross-brower 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 foreach 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 tooccupy the Ext4 namespace instead of the standard Ext namespace. This version isrecommended 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 isrecommended 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 forDOM querying, element selection and more.

• ext-core-sandbox-debug.js

This is the sandboxed debug version of Ext.Core. Ext.Core provides basic cross-browerabstractions for DOM querying, element selection and more. The sandbox version isrecommended 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 abstractionsfor DOM querying, element selection and more.

• ext-foundation-debug.js

This is the debug edition of Ext Foundation. Ext Foundation provides a browser independentbase of the Ext JS 4 library. It's designed to be used in server side JavaScript environmentsincluding Node.js, Rhino, and HammerJS. Documentation and examples for Ext Foundationare currently being developed.

• ext-foundation.js

This is the production edition of Ext Foundation.

Getting Started With Ext JS 4

3

Create Your HTML FileFigure 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 toensure maximum cross browser compatibility. The following forum post describes this practicein greater detail.

Include Ext JS CSS FilesFigure 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 FilesFigure 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 ext-core.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 theproduction 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.jsand ext-all-debug.js. The ext-all-debug file is available with comments as ext-all-debug-w-

Getting Started With Ext JS 4

4

comments.js. The debug versions of the library files are larger in size and designed to haltexecution 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) areavailable to make easier to run Ext JS 4 and Ext JS 3 the same time. When using the sandboxfiles 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-all-sandbox-debug.js.

Including The Transparent GIF File - s.gifTo maximize compatibility with legacy browsers Ext JS uses a 1x1 transparent gif image as afallback when advanced CSS 3 support isn't available. This transparent image helps create in-line icons with CSS background images.

The file is included with the library in the path shown below. If you begin working with Ext JSand find interface widgets aren’t displaying properly in older browsers double check to makesure this gif file is referenced correctly. As an additional troubleshooting step you can use atool 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 CodeFigure 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

5

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

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.css" /> <link rel="stylesheet" type="text/css" href="libs/ext-4.0/resources/css/ext-standard.css" />

<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 anymarkup in the body elements of the file. With Ext JS applications its common for the body tagof your files to remain empty. As you progress through these guides you'll learn how Ext JSgenerates markup and automatically places it inside the body element as needed during thecomponent rendering process.

Getting Started With Ext JS 4

6

Figure 2.9. Sample Application Directory

Code Inspection & Debugging ToolsWe recommend using an in browser debugging tool to help inspect and troubleshoot yourJavaScript applications during development. Just about every browser includes tools designedfor this purpose. The list below includes links to some of the most popular options for majorbrowsers.

• 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 thesetools.

After following these examples and preparing your HTML file, you’re ready to start using theExt JS framework! Continue with the next guide to start learning how to ....