1. Requirements
1.1 Web Browsers
Ext JS 4 supports all major web browsers, from Internet Explorer 6 to the latest version of Google Chrome. During development, however, we recommend that you choose one of the following browsers for the best debugging experience:
Google Chrome 10+
Apple Safari 5+
Mozilla Firefox 4+ with the Firebug Web Development Plugin
This tutorial assumes you are using the latest version of Google Chrome. If you don’t already have Chrome take a moment to install it, and familiarize yourself with the Chrome Developer Tools.
1.2 Web Server
Even though a local web server is not a requirement to use Ext JS 4, it is still highly recommended that you develop with one, since XHR over local file:// protocol has cross origin restriction on most browsers. If you don’t already have a local web server it is recommended that you download and install Apache HTTP Server.
Instructions for installing Apache on Windows
Instructions for installing Apache on Linux
Mac OS X comes with a build in apache installation which you can enable by navigating to “System Preferences > Sharing” and checking the box next to “Web Sharing”.
Once you have installed or enabled Apache you can verify that it is running by navigating to localhost in your browser. You should see a startup page indicating that Apache HTTP Server was installed successfully and is running.
1.3. Ext JS 4 SDK
Download Ext JS 4 SDK. Unzip the package to a new directory called “extjs” within your web root directory. If you aren’t sure where your web root directory is, consult the docs for your web server. Your web root directory may vary depending on your operating system, but if you are using Apache it is typically located at:
Windows – “C:Program FilesApache Software FoundationApache2.2htdocs”
Linux – “/var/www/”
/> Mac OS X – “/Library/WebServer/Documents/”
2. Application Structure
2.1 Basic Structure
Although not mandatory, all suggestions listed below should be considered as best-practice guidelines to keep your application well organized, extensible and maintainable. The following is the recommended directory structure for an Ext JS application:
– appname
– app
– namespace
– Class1.js
– Class2.js
– …
– extjs
– resources
– css
– images
– …
– app. js
– index. html
Appname is a directory that contains all your application’s source files
app contains all your classes, the naming style of which should follow the convention listed in the Class System guide
extjs contains the Ext JS 4 SDK files
resources contains additional CSS and image files which are responsible for the look and feel of the application, as well as other static resources (XML, JSON, etc.)
index. html is the entry-point HTML document
app. js contains your application’s logic
Don’t worry about creating all those directories at the moment. For now lets just focus on creating the minimum amount of code necessary to get an Ext JS application up and running. To do this we’ll create a basic “hello world” Ext JS application called “Hello Ext”. First, create the following directory and files in your web root directory.
– helloext
– app. js
– index. html
Then unzip the Ext JS 4 SDK to a directory named extjs in the helloext directory
A typical Ext JS application is contained in a single HTML document – index. html. Open index.
(No Ratings Yet)