I’m teaching myself Ext JS, but it’s not always the easiest framework to wrap your head around. That said, there is a wonderful site full of examples of specific techniques, not just API’s.

Saki's Ext Examples Page divides the examples into categories like Application Design > Complex Data Binding or Drag & Drop > Free Drag with State.

However, you don’t just get a monolithic example. You can run the example and see the source code divided by language. Be sure to check out the Details and Further Reading links in the lower-left pane.

Remember that Ext JS has been folded into the Sencha project and the examples are written to Ext JS 1/2, not 4, the current release. Sencha provides a set of current examples, albeit not as elegantly broken down for easy consumption. Those caveats aside, these examples can help you understand the structure and design of Ext JS, so it's still a worthy read for those of us coming from other libraries.

It’s official, ExtJS 2.0 has landed.  ExtJS is one of the best toolkits out there for achieving ajax applications that rival desktop applications in interface richness.  Some of the new features in 2.0.

•  Grouping & Group Summary fields: Allows you to group related grid items and create summary rows.  Data sorts within each group set instead of across the grid.
• Scrolling tabs: You can now optimize screen Real Estate by allowing tabs to scroll off the tab par (Ala firefox)
• Anchor Layouts: Tack the dimensions of form elements to their parent container.
• Column Tree: The best of both worlds, integrate the powerful extjs grid & tree widgets

I should also point out that ExtJS continues its tradition of excellent documentation with a new API documentation center and rich set of demo applications to work from.   Check out ExtJS 2.0 here:http://extjs.com/blog/2007/12/04/ext-20-final-released/

Perhaps the strongest widget in the Ext toolbox is the powerful grid tool.  In 2.0 it gets even stronger.

Some of the new features:

• Ability to collapse entire grid pane
• Ability to hide and display columns from within the interface
• Support for totals, averages and other summary columns
• Group rows by sort.

ExtJS 2.0 is already in beta & ready for preliminary development today and the production release is just around the corner.  Check it out here:

http://extjs.com/

Here’s a great example of an ExtJS interface to a real application.  While Ext is much better suited to RIA’s and admin screens than a full blown website frontend.  This is an admirable and polished attempt to build an interface to a well known tool using a powerful Javascript framework.  It’s also a great thing to disect and understand.

Find the Theme Here: http://extjswordpress.net/ 

Via   Weblog Tools Collection

The Ext team is proud to announce that Ext v2.0 Beta 1 is available
for download. This release of the Ext framework features updated portal
and desktop examples, documentation updates, and bug fixes.

New Sample Application Updates

In our last release, we introduced two new sample applications which
were truly a hit with the development community. The two applications,
Web Desktop and Customizing: Portals were excellent examples of the
capabilities of the new Ext 2.0 framework. For the beta release, we
have dramatically improved the features and functionality of both. The
Web Desktop has been drastically enhanced to include a start menu as
well as functional icons on the desktop. It truly looks like you’re
working within an operating system like Windows.

Available from EXTjs.com

The first Alpha of EXT 2.0 has landed  Some of the new features are:

• Scrolling Tabs
• Highly configurable single-level column grouping capabilities as well as summary rollups at the group level.
• Anchor layout in forms to ensure a consistent size and position for form fields regardless of browser size.
• Treeviews that support additional columns for each leaf node.

Along with launch of 2.0 alpha, there’s a revised API documentation system with a streamlined ability for bookmarking & new samples.

Find More information here:
http://extjs.com/blog/2007/09/28/ext-20-alpha-release/

Earlier this month I posted on a powerful ExtJS extension for handling multiple file uploads. Today we will delve deeper into this widget and explore handling the uploads on the server end.

To get started we will need a copy of ExtJS 1.1.1 and a copy of Saki’s Upload Form widget. You’ll also probably want a copy of the widget stylesheet & the Icon collection used. Place the upload form widget in a “extensions” directory inside of the extJS directory and we’re ready to begin. The stylesheet goes in the CSS directory & icons go in images/icons.

• CSS
  • uploadform.css
• JS
  • ext
    • extensions
• uploads
• upload.php
• icons

Step 1, the deploying the widget:

We need to embed the widget inside of web page. This is done by creating an empty div that will act as the widgets container when it is instantiated through javascript. We then need to instantiate the widget in the onReady method.

The Code:
<html><head>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
<link id="theme" rel="stylesheet" type="text/css" href="ext/resources/css/xtheme-default.css">
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="ext/extensions/Ext.ux.UploadForm.js"> </script>
<link rel="stylesheet" type="text/css" href="css/uploadform.css">
<style type="text/css">
#upform {
position: relative;
left: 14px;
width: 180px;
padding: 10px;
border: 1px solid silver;
background-color: #D3E6EA;
margin-bottom: 24px;
}</style>
</head>
<body>
<div id="upform">
</div>
<script type="text/javascript">
// set blank image to local file
Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
// run this function when document becomes ready
Ext.onReady(function() {
var iconPath = 'icons/';
Ext.QuickTips.init();
var upform = new Ext.ux.UploadForm('upform', {
autoCreate: true
, url: 'upload.php'
, method: 'post'
, maxFileSize: 1048570
, baseParams: {
cmd:'upload'
, path: 'root'
}
});
}) // end of onReady
// end of file
</script>
</body>
</html>

Most important in the code is the following:

• The div <div id=”upform”></div> is the div to be replaced by the widget.
• url:upload.php sets the url of the server script to handle file uploads.
• maxFileSize sets an upward limit on file size.

Next we have the server code:

<?php // Where the file is going to be placed
$target_path = "uploads/";
$output = "{\"success\" : falseThe COde }";
foreach( $_FILES as $Fileid){
$target_path = $target_path . basename( $Fileid['name']);
if( move_uploaded_file($Fileid['tmp_name'], $target_path) ) {
$output = "{\"success\" : true }";
}
}
echo $output; ?>

This simply iterates through the uploaded files, moves them into the uploads directory and returns a json object representing success or failure.

We’ll explore this in more depth in the future.  I need to stress that this is not code for deployment.  It lacks even the most rudimentary security checks and is a hackers dream.  Next time we’ll discuss implementing the upload progress bar.

Rich, powerful AJAX tables provide a greater impact in usability to web applications than just about any other widget.  One of the best of these is the extJS table. Some highlights:

• Inline editing based on data type (calendar for date, spinner for numeric etc)
• Validation of inline edits
• Custom sorts
• Able to utilize existing tables, XML data files & JSON data
• Paging & Remote data support

More information on ExtJS table will be coming in part 3 of the extJS POG tutorial

In part one we discussed the general layout and design of the application. In this chapter we will build the server side in the storage for the application using the powerful PHP object generator (POG).

To get started with POG point your web browser to www.phpobjectgenerator.com and fill out the form to create each of your objects. Download the zip file provided for each object you create. Note: The zip files may not open properly in Mac OS X

To get things started here are the objects for the current project.

Now, unzip all of the POG zip files into the same directory in your development server. It will gripe about overwriting some files each time, that’s ok. The /objects folder should now contain the following files.

• class.database.php
• class.feature.php
• class.pog_base.php
• class.role.php
• class.task.php
• class.user.php
• ignore_objects.txt

Now we need to get the Database in on the action. Go to your local MySQL installation and create a new database, user & password with full schema permissions. Edit the configuration.php file located in the POG root and change the following lines to match your database settings.

$configuration['db'] = ‘pogext’; // database name
$configuration['host'] = ‘localhost’; // database host
$configuration['user'] = ‘username’; // database user
$configuration['pass'] = ‘password’; // database password
$configuration['port'] = ’3306′; // database port

You also need to change the very last line of the file to point to the POG plugins directory. On my dev machine it was:

$configuration['plugins_path'] = ‘C:\xampp\htdocs\extjs\plugins’;

At this point, pog is ready tor run and create our database. Point a webbrowser to the /setup directory and hit the big POG ME UP button. This will create all of our database tables and provide us with a temporary scaffold interface for entering data.

Next Time We’ll start using POG to build the login and authentication systems.

File Uploads with Progress Bars & Batch File uploads are two incredibly useful tools for the AJAX toolbox. This widget from Ariadne.com packs a powerful punch for adding these features to your projects.

AJAX Upload Widget