Installing Ext Js
From InstallationWiki
| Official Page |
| Project Documentation |
| Download |
|
Contents |
[edit] Getting Ext
We can download the requisite from the Ext website, at http://www.extjs.com/. Grab the Ext SDK (Software Development Kit), which contains a ton of useful examples and the API reference. Most importantly, it contains the resources that Ext needs to run properly.
[edit] Where to put Ext
Once you get the SDK file, uncompress it onto your hard drive, preferably in its own folder. My approach to folder naming conventions is based on the standard Linux structure where all libraries go into a lib folder. So for the sake of the examples in this tutorial, uncompress all of the files in the SDK into a folder named lib.
After extracting everything from the SDK download file, your directory tree should look like this:
To make it easier when we upgrade our Ext library to the most recently-released version, let us rename the ext-2.0.1 folder to extjs.
The SDK contains a version of Ext JS that has everything you need included in it, commonly called ext-all.Also the SDK file are a specification of dependencies, documentation, example code, and more for Ext to work properly:
| adapter | Files that allow you to use other libraries along side Ext |
| build | Files that can be used to custom-build an ext-all.js |
| docs | The documentation center (this will only work when run on a web server) |
| examples | Plenty of amazing and insightful examples |
| resources | Dependencies of the Ext library, such as CSS and images |
| source | The complete source code for Ext |
When you're ready to host your page on a web server, the adapter and resources folders will need to be uploaded to the server.
[edit] Including Ext in your pages
Before we can use Ext in our pages, we need to reference the Ext library files. To do this, we need to include a few of the files provided in the SDK download in the HEAD portion of our HTML page.
<html> <head> <title>Getting Started Example</title> <link rel="stylesheet" type="text/css" href="lib/extjs/resources/css/ext-all.css" /> <script src="lib/extjs/adapter/ext/ext-base.js"></script> <script src="lib/extjs/ext-all-debug.js"></script> </head> <body> <!-- Nothing in the body --> </body> </html>
The path to the Ext files must be correct and is relative to the location of our HTML file. These files must be included in the following order:
- ext-all.css: The main Ext CSS file
- An external js library file, if needed (one not used in the examples in this tutorial; however if you need to use an external library it is covered in the 'Adapters' section of this tutorial)
- ext-base.js: The Ext 'adapter'—we will learn more about this file later in this tutorial
- ext-all.js or ext-all-debug.js: The primary Ext library file
- A theme file could also be included here, or at any point after the main Ext CSS file.
[edit] What do these files do?
We have included the following three files that Ext requires to run in our page:
- ext-all.css: A stylesheet file that controls the look and feel of Ext widgets. This file must always be included as-is, with no modifications. Any changes to the CSS in this file would break future upgrades. If the look and feel of Ext needs to be adjusted, another stylesheet containing the overrides should be included after the ext-all.css file.
- ext-base.js: This file provides the core functionality of Ext. It's the engine of the Ext car. This is the file that we would change if we wanted to use another library, such as jQuery, along with Ext.
- ext-all-debug.js/ext-all.js: All of the widgets live in this file. The debug version is used for development, and then swapped out for the non-debug version for production.
Once these files are in place, we can start to actually use the Ext library and have some fun.
| If you are working with a server-side language such as PHP or ASP.NET, you might choose to "include" these lines in the header dynamically. For most of the examples in this tutorial, we will assume that you are working with a static HTML page. |
[edit] Source
The source of this content is Chapter 1: Installing Learning Ext Js of Learning Ext JS by Shea Frederick,Steve 'Cutter' Blades,Colin Ramsay (Packt Publishing, 2009).
