This Tutorial is most relevant to Ext JS, 2.x, 3.x.
This tutorial will walk through how to get your Ext JS installation up and running quickly.
Download Ext JS
If you haven't done so already, you'll first want to download the most current Ext JS release which can always be found here: http://www.sencha.com/products/js/download.php.
There are several different options for what you can download, but you'll probably want to start with the most current stable production version available. Once you download and unzip the file, you're pretty much ready to go, but read on for some specifics depending on your server setup.
Some Ext JS examples require a HTTP server (and some a PHP server). This does not mean that Ext JS can only be used in combination with a HTTP server.
Ext JS code that uses server requests requires a HTTP web server (access pages through a webserver via http://something).
No Web Server
You can actually run Ext JS without a web server thanks to Doug Hendricks. If you would like to run Ext without a web server, check out this forum post.
IIS - Microsoft Internet Information Services
If you encounter any difficulties on a IIS platform, additional tips can be found in this forum post.
If you encounter issues with Apache on windows (files being corrupted), additional tips can be found in this forum post.
HTML Page Setup
Please see: Setting up your HTML Page.
How to learn it?
If you're not sure where to start, one approach might be to:
- See if there's something in the demos that is close to what you want to do
- Review the demo source code.
- If you see commands in the source and don't understand what it's doing check the Ext JS API Docs for more info.
- At the same time that you search in the demos, see if there's a tutorial for what you're about to do that might provide additional commentary.
- Check the FAQs if you encounter any problems along the way for the part you're working on.
- If you're branching into something more complex, then check the tutorial section for Application Design stuff (how to structure your app, working with scope, extending, xtypes, etc).
- Also if you're branching out check the extensions to see if someone has done something similar. There is a forum for extensions, as well as a recent initiative to house extensions in a more centralized, searchable location.
- Books and Screencasts.
- Finally feel free to contribute your learning experience to a tutorial or supplement the FAQs. Don't worry about posting something wrong, someone will correct it.
Ext JS Examples
Ext JS uses a 1×1 transparent gif image to create inline icons with CSS background images. The default URL to this file is "extjs.com/s.gif", so you'll want to change this somewhere at the top of your code by telling Ext JS where to find the empty image. You can modify the URL as needed with a command like this:
Ext.BLANK_IMAGE_URL = '/images/ext/resources/images/default/s.gif';
- The php files are written assuming short tags are enabled <? instead of <? php.
- The examples provided by Ext JS using JSON via XHR assume your php server supports json_encode(). If your version of php (pre 5.2?) doesn't have that function available there is really easy to fix:
/* 1.) Download JSON.php from: http://mike.teczno.com/JSON/JSON.phps<br /> 2.) copy JSON.php to the example dir of Ext JS.<br /> 3.) Change the php file in the example as follows: ("ext tree" used for the example below)<br /> */ //In: example/tree/get-nodes.php add /remark: require_once("../JSON.php"); ... ... ... //echo json_encode($nodes); $json = new Services_JSON(); echo $json->encode($nodes);
Not all of the samples are linked on the examples index page. You will need to browse the directories manually to discover some other examples Ext JS includes in the distribution package.