Day 1 - Getting started with ExtJS screen library
Today we take a look at the ExtJS screen library and how to get started using it within a Catalyst web application.
Don't forget to come back on Day 9 for a more advanced example by jasonk in "Catalyst with Ext+Ajax: Editable Data Grids" http://catalyst.perl.org/calendar/2007/9
What is ExtJS?
- * window
- * layout
- * tabs
- * form
- * toolbar
- * menu
- * tree
- * combobox
- * grid
The full range is listed here http://extjs.com/learn/Ext_Extensions
The easiest way to see what is possible is to watch it in action:
- * desktop http://extjs.com/deploy/dev/examples/desktop/desktop.html
- * feed viewer http://extjs.com/deploy/dev/examples/feed-viewer/view.html
- * photo organiser http://extjs.com/deploy/dev/examples/organizer/organizer.html
For more examples see http://extjs.com/deploy/dev/examples/
What web browsers does it work on?
- * Internet Explorer 6+
- * Firefox 1.5+ (PC, Mac)
- * Safari 2+
- * Opera 9+ (PC, Mac)
- * native Ext
- * YUI
- * jQuery
- * Prototype/Script.aculo.us
For new code, I'd recommend native Ext as it is faster to load.
There are more details and a pretty picture of the design at http://extjs.com/learn/Ext_FAQ#What_other_libraries_are_required_to_run_Ext.3F
Downloading and installing the ExtJS library
Download ExtJS 1.1.1 from http://extjs.com/download
The stable release, used in this article, is 1.1.1 and that's the one you need. The latest development release is Ext 2.0 but be aware that it has a different object model to Ext 1.1 and many of the tutorials, docs and code on the site still relate to 1.1. Once the widgets and documentation have been done for 2.0 I expect there will be a rapid shift over in the user community. More details at http://extjs.com/learn/Ext_1_to_2_Migration_Guide
If you're on Linux, install ExtJS to your web server document root, e.g. /var/www/html/ext-1.1.1. When you want to use it in a Catalyst project create a symbolic link from your root/static directory
$ ln -s /var/www/html/ext-1.1.1 root/static/
Otherwise, you can simply unzip the whole lot below root/static.
When running the Catalyst test server, it will expect to find the files there.
Manuals and learning materials
Bookmark and early on read through the community manual http://extjs.com/learn/Ext_Manual.
The archive comes with an ExtJS API reference manual. You can open ext- 1.1.1/docs/index.html in a browser or if you installed it under your Linux web server root it should be accessible at http://myserver/ext-1.1.1/docs/. It's also online at http://extjs.com/deploy/ext/docs/index.html. Use this to look up methods and attributes for ExtJS objects.
Adding ExtJS to a web page
In the body section use classes for styling
<body class="xtheme-gray" >
Use named <div> tags to identify content that ExtJS will enhance
<div id="container"><div id="content" class="welcome"> ... </div></div>
Note the prototype object-based approach used to create the 'Thescreen' object. This helps standardise objects and avoid memory leaks. See http://extjs.com/learn/Manual:Intro:Class_Design for further explanation.
I've provided a simple working example you can use as a starting point for writing ExtJS Catalyst applications. It provides code, a menu, a couple of pages and a set of templates initially generated using the Catalyst helpers to give a portal page.
The ExtJS Catalyst sample app is accessible at http://www.dragonstaff.co.uk/extjs/home
Example application code
You can check out the code from the Catalyst repository with
svn co http://dev.catalystframework.org/repos/Catalyst/trunk/examples/ExtJS
Run it with
perl script/extjs_server.pl -k
then browse to e.g. http://myserver:3000. Read the comments on the screens and in the code.
Form Architecture Considerations
You have a choice between implementing traditional "round trip" web pages and client-server AJAX dynamic web pages seen on Web 2.0 sites.
In the "round trip" case, the user browses to a page, clicks a submit button to post data to a server, HTML is sent back then the new page displays. You can continue to do this with templates and use ExtJS to enhance the appearance and add auto-completers to input fields.
In the second case, you send HTML back once for the first page and then use ExtJS to respond to events like button clicks to trigger display changes and send/retrieve data to the server via asynchronous data transfers. The ExtJS Form widget http://extjs.com/learn/Ext_Manual#Forms handles this and can automatically perform front-end data validation and display input warnings from the backend. See http://extjs.com/deploy/dev/examples/#sample-7 and look at the .js files. It's also possible to generate a form dynamically from an XML or JSON definition in a data source, so you could hold your form definitions in a database and serve them up from a Catalyst data handler.
peterdragon - Peter Edwards <email@example.com>