In this chapter, we will cover the basics of Ext and what it can do for us. If you’re accustom to the standard web development, then you’ll be excited when you learn about the elegance in the architecture of Ext, just as I was. Unlike other JavaScript libraries, Ext handles the foundation for you, so with only a few lines of code, you can have a fully functional user interface. In this chapter, we will cover:
- What Ext does and why you’ll love using it
- How to get Ext and start using it in your web applications
- Using “adapters” to allow Ext to co-exist with other JavaScript libraries
- Taking advantage of AJAX technology
- Displaying Ext objects in your own language
About Ext
We will be working with the most recent release version of Ext which, at the time of writing, is the 2.x branch. The change from 1.x to 2.x was a major refactoring that included taking full advantage of the newly-created Component model, along with renaming many of the components to provide better organization. These changes have made 1.x code mostly incompatible with 2.x and vice versa (an upgrade guide that explains in more detail what has changed is available on the Ext web site). The 3.x branch is backwards-compatible with 2.x and compatible with everything that we will cover in this book. The Ext development team is dedicated to making future releases backwards-compatible.
The Ext library started out as an extension to the moderately popular, yet very powerful Yahoo User Interface library, providing what the YUI library lacked: an easy to use API (Application Programming Interface), and real world widgets. Even though the Yahoo User Interface tried to focus on the ‘User Interface’, it didn’t contain much that was useful right out of the box. It wasn’t long before Ext had developers and open-source contributors chipping in their knowledge to turn the basic YUI extension into one of the most powerful client-side application development libraries around. Ext provides an easy-to-use, rich user interface, much like you would find in a desktop application. This lets the web developers concentrate on the functionality of web applications instead of the technical caveats. The examples given on the Ext website speak the loudest about how amazing this library is:
http://www.extjs.com/deploy/dev/examples/
One of the most striking examples is the Simple Tasks task-tracking program, which utilizes a Google Gears database.
Ext and AJAX
The term AJAX (Asynchronous JavaScript and XML) is an overly-complicated acronym for saying that processes can take place in the background while the user is performing other tasks. A user could be filling out a form while a grid of data is loading—both can happen at the same time, with no waiting around for the page to reload.
Getting Ext
Everything we will need can be downloaded from the Ext website, at http://www.extjs.com/download. 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.
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 book, 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. It also contains a version used for development referred to as the debug version, which is what we will primarily use. The debug version makes it easier to locate errors in your code because it’s uncompressed and will report back relevant line numbers for errors. When it’s time to release our creation to the general public, we can switch our application to use the standard ext-all, and everything will continue to work as it was.
Included in the SDK file are a specification of dependencies, documentation, example code, and more. The adapter and resources folders shown in bold are required for Ext to work properly; everything else is just for development purposes.
- 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.
Tidak ada komentar:
Posting Komentar