Merged in from DEV trunk...

KTS-3095 "Backslashes, ampersands etc and different characters in the Workflow and Document type names with ' " <> | ; in its name" Fixed. Committed By: Conrad Vermeulen Reviewed By: Megan Watson KTS-3088 "Linking a document to itself does not create a link." Fixed. Added a check to return an error if the document is trying to link to itself. Committed By: Jonathan Byrne Reviewed By: Megan Watson KTC-387 "Duplication of the log-in footer after logging out from languages other than English." Fixed. Updated dulicate tags due to "2007 to 2008" issue. Committed By: Kevin Fourie Reviewed By: Jonathan Byrne KTS-673 "The search algorithm needs some work" Added. Examples folder was missing. KTS-2901 "Search2: the quick search options are not clickable" Updated. This should resolve the javascript error. Committed By: Conrad Vermeulen Reviewed By: Megan Watson KTC-400 "Exception thrown when clicking on a document's version history link" Fixed. Added function to check plugin availability Committed By: Megan Watson Reviewed By: Conrad Vermeulen KTS-3090 "Get an error when trying to view all groups on your active directory server." Fixed. Added error checking. Committed by: Megan Watson Reviewed by: Conrad Vermeulen git-svn-id: https://kt-dms.svn.sourceforge.net/svnroot/kt-dms/STABLE/trunk@8180 c91229c3-7414-0410-bfa2-8a42b809f60b

Merged in from DEV trunk...
KTS-3095 "Backslashes, ampersands etc and different characters in the Workflow and Document type names with ' " <> | ; in its name" Fixed. Committed By: Conrad Vermeulen Reviewed By: Megan Watson KTS-3088 "Linking a document to itself does not create a link." Fixed. Added a check to return an error if the document is trying to link to itself. Committed By: Jonathan Byrne Reviewed By: Megan Watson KTC-387 "Duplication of the log-in footer after logging out from languages other than English." Fixed. Updated dulicate tags due to "2007 to 2008" issue. Committed By: Kevin Fourie Reviewed By: Jonathan Byrne KTS-673 "The search algorithm needs some work" Added. Examples folder was missing. KTS-2901 "Search2: the quick search options are not clickable" Updated. This should resolve the javascript error. Committed By: Conrad Vermeulen Reviewed By: Megan Watson KTC-400 "Exception thrown when clicking on a document's version history link" Fixed. Added function to check plugin availability Committed By: Megan Watson Reviewed By: Conrad Vermeulen KTS-3090 "Get an error when trying to view all groups on your active directory server." Fixed. Added error checking. Committed by: Megan Watson Reviewed by: Conrad Vermeulen git-svn-id: https://kt-dms.svn.sourceforge.net/svnroot/kt-dms/STABLE/trunk@8180 c91229c3-7414-0410-bfa2-8a42b809f60b
kevin_fourie
1 parent 7c1b385d
Showing 190 changed files with 7943 additions and 2 deletions
lib/plugins/plugin.inc.php
lib/plugins/pluginutil.inc.php
plugins/ktstandard/KTDocumentLinks.php
plugins/ktstandard/ldap/ldapbaseauthenticationprovider.inc.php
thirdpartyjs/extjs/examples/README.txt
thirdpartyjs/extjs/examples/debug/debug-console.html
thirdpartyjs/extjs/examples/debug/inspector.gif
thirdpartyjs/extjs/examples/dialog/blog.html
thirdpartyjs/extjs/examples/dialog/comments.txt
thirdpartyjs/extjs/examples/dialog/hello.html
thirdpartyjs/extjs/examples/dialog/hello.js
thirdpartyjs/extjs/examples/dialog/images/comment-bg.gif
thirdpartyjs/extjs/examples/dialog/images/comment.gif
thirdpartyjs/extjs/examples/dialog/images/warning.gif
thirdpartyjs/extjs/examples/dialog/layout.html
thirdpartyjs/extjs/examples/dialog/layout.js
thirdpartyjs/extjs/examples/dialog/msg-box.html
thirdpartyjs/extjs/examples/dialog/msg-box.js
thirdpartyjs/extjs/examples/dialog/post.css
thirdpartyjs/extjs/examples/dialog/post.js
@@ -652,6 +652,13 @@ class KTPlugin {
     function run_setup() {
         return true;
     }
+    
+    function setAvailability($sNamespace, $bAvailable = true){
+    	$aValues = array('unavailable' => $bAvailable);
+    	$aWhere = array('namespace' => $sNamespace);
+    	$res = DBUtil::whereUpdate('plugins', $aValues, $aWhere);
+    	return $res;
+    }
  
     function stripKtDir($sFilename) {
         if (strpos($sFilename, KT_DIR) === 0 ||strpos($sFilename, realpath(KT_DIR)) === 0) {
@@ -762,3 +769,4 @@ class KTPlugin {
     }
 }
  
+?>
 \ No newline at end of file
@@ -218,7 +218,7 @@ class KTPluginUtil {
         // Allow for templates that don't correctly link to the plugin
         $query = "SELECT * FROM plugin_helper h
             LEFT JOIN plugins p ON (p.namespace = h.plugin)
-            WHERE h.classtype='locations' AND (disabled = 0 OR disabled IS NULL)";
+            WHERE h.classtype='locations' AND (disabled = 0 OR disabled IS NULL) AND unavailable = 0";
  
         $aLocations = DBUtil::getResultArray($query);
  
@@ -288,6 +288,18 @@ class KTDocumentLinkAction extends KTDocumentAction {
  
     // select a type for the link
     function do_type_select() {
+        
+        //Checking to see if the document is being linked to itself and returning an error if it is.
+        $iTempParentDocId = $_REQUEST['fDocumentId'];
+        $aTempDocuments = $_REQUEST['linkselection'];
+        foreach ($aTempDocuments as $iTempDocId)
+        {
+	        if($iTempParentDocId == $iTempDocId)
+	        {
+	        	$this->errorRedirectToMain(_kt('A document cannot be linked to itself.'));
+	        }
+        }
+        
         $this->oPage->setBreadcrumbDetails(_kt("link"));
  
         $sType = (isset($_REQUEST['linktype'])) ? $_REQUEST['linktype'] : 'internal';
@@ -504,11 +504,15 @@ class KTLDAPBaseAuthenticationProvider extends KTAuthenticationProvider {
         $fields = array();
         $fields[] = new KTStringWidget(_kt("Group's name"), _kt("The group's name, or part thereof, to find the group that you wish to add"), 'name', '', $this->oPage, true);
  
-        $oAuthenticator = $this->getAuthenticator($oSource);
         $name = KTUtil::arrayGet($_REQUEST, 'name');
         if (!empty($name)) {
             $oAuthenticator = $this->getAuthenticator($oSource);
             $aSearchResults = $oAuthenticator->searchGroups($name);
+
+            if(PEAR::isError($aSearchResults)){
+                $this->addErrorMessage($aSearchResults->getMessage());
+                $aSearchResults = array();
+            }
         }
  
         $aTemplateData = array(
@@ -973,6 +977,11 @@ class KTLDAPBaseAuthenticator extends Authenticator {
         }
         $sFilter = sprintf('(&(objectClass=group)(cn=*%s*))', $sSearch);
         $oResults = $this->oLdap->search($rootDn, $sFilter, $aParams);
+
+        if(PEAR::isError($oResults)){
+            return $oResults;
+        }
+
         $aRet = array();
         foreach($oResults->entries() as $oEntry) {
             $aAttr = $oEntry->attributes();
+The examples can be browsed by opening index.html in the docs folder.
+
+Some examples use XHR. Those examples will need to be on a webserver to run since XHR can't access the local file system.
 \ No newline at end of file
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+<title>Ext Debug Console</title>
+<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
+
+    <!-- GC --> <!-- LIBS -->     <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>     <!-- ENDLIBS -->
+
+    <script type="text/javascript" src="../../ext-all-debug.js"></script>
+
+<link rel="stylesheet" type="text/css" href="../examples.css" />
+
+</head>
+<body>
+<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
+    <h1>Ext Debug Console</h1>
+    <div style="width:700px">
+    <p>Included in ext-all-debug.js is the Ext Debug Console. It offers a limited amount of <a href="http://getfirebug.com">FireBug</a>
+        functionality cross browser. The most important feature is the "DOM Inspector" and CSS and DOM attribute editing. In any browser where "console"
+        is not already defined, the Ext console will handle console.log(), time() and other calls.
+    </p>
+   <p>
+       <b>Try It</b><br/>
+       This page includes ext-all-debug.js and some test markup so you can try it out. Hit <b>control+shift+home</b> to bring up the console or click on the image below.
+   </p>
+   <a href="#" onclick="Ext.log('Hello from the Ext console.');return false;"><img src="inspector.gif" width="600" height="337" style="margin:15px;"/></a>
+
+    <p>
+        The full source is available in the "source" directory of the Ext download.
+    </p>
+    <hr />
+    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.</p>
+    <p>Donec quis dui. Sed imperdiet. Nunc consequat, est eu sollicitudin gravida, mauris ligula lacinia mauris, eu porta dui nisl in velit. Nam congue, odio id auctor nonummy, augue lectus euismod nunc, in tristique turpis dolor sed urna. Donec sit amet quam eget diam fermentum pharetra. Integer tincidunt arcu ut purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla blandit malesuada odio. Nam augue. Aenean molestie sapien in mi. Suspendisse tincidunt. Pellentesque tempus dui vitae sapien. Donec aliquam ipsum sit amet pede. Sed scelerisque mi a erat. Curabitur rutrum ullamcorper risus. Maecenas et lorem ut felis dictum viverra. Fusce sem. Donec pharetra nibh sit amet sapien.</p>
+    <p>Aenean ut orci sed ligula consectetuer pretium. Aliquam odio. Nam pellentesque enim. Nam tincidunt condimentum nisi. Maecenas convallis luctus ligula. Donec accumsan ornare risus. Vestibulum id magna a nunc posuere laoreet. Integer iaculis leo vitae nibh. Nam vulputate, mauris vitae luctus pharetra, pede neque bibendum tellus, facilisis commodo diam nisi eget lacus. Duis consectetuer pulvinar nisi. Cras interdum ultricies sem. Nullam tristique. Suspendisse elementum purus eu nisl. Nulla facilisi. Phasellus ultricies ullamcorper lorem. Sed euismod ante vitae lacus. Nam nunc leo, congue vehicula, luctus ac, tempus non, ante. Morbi suscipit purus a nulla. Sed eu diam.</p>
+    <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras imperdiet felis id velit. Ut non quam at sem dictum ullamcorper. Vestibulum pharetra purus sed pede. Aliquam ultrices, nunc in varius mattis, felis justo pretium magna, eget laoreet justo eros id eros. Aliquam elementum diam fringilla nulla. Praesent laoreet sapien vel metus. Cras tempus, sapien condimentum dictum dapibus, lorem augue fringilla orci, ut tincidunt eros nisi eget turpis. Nullam nunc nunc, eleifend et, dictum et, pharetra a, neque. Ut feugiat. Aliquam erat volutpat. Donec pretium odio nec felis. Phasellus sagittis lacus eget sapien. Donec est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
+    <p>Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor ullamcorper. Sed tincidunt molestie enim. Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula elit. Proin quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis. Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non erat. Nulla ultrices vestibulum quam.</p>
+    <p>Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque tortor, sed pellentesque sem enim id metus. Maecenas at pede. Nulla velit libero, dictum at, mattis quis, sagittis vel, ante. Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac nulla. In risus.</p>
+    <p>Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis pulvinar, odio turpis dapibus elit, in tincidunt turpis felis nec libero. Nam vestibulum tempus ipsum. In hac habitasse platea dictumst. Nulla facilisi. Donec semper ligula. Donec commodo tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id velit ut velit varius commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Fusce ornare pellentesque libero. Nunc rhoncus. Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo sem lobortis elit, ac sollicitudin ipsum neque nec ante.</p>
+    <p>Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum sodales. Donec varius dapibus nisl. Praesent at velit id risus convallis bibendum. Aliquam felis nibh, rutrum nec, blandit non, mattis sit amet, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam varius dignissim nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>
+</div></body>
+</html>
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+<title>Comment Dialog Example</title>
+<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
+
+    <!-- GC --> <!-- LIBS -->     <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>     <!-- ENDLIBS -->
+
+    <script type="text/javascript" src="../../ext-all.js"></script>
+
+<script type="text/javascript" src="post.js"></script>
+<link rel="stylesheet" type="text/css" href="post.css" />
+
+</head>
+<body>
+<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
+   <div class="post">
+        <h2>Comment Dialog Example</h2>
+        <div id="comment-box">
+        <ul>
+            <li><a id="post-comment" href="#">Post Comment</a></li>
+            <li><a id="view-comments" href="#">View Comments</a></li>
+        </ul>
+        </div>
+        <p>This is a more complex example that shows how to implement a comment dialog similar to the one on <a href="http://www.jackslocum.com/yui/" target="_blank">my blog<a/>.
+          The dialog retrieves the comments in JSON format and renders them to the "View Comments" tab. The "Post Comment" tab posts the comment
+          to a file on the server that just returns a dummy response (not what you type in) in JSON format. The reason for the dummy response
+          is so the example can easily be dropped in whatever your environment is and work.</p>
+        <p>Note that the js is not minified so it is readable. See <a href="post.js">post.js</a> for the full source code.</p>
+        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.</p>
+        <p>Donec quis dui. Sed imperdiet. Nunc consequat, est eu sollicitudin gravida, mauris ligula lacinia mauris, eu porta dui nisl in velit. Nam congue, odio id auctor nonummy, augue lectus euismod nunc, in tristique turpis dolor sed urna. Donec sit amet quam eget diam fermentum pharetra. Integer tincidunt arcu ut purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla blandit malesuada odio. Nam augue. Aenean molestie sapien in mi. Suspendisse tincidunt. Pellentesque tempus dui vitae sapien. Donec aliquam ipsum sit amet pede. Sed scelerisque mi a erat. Curabitur rutrum ullamcorper risus. Maecenas et lorem ut felis dictum viverra. Fusce sem. Donec pharetra nibh sit amet sapien.</p>
+        <p>Aenean ut orci sed ligula consectetuer pretium. Aliquam odio. Nam pellentesque enim. Nam tincidunt condimentum nisi. Maecenas convallis luctus ligula. Donec accumsan ornare risus. Vestibulum id magna a nunc posuere laoreet. Integer iaculis leo vitae nibh. Nam vulputate, mauris vitae luctus pharetra, pede neque bibendum tellus, facilisis commodo diam nisi eget lacus. Duis consectetuer pulvinar nisi. Cras interdum ultricies sem. Nullam tristique. Suspendisse elementum purus eu nisl. Nulla facilisi. Phasellus ultricies ullamcorper lorem. Sed euismod ante vitae lacus. Nam nunc leo, congue vehicula, luctus ac, tempus non, ante. Morbi suscipit purus a nulla. Sed eu diam.</p>
+        <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras imperdiet felis id velit. Ut non quam at sem dictum ullamcorper. Vestibulum pharetra purus sed pede. Aliquam ultrices, nunc in varius mattis, felis justo pretium magna, eget laoreet justo eros id eros. Aliquam elementum diam fringilla nulla. Praesent laoreet sapien vel metus. Cras tempus, sapien condimentum dictum dapibus, lorem augue fringilla orci, ut tincidunt eros nisi eget turpis. Nullam nunc nunc, eleifend et, dictum et, pharetra a, neque. Ut feugiat. Aliquam erat volutpat. Donec pretium odio nec felis. Phasellus sagittis lacus eget sapien. Donec est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
+        <p>Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor ullamcorper. Sed tincidunt molestie enim. Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula elit. Proin quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis. Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non erat. Nulla ultrices vestibulum quam.</p>
+        <p>Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque tortor, sed pellentesque sem enim id metus. Maecenas at pede. Nulla velit libero, dictum at, mattis quis, sagittis vel, ante. Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac nulla. In risus.</p>
+        <p>Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis pulvinar, odio turpis dapibus elit, in tincidunt turpis felis nec libero. Nam vestibulum tempus ipsum. In hac habitasse platea dictumst. Nulla facilisi. Donec semper ligula. Donec commodo tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id velit ut velit varius commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Fusce ornare pellentesque libero. Nunc rhoncus. Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo sem lobortis elit, ac sollicitudin ipsum neque nec ante.</p>
+        <p>Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum sodales. Donec varius dapibus nisl. Praesent at velit id risus convallis bibendum. Aliquam felis nibh, rutrum nec, blandit non, mattis sit amet, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam varius dignissim nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>
+    </div>
+    
+    <!-- comments dialog -->
+    <div id="comments-dlg" style="visibility:hidden;">
+        <div class="x-dlg-hd">Comments</div>
+        <div class="x-dlg-bd">
+            <div id="post-tab" class="x-dlg-tab" title="Post Comment">
+                <div class="inner-tab">
+                    <form action="" method="post" id="comment-form" onsubmit="return false;">
+                    <input id="postId" type="hidden" name="postId" value="1" />
+                    <p>
+                    <label for="author"><small>Name</small></label>
+                    <input class="textinput" type="text" name="author" id="author" value="" size="22" tabindex="1" />
+                    </p>
+
+                    <p><label for="email"><small>E-mail (will not be published)</small></label>
+                    <input class="textinput" type="text" name="email" id="email" value="" size="22" tabindex="2" />
+                    </p>
+
+                    <p><label for="url"><small>Website</small></label>
+                    <input class="textinput" type="text" name="url" id="url" value="" size="22" tabindex="3" />
+                    </p>
+                    <p>
+                    <label for="comment"><small>Comment</small></label>
+                    <textarea name="comment" id="comment" tabindex="4" cols="40" rows="10"></textarea>
+                    </p>
+                    </form>
+                </div>
+            </div>
+            <div id="view-tab" class="x-dlg-tab" title="View Comments">
+                <ul id="comments-list" class="inner-tab">
+                </ul>
+            </div>
+        </div>
+        <div class="x-dlg-ft">
+            <div id="dlg-msg">
+                <span id="post-error" class="posting-msg"><img src="images/warning.gif" width="16" height="16" align="absmiddle" />&nbsp;<span id="post-error-msg"></span></span>
+                <span id="post-wait" class="posting-msg"><img src="../../images/grid/loading.gif" width="16" height="16" align="absmiddle" />&nbsp;Posting Comment...</span>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
+{"comments": [{
+		id: "1", 
+		author: "Jack Slocum", 
+		link: "http://www.jackslocum.com/", 
+		date: "October 29th, 2006 9:21pm", 
+		text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa."
+	},{
+		id: "2", 
+		author: "Jack Slocum", 
+		link: "http://www.jackslocum.com/", 
+		date: "October 29th, 2006 9:21pm", 
+		text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa."
+	},{
+		id: "3", 
+		author: "Jack Slocum", 
+		link: "http://www.jackslocum.com/", 
+		date: "October 29th, 2006 9:21pm", 
+		text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa."
+	},{
+		id: "4", 
+		author: "Jack Slocum", 
+		link: "http://www.jackslocum.com/", 
+		date: "October 29th, 2006 9:21pm", 
+		text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa."
+	},{
+		id: "5", 
+		author: "Jack Slocum", 
+		link: "http://www.jackslocum.com/", 
+		date: "October 29th, 2006 9:21pm", 
+		text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa."
+	},{
+		id: "6", 
+		author: "Jack Slocum", 
+		link: "http://www.jackslocum.com/", 
+		date: "October 29th, 2006 9:21pm", 
+		text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa."
+	},{
+		id: "7", 
+		author: "Jack Slocum", 
+		link: "http://www.jackslocum.com/", 
+		date: "October 29th, 2006 9:21pm", 
+		text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa."
+	}	
+]}
 \ No newline at end of file
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+<title>Hello World Dialog Example</title>
+<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
+
+    <!-- GC --> <!-- LIBS -->
+    <script type="text/javascript" src="../../adapter/yui/yui-utilities.js"></script>
+    <script type="text/javascript" src="../../adapter/yui/ext-yui-adapter.js"></script>
+    <!-- ENDLIBS -->
+
+    <script type="text/javascript" src="../../ext-all.js"></script>
+
+    <script language="javascript" src="hello.js"></script>
+
+<!-- Common Styles for the examples -->
+<link rel="stylesheet" type="text/css" href="../examples.css" />
+</head>
+<body>
+<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
+
+<h1>Hello World Dialog</h1>
+<p>This example shows how to create a very simple modal BasicDialog with "autoTabs".</p>
+<input type="button" id="show-dialog-btn" value="Hello World" /><br /><br />
+<p>Note that the js is not minified so it is readable. See <a href="hello.js">hellos.js</a> for the full source code.</p>
+Here's snapshot of the code that creates the dialog:
+<pre class="code"><code>dialog = new Ext.BasicDialog("hello-dlg", {
+        modal:true,
+        autoTabs:true,
+        width:500,
+        height:300,
+        shadow:true,
+        minWidth:300,
+        minHeight:300
+});
+dialog.addKeyListener(27, dialog.hide, dialog);
+dialog.addButton('Close', dialog.hide, dialog);
+dialog.addButton('Submit', dialog.hide, dialog).disable();
+</code></pre>
+
+    <!-- The dialog is created from existing markup.
+         The inline styles just hide it until it created and should be in a stylesheet -->
+    <div id="hello-dlg" style="visibility:hidden;position:absolute;top:0px;">
+    <div class="x-dlg-hd">Hello Dialog</div>
+    <div class="x-dlg-bd">
+        <!-- Auto create tab 1 -->
+        <div class="x-dlg-tab" title="Hello World 1">
+            <!-- Nested "inner-tab" to safely add padding -->
+            <div class="inner-tab">
+                 Hello...<br><br><br>
+            </div>
+        </div>
+        <!-- Auto create tab 2 -->
+        <div class="x-dlg-tab" title="Hello World 2">
+            <div class="inner-tab">
+            ... World!
+            </div>
+        </div>
+        </div>
+    </div>
+</div>
+</body>
+</html>
+/*
+ * Ext JS Library 1.1 Beta 1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ * licensing@extjs.com
+ * 
+ * http://www.extjs.com/license
+ */
+
+// create the HelloWorld application (single instance)
+var HelloWorld = function(){
+    // everything in this space is private and only accessible in the HelloWorld block
+    
+    // define some private variables
+    var dialog, showBtn;
+    
+    // return a public interface
+    return {
+        init : function(){
+             showBtn = Ext.get('show-dialog-btn');
+             // attach to click event
+             showBtn.on('click', this.showDialog, this);
+        },
+       
+        showDialog : function(){
+            if(!dialog){ // lazy initialize the dialog and only create it once
+                dialog = new Ext.BasicDialog("hello-dlg", { 
+                        autoTabs:true,
+                        width:500,
+                        height:300,
+                        shadow:true,
+                        minWidth:300,
+                        minHeight:250,
+                        proxyDrag: true
+                });
+                dialog.addKeyListener(27, dialog.hide, dialog);
+                dialog.addButton('Submit', dialog.hide, dialog).disable();
+                dialog.addButton('Close', dialog.hide, dialog);
+            }
+            dialog.show(showBtn.dom);
+        }
+    };
+}();
+
+// using onDocumentReady instead of window.onload initializes the application
+// when the DOM is ready, without waiting for images and other resources to load
+Ext.onReady(HelloWorld.init, HelloWorld, true);
 \ No newline at end of file
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+<title>Layout Dialog Example</title>
+<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
+
+    <!-- GC --> <!-- LIBS -->     <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>     <!-- ENDLIBS -->
+    <script type="text/javascript" src="../../ext-all.js"></script>
+
+<script language="javascript" src="layout.js"></script>
+
+<!-- Common Styles for the examples -->
+<link rel="stylesheet" type="text/css" href="../examples.css" />
+</head>
+<body>
+<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
+<h1>Layout Dialog Example</h1>
+<p>This example shows how to create a modal dialog with an embedded BorderLayout using LayoutDialog.</p>
+<input type="button" id="show-dialog-btn" value="Show Dialog" /><br /><br />
+<p>Note that the js is not minified so it is readable. See <a href="layout.js">layout.js</a> for the full source code.</p>
+
+    <!-- dialog is created from existing markup -->
+    <div id="hello-dlg" style="visibility:hidden;">
+	    <div class="x-dlg-hd">Layout Dialog</div>
+	    <div class="x-dlg-bd">
+	        <div id="west" class="x-layout-inactive-content">
+		        West
+		    </div>
+		    <div id="center" class="x-layout-inactive-content" style="padding:10px;">
+                <p>This dialog has the Vista theme applied.</p>
+                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.</p>
+        	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.</p>
+
+		    </div>
+	    </div>
+	</div>
+</body>
+</html>
+/*
+ * Ext JS Library 1.1 Beta 1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ * licensing@extjs.com
+ * 
+ * http://www.extjs.com/license
+ */
+
+
+// create the LayoutExample application (single instance)
+var LayoutExample = function(){
+    // everything in this space is private and only accessible in the HelloWorld block
+    
+    // define some private variables
+    var dialog, showBtn;
+    
+    var toggleTheme = function(){
+        Ext.get(document.body, true).toggleClass('xtheme-gray');
+    };
+    // return a public interface
+    return {
+        init : function(){
+             showBtn = Ext.get('show-dialog-btn');
+             // attach to click event
+             showBtn.on('click', this.showDialog, this);
+             
+        },
+        
+        showDialog : function(){
+            if(!dialog){ // lazy initialize the dialog and only create it once
+                dialog = new Ext.LayoutDialog("hello-dlg", { 
+                        modal:true,
+                        width:600,
+                        height:400,
+                        shadow:true,
+                        minWidth:300,
+                        minHeight:300,
+                        proxyDrag: true,
+                        west: {
+	                        split:true,
+	                        initialSize: 150,
+	                        minSize: 100,
+	                        maxSize: 250,
+	                        titlebar: true,
+	                        collapsible: true,
+	                        animate: true
+	                    },
+	                    center: {
+	                        autoScroll:true,
+	                        tabPosition: 'top',
+	                        closeOnTab: true,
+	                        alwaysShowTabs: true
+	                    }
+                });
+                dialog.addKeyListener(27, dialog.hide, dialog);
+                dialog.addButton('Submit', dialog.hide, dialog);
+                dialog.addButton('Close', dialog.hide, dialog);
+                
+                var layout = dialog.getLayout();
+                layout.beginUpdate();
+                layout.add('west', new Ext.ContentPanel('west', {title: 'West'}));
+	            layout.add('center', new Ext.ContentPanel('center', {title: 'The First Tab'}));
+                // generate some other tabs
+                layout.add('center', new Ext.ContentPanel(Ext.id(), {
+                                        autoCreate:true, title: 'Another Tab', background:true}));
+	            layout.add('center', new Ext.ContentPanel(Ext.id(), {
+                                        autoCreate:true, title: 'Third Tab', closable:true, background:true}));
+	            layout.endUpdate();
+            }
+            dialog.show(showBtn.dom);
+        }
+    };
+}();
+
+// using onDocumentReady instead of window.onload initializes the application
+// when the DOM is ready, without waiting for images and other resources to load
+Ext.EventManager.onDocumentReady(LayoutExample.init, LayoutExample, true);
 \ No newline at end of file
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+<title>MessageBox</title>
+
+<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
+
+<!-- GC --> <!-- LIBS -->     <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>     <!-- ENDLIBS -->
+<script type="text/javascript" src="../../ext-all.js"></script>
+<script type="text/javascript" src="msg-box.js"></script>
+
+<!-- Common Styles for the examples -->
+<link rel="stylesheet" type="text/css" href="../examples.css" />
+</head>
+<body>
+<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
+<h1>MessageBox Dialogs</h1>
+<p>The example shows how to use the MessageBox class. Some of the buttons have animations, some are normal.</p>
+<p>The js is not minified so it is readable. See <a href="msg-box.js">msg-box.js</a>.</p>
+
+<p>
+    <b>Confirm</b><br />
+    Standard Yes/No dialog.
+    <button id="mb1">Show Me</button>
+</p>
+
+<p>
+    <b>Prompt</b><br />
+    Standard prompt dialog.
+    <button id="mb2">Show Me</button>
+</p>
+
+<p>
+    <b>Multi-line Prompt</b><br />
+    A multi-line prompt dialog.
+    <button id="mb3">Show Me</button>
+</p>
+
+<p>
+    <b>Yes/No/Cancel</b><br />
+    Standard Yes/No/Cancel dialog.
+    <button id="mb4">Show Me</button>
+</p>
+
+<p>
+    <b>Progress Dialog</b><br />
+    You can set a progress on a progress MessageBox.
+    <button id="mb6">Show Me</button>
+</p>
+
+<p>
+    <b>Alert</b><br />
+    Standard alert message dialog.
+    <button id="mb7">Show Me</button>
+</p>
+</body>
+</html>
+/*
+ * Ext JS Library 1.1 Beta 1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ * licensing@extjs.com
+ * 
+ * http://www.extjs.com/license
+ */
+
+Ext.onReady(function(){
+    Ext.get('mb1').on('click', function(e){
+        Ext.MessageBox.confirm('Confirm', 'Are you sure you want to do that?', showResult);
+    });
+
+    Ext.get('mb2').on('click', function(e){
+        Ext.MessageBox.prompt('Name', 'Please enter your name:', showResultText);
+    });
+
+    Ext.get('mb3').on('click', function(e){
+        Ext.MessageBox.show({
+           title: 'Address',
+           msg: 'Please enter your address:',
+           width:300,
+           buttons: Ext.MessageBox.OKCANCEL,
+           multiline: true,
+           fn: showResultText,
+           animEl: 'mb3'
+       });
+    });
+
+    Ext.get('mb4').on('click', function(e){
+        Ext.MessageBox.show({
+           title:'Save Changes?',
+           msg: 'Your are closing a tab that has unsaved changes. Would you like to save your changes?',
+           buttons: Ext.MessageBox.YESNOCANCEL,
+           fn: showResult,
+           animEl: 'mb4'
+       });
+    });
+
+    Ext.get('mb6').on('click', function(){
+        Ext.MessageBox.show({
+           title: 'Please wait...',
+           msg: 'Initializing...',
+           width:240,
+           progress:true,
+           closable:false,
+           animEl: 'mb6'
+       });
+
+       // this hideous block creates the bogus progress
+       var f = function(v){
+            return function(){
+                if(v == 11){
+                    Ext.MessageBox.hide();
+                }else{
+                    Ext.MessageBox.updateProgress(v/10, 'Loading item ' + v + ' of 10...');
+                }
+           };
+       };
+       for(var i = 1; i < 12; i++){
+           setTimeout(f(i), i*1000);
+       }
+    });
+
+    Ext.get('mb7').on('click', function(){
+        Ext.MessageBox.alert('Status', 'Changes saved successfully.', showResult);
+    });
+
+
+    function showResult(btn){
+        Ext.example.msg('Button Click', 'You clicked the {0} button', btn);
+    };
+
+    function showResultText(btn, text){
+        Ext.example.msg('Button Click', 'You clicked the {0} button and entered the text "{1}".', btn, text);
+    };
+});
 \ No newline at end of file
+/*
+ * Ext JS Library 1.1 Beta 1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ * licensing@extjs.com
+ * 
+ * http://www.extjs.com/license
+ */
+
+body{
+	font: normal 9pt verdana,tahoma,arial,helvetica;
+}
+.post{
+	padding:15px;
+}
+.post h2{
+	font:normal 22px times;
+	margin-bottom:10px;
+}
+.post p{
+	margin-bottom:10px;
+	line-height:18px;
+}
+
+.loading-indicator {
+	font-size:8pt;
+	background-image: url('../../images/grid/loading.gif');
+	background-repeat: no-repeat;
+	background-position: left;
+	padding-left:20px;
+	margin:5px;
+}
+
+/** Posting messages */
+.x-dlg-ft{
+	position:relative;
+}
+
+#dlg-msg {
+	position:absolute;
+	left:0px;
+	top:0px;
+	width:40%;
+}
+.posting-msg{
+	display:none;
+	font:normal 8pt tahoma, arial;
+	color:black;
+}
+#post-error-msg{
+	color:red;
+}
+.active-msg{
+	display:block;
+}
+
+/** Comment Box (with links) */
+#comment-box{
+	float:right;
+	clear:none;
+	border:2px solid #aca899;
+	background-color:#f3f2e7;
+	padding:10px;
+	margin:15px;
+}
+#comment-box li{
+	margin:4px;
+}
+#comment-box a{
+	text-decoration:none;
+}
+#comments-list{
+	margin:0px;
+	padding:0px;
+}
+/** Comment Post Form */
+#post-tab .inner-tab{
+	margin:10px;
+	margin-top:5px;
+}
+#comment-form label {
+	margin:4px;
+	margin-left:0px;
+	display:block;
+	color:#333333;
+	font:normal 10px arial,helvetica;
+	line-height:14px;
+}
+#comment-form .textinput{
+	border:1px solid #6593cf;
+	width:98%;
+	padding:1px;
+	margin-bottom:2px;
+	font:normal 11px tahoma, arial;
+}
+#comment {
+	width:480px;
+	height:205px;
+	font:normal 11px tahoma, arial;
+}
+
+/** Comment List */
+.commentmetadata {
+	margin: 0;
+	display: block;
+	font-size: 9px;
+	font-weight:normal;
+	color:gray;
+	margin-bottom:10px;
+	float:right;
+	clear:none;
+}
+.cuser{
+	float:left;
+	clear:none;
+	font:bold 12px tahoma, arial;
+	padding-left:21px;
+	background: url(images/comment.gif) no-repeat;
+}
+.cuser a{
+	font:bold 12px tahoma, arial;
+}
+.cheader{
+	height:20px;
+}
+#comments-list li {
+	display:block;
+	background: url(images/comment-bg.gif) repeat-x;
+	background-position:0px -5px;
+	padding:15px;
+	padding-bottom:18px;
+	font-size:12px;
+}
 \ No newline at end of file
+/*
+ * Ext JS Library 1.1 Beta 1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ * licensing@extjs.com
+ * 
+ * http://www.extjs.com/license
+ */
+
+var Comments = function(){
+    var dialog, postLink, viewLink, txtComment;
+    var tabs, commentsList, postBtn, renderer;
+    var wait, error, errorMsg;
+    var posting = false;
+    
+    return {
+        init : function(){
+             // cache some elements for quick access
+             txtComment = Ext.get('comment');
+             commentsList = Ext.get('comments-list');
+             postLink = Ext.get('post-comment');
+             viewLink = Ext.get('view-comments');
+             wait = Ext.get('post-wait');
+             error = Ext.get('post-error');
+             errorMsg = Ext.get('post-error-msg');
+             
+             this.createDialog();
+             
+             postLink.on('click', function(e){
+                 e.stopEvent();
+                 tabs.activate('post-tab');
+                 dialog.show(postLink);
+             });
+             
+             viewLink.on('click', function(e){
+                 e.stopEvent();
+                 tabs.activate('view-tab');
+                 dialog.show(viewLink);
+             });             
+        },
+        
+        // submit the comment to the server
+        submitComment : function(){
+            postBtn.disable();
+            wait.radioClass('active-msg');
+            
+            var commentSuccess = function(o){
+                postBtn.enable();
+                var data = renderer.parse(o.responseText);
+                // if we got a comment back
+                if(data){
+                    wait.removeClass('active-msg');
+                    renderer.append(data.comments[0]);
+                    dialog.hide();
+                }else{
+                    error.radioClass('active-msg');
+                    errorMsg.update(o.responseText);
+                }
+            };
+            
+            var commentFailure = function(o){
+                postBtn.enable();
+                error.radioClass('active-msg');
+                errorMsg.update('Unable to connect.');
+            };
+    
+            Ext.lib.Ajax.formRequest('comment-form', 'post.php',
+                    {success: commentSuccess, failure: commentFailure});          
+        },
+        
+        createDialog : function(){
+            dialog = new Ext.BasicDialog("comments-dlg", { 
+                    autoTabs:true,
+                    width:500,
+                    height:300,
+                    shadow:true,
+                    minWidth:300,
+                    minHeight:300
+            });
+            dialog.addKeyListener(27, dialog.hide, dialog);
+            postBtn = dialog.addButton('Post', this.submitComment, this);
+            dialog.addButton('Close', dialog.hide, dialog);
+
+            
+            // clear any messages and indicators when the dialog is closed
+            dialog.on('hide', function(){
+                wait.removeClass('active-msg');
+                error.removeClass('active-msg');
+                txtComment.dom.value = '';
+            });
+            
+            // stoe a refeence to the tabs
+            tabs = dialog.getTabs();
+            
+            // auto fit the comment box to the dialog size
+            var sizeTextBox = function(){
+                txtComment.setSize(dialog.size.width-44, dialog.size.height-264);
+            };
+            sizeTextBox();
+            dialog.on('resize', sizeTextBox);
+            
+            // hide the post button if not on Post tab
+            tabs.on('tabchange', function(panel, tab){
+                postBtn.setVisible(tab.id == 'post-tab');
+            });
+            
+            // set up the comment renderer, all ajax requests for commentsList
+            // go through this render
+            renderer = new CommentRenderer(commentsList);
+            var um = commentsList.getUpdateManager();
+            um.setRenderer(renderer);
+            
+            // lazy load the comments when the view tab is activated
+            var commentsLoaded = false;
+            tabs.getTab('view-tab').on('activate', function(){
+                if(!commentsLoaded){
+                    um.update('comments.txt');
+                    commentsLoaded = true;
+                }
+            });
+        }
+    };
+}();
+
+// This class handles rendering JSON into comments
+var CommentRenderer = function(list){
+    // create a template for each JSON object
+    var tpl = new Ext.DomHelper.Template(
+          '<li id="comment-{id}">' +
+          '<div class="cheader">' +
+          '<div class="cuser">{author}:</div>' +
+          '<div class="commentmetadata">{date}</div>' +
+          '</div>{text}</li>'
+    );
+    
+    this.parse = function(json){
+        try{
+            return eval('(' + json + ')');
+        }catch(e){}
+        return null;
+    };
+    
+    // public render function for use with UpdateManager
+    this.render = function(el, response){
+        var data = this.parse(response.responseText);
+        if(!data || !data.comments || data.comments.length < 1){
+            el.update('There are no comments for this post.');
+            return;
+        }
+        // clear loading
+        el.update('');
+        for(var i = 0, len = data.comments.length; i < len; i++){
+            this.append(data.comments[i]);
+        }
+    };
+    
+    // appends a comment 
+    this.append = function(data){
+        tpl.append(list.dom, data);
+    };
+};
+
+Ext.EventManager.onDocumentReady(Comments.init, Comments, true);
 \ No newline at end of file
+<?
+//This file does nothing. All it does is kick out a bogus new comment in JSON format.
+?>{"comments": [{
+		id: "10", 
+		author: "Jack Slocum", 
+		link: "http://www.jackslocum.com/", 
+		date: "October 29th, 2006 9:21pm", 
+		text: "New posted comment. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa."
+	}
+]}
 \ No newline at end of file
+/*
+ * Ext JS Library 1.1 Beta 1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ * licensing@extjs.com
+ * 
+ * http://www.extjs.com/license
+ */
+
+body {
+	font-family:verdana,tahoma,helvetica;
+	padding:20px;
+    padding-top:32px;
+    font-size:13px;
+	background-color:#fff !important;
+}
+p {
+	margin-bottom:15px;
+}
+h1 {
+	font-size:large; 
+	margin-bottom:20px;
+}
+.example-info{
+	width:150px;
+	border:1px solid #c3daf9;
+	border-top:1px solid #DCEAFB;
+	border-left:1px solid #DCEAFB;
+	background:#ecf5fe url(info-bg.gif) repeat-x;
+	font-size:10px;
+	padding:8px;
+}
+pre.code{
+	background: #F8F8F8;
+	border: 1px solid #e8e8e8;
+	padding:10px;
+	margin:10px;
+	margin-left:0px;
+	border-left:5px solid #e8e8e8;
+	font-size: 12px !important;
+	line-height:14px !important;
+}
+.msg .x-box-mc {
+    font-size:14px;
+}
+#msg-div {
+    position:absolute;
+    left:35%;
+    top:10px;
+    width:250px;
+    z-index:20000;
+}
+.x-grid3-row-body p {
+    margin:5px 5px 10px 5px !important;
+}
+/*
+ * Ext JS Library 1.1 Beta 1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ * licensing@extjs.com
+ * 
+ * http://www.extjs.com/license
+ */
+
+Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';
+
+Ext.example = function(){
+    var msgCt;
+
+    function createBox(t, s){
+        return ['<div class="msg">',
+                '<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>',
+                '<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc"><h3>', t, '</h3>', s, '</div></div></div>',
+                '<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>',
+                '</div>'].join('');
+    }
+    return {
+        msg : function(title, format){
+            if(!msgCt){
+                msgCt = Ext.DomHelper.insertFirst(document.body, {id:'msg-div'}, true);
+            }
+            msgCt.alignTo(document, 't-t');
+            var s = String.format.apply(String, Array.prototype.slice.call(arguments, 1));
+            var m = Ext.DomHelper.append(msgCt, {html:createBox(title, s)}, true);
+            m.slideIn('t').pause(1).ghost("t", {remove:true});
+        },
+
+        init : function(){
+            var s = Ext.get('extlib'), t = Ext.get('exttheme');
+            if(!s || !t){ // run locally?
+                return;
+            }
+            var lib = Cookies.get('extlib') || 'ext', 
+                theme = Cookies.get('exttheme') || 'aero';
+            if(lib){
+                s.dom.value = lib;
+            }
+            if(theme){
+                t.dom.value = theme;
+                Ext.get(document.body).addClass('x-'+theme);
+            }
+            s.on('change', function(){
+                Cookies.set('extlib', s.getValue());
+                setTimeout(function(){
+                    window.location.reload();
+                }, 250);
+            });
+
+            t.on('change', function(){
+                Cookies.set('exttheme', t.getValue());
+                setTimeout(function(){
+                    window.location.reload();
+                }, 250);
+            });
+        }
+    };
+}();
+
+Ext.onReady(Ext.example.init, Ext.example);
+
+
+// old school cookie functions grabbed off the web
+var Cookies = {};
+Cookies.set = function(name, value){
+     var argv = arguments;
+     var argc = arguments.length;
+     var expires = (argc > 2) ? argv[2] : null;
+     var path = (argc > 3) ? argv[3] : '/';
+     var domain = (argc > 4) ? argv[4] : null;
+     var secure = (argc > 5) ? argv[5] : false;
+     document.cookie = name + "=" + escape (value) +
+       ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
+       ((path == null) ? "" : ("; path=" + path)) +
+       ((domain == null) ? "" : ("; domain=" + domain)) +
+       ((secure == true) ? "; secure" : "");
+};
+
+Cookies.get = function(name){
+	var arg = name + "=";
+	var alen = arg.length;
+	var clen = document.cookie.length;
+	var i = 0;
+	var j = 0;
+	while(i < clen){
+		j = i + alen;
+		if (document.cookie.substring(i, j) == arg)
+			return Cookies.getCookieVal(j);
+		i = document.cookie.indexOf(" ", i) + 1;
+		if(i == 0)
+			break;
+	}
+	return null;
+};
+
+Cookies.clear = function(name) {
+  if(Cookies.get(name)){
+    document.cookie = name + "=" +
+    "; expires=Thu, 01-Jan-70 00:00:01 GMT";
+  }
+};
+
+Cookies.getCookieVal = function(offset){
+   var endstr = document.cookie.indexOf(";", offset);
+   if(endstr == -1){
+       endstr = document.cookie.length;
+   }
+   return unescape(document.cookie.substring(offset, endstr));
+};
 \ No newline at end of file
+<?xml version="1.0" encoding="utf-8"?>
+<project path="" name="Ext Examples" author="Ext JS, LLC" version="1.1 Beta 1" copyright="Ext JS Library $version&#xD;&#xA;Copyright(c) 2006-2007, $author.&#xD;&#xA;licensing@extjs.com&#xD;&#xA;&#xD;&#xA;http://www.extjs.com/license" output="C:\apps\www\deploy\ext-1.1-beta1\examples" source="True" source-dir="$output" minify="False" min-dir="$output\build" doc="False" doc-dir="$output\docs" master="true" master-file="$output\yui-ext.js" zip="true" zip-file="$output\yuo-ext.$version.zip">
+  <directory name="" />
+  <file name="dialog\blog.html" path="dialog" />
+  <file name="dialog\comments.txt" path="dialog" />
+  <file name="dialog\hello.html" path="dialog" />
+  <file name="dialog\layout.html" path="dialog" />
+  <file name="dialog\post.php" path="dialog" />
+  <file name="grid\array-grid.html" path="grid" />
+  <file name="grid\custom-grid.html" path="grid" />
+  <file name="grid\edit-grid.html" path="grid" />
+  <file name="grid\paging-grid.html" path="grid" />
+  <file name="grid\plants.xml" path="grid" />
+  <file name="grid\sheldon.xml" path="grid" />
+  <file name="grid\xml-grid.html" path="grid" />
+  <file name="layout\images\Thumbs.db" path="layout\images" />
+  <file name="layout\complex.html" path="layout" />
+  <file name="layout\feed-proxy.php" path="layout" />
+  <file name="layout\feed-viewer.html" path="layout" />
+  <file name="layout\nested.html" path="layout" />
+  <file name="layout\simple.html" path="layout" />
+  <file name="resizable\basic.html" path="resizable" />
+  <file name="resizable\sara.jpg" path="resizable" />
+  <file name="resizable\sara_and_zack.jpg" path="resizable" />
+  <file name="resizable\zack.jpg" path="resizable" />
+  <file name="tabs\ajax1.htm" path="tabs" />
+  <file name="tabs\ajax2.htm" path="tabs" />
+  <file name="tabs\tabs.html" path="tabs" />
+  <file name="view\images\thumbs\dance_fever.jpg" path="view\images\thumbs" />
+  <file name="view\images\thumbs\gangster_zack.jpg" path="view\images\thumbs" />
+  <file name="view\images\thumbs\kids_hug.jpg" path="view\images\thumbs" />
+  <file name="view\images\thumbs\kids_hug2.jpg" path="view\images\thumbs" />
+  <file name="view\images\thumbs\sara_pink.jpg" path="view\images\thumbs" />
+  <file name="view\images\thumbs\sara_pumpkin.jpg" path="view\images\thumbs" />
+  <file name="view\images\thumbs\sara_smile.jpg" path="view\images\thumbs" />
+  <file name="view\images\thumbs\up_to_something.jpg" path="view\images\thumbs" />
+  <file name="view\images\thumbs\zack.jpg" path="view\images\thumbs" />
+  <file name="view\images\thumbs\zacks_grill.jpg" path="view\images\thumbs" />
+  <file name="view\images\thumbs\zack_dress.jpg" path="view\images\thumbs" />
+  <file name="view\images\thumbs\zack_hat.jpg" path="view\images\thumbs" />
+  <file name="view\images\thumbs\zack_sink.jpg" path="view\images\thumbs" />
+  <file name="view\chooser.html" path="view" />
+  <file name="view\get-images.php" path="view" />
+  <file name="yui-ext-examples.jsb" path="" />
+  <file name="dialog\images\comment-bg.gif" path="dialog\images" />
+  <file name="dialog\images\comment.gif" path="dialog\images" />
+  <file name="dialog\images\warning.gif" path="dialog\images" />
+  <file name="dialog\post.css" path="dialog" />
+  <file name="grid\grid-examples.css" path="grid" />
+  <file name="layout\images\add-feed.gif" path="layout\images" />
+  <file name="layout\images\article.gif" path="layout\images" />
+  <file name="layout\images\bullet.gif" path="layout\images" />
+  <file name="layout\images\cancel.gif" path="layout\images" />
+  <file name="layout\images\comment-bg.gif" path="layout\images" />
+  <file name="layout\images\feed-item.gif" path="layout\images" />
+  <file name="layout\images\grid-hrow.gif" path="layout\images" />
+  <file name="layout\images\header-bar.gif" path="layout\images" />
+  <file name="layout\images\header.gif" path="layout\images" />
+  <file name="layout\images\myfeeds.gif" path="layout\images" />
+  <file name="layout\images\new_tab.gif" path="layout\images" />
+  <file name="layout\images\new_window.gif" path="layout\images" />
+  <file name="layout\images\post-bg.gif" path="layout\images" />
+  <file name="layout\images\preview.gif" path="layout\images" />
+  <file name="layout\images\rss.gif" path="layout\images" />
+  <file name="layout\images\signin.gif" path="layout\images" />
+  <file name="layout\images\signout.gif" path="layout\images" />
+  <file name="layout\images\suggested.gif" path="layout\images" />
+  <file name="layout\images\toolbar.gif" path="layout\images" />
+  <file name="layout\feed-viewer.css" path="layout" />
+  <file name="resizable\basic.css" path="resizable" />
+  <file name="tabs\tabs-example.css" path="tabs" />
+  <file name="view\chooser.css" path="view" />
+  <file name=".project" path="" />
+  <file name="examples.css" path="" />
+  <file name="info-bg.gif" path="" />
+  <file name="README.txt" path="" />
+  <file name="tree\get-nodes.php" path="tree" />
+  <file name="tree\reorder.html" path="tree" />
+  <file name="tree\two-trees.html" path="tree" />
+  <file name="tree\organizer.html" path="tree" />
+  <file name="tree\images\thumbs\dance_fever.jpg" path="tree\images\thumbs" />
+  <file name="tree\images\thumbs\gangster_zack.jpg" path="tree\images\thumbs" />
+  <file name="tree\images\thumbs\kids_hug.jpg" path="tree\images\thumbs" />
+  <file name="tree\images\thumbs\kids_hug2.jpg" path="tree\images\thumbs" />
+  <file name="tree\images\thumbs\sara_pink.jpg" path="tree\images\thumbs" />
+  <file name="tree\images\thumbs\sara_pumpkin.jpg" path="tree\images\thumbs" />
+  <file name="tree\images\thumbs\sara_smile.jpg" path="tree\images\thumbs" />
+  <file name="tree\images\thumbs\up_to_something.jpg" path="tree\images\thumbs" />
+  <file name="tree\images\thumbs\zack.jpg" path="tree\images\thumbs" />
+  <file name="tree\images\thumbs\zacks_grill.jpg" path="tree\images\thumbs" />
+  <file name="tree\images\thumbs\zack_dress.jpg" path="tree\images\thumbs" />
+  <file name="tree\images\thumbs\zack_hat.jpg" path="tree\images\thumbs" />
+  <file name="tree\images\thumbs\zack_sink.jpg" path="tree\images\thumbs" />
+  <file name="tree\center-bg.gif" path="tree" />
+  <file name="tree\album.gif" path="tree" />
+  <file name="tree\Thumbs.db" path="tree" />
+  <file name="tree\organizer.css" path="tree" />
+  <file name="dialog\msg-box.html" path="dialog" />
+  <file name="menu\menus.css" path="menu" />
+  <file name="menu\menus.html" path="menu" />
+  <file name="form\forms.css" path="form" />
+  <file name="form\forms.html" path="form" />
+  <file name="grid\paging.html" path="grid" />
+  <file name="grid\.DS_Store" path="grid" />
+  <file name="grid\topic.gif" path="grid" />
+  <file name=".DS_Store" path="" />
+  <file name="examples.jsb" path="" />
+  <file name="grid\details.gif" path="grid" />
+  <file name="menu\list-items.gif" path="menu" />
+  <file name="menu\menu-show.gif" path="menu" />
+  <file name="dialog\test.html" path="dialog" />
+  <file name="grid\PropsGrid.js" path="grid" />
+  <file name="jquery-bundled.js" path="" />
+  <file name="tabs\tabs-adv.html" path="tabs" />
+  <file name="lib.css" path="" />
+  <file name="grid\from-markup.html" path="grid" />
+  <file name="form\warning.gif" path="form" />
+  <file name="form\combos.html" path="form" />
+  <file name="form\forum-search.css" path="form" />
+  <file name="form\forum-search.html" path="form" />
+  <file name="form\combos.css" path="form" />
+  <file name="layout\child.html" path="layout" />
+  <file name="layout\parent.html" path="layout" />
+  <file name="grid\virtual-grid.html" path="grid" />
+  <file name="grid\virtualgrid.js" path="grid" />
+  <file name="form\dynamic.html" path="form" />
+  <file name="effects.js" path="" />
+  <file name="jquery-plugins.js" path="" />
+  <file name="lib.js" path="" />
+  <file name="prototype.js" path="" />
+  <file name="scriptaculous.js" path="" />
+  <file name="layout\images\tab-close-on.gif" path="layout\images" />
+  <file name="layout\images\tab-close.gif" path="layout\images" />
+  <file name="layout\images\wait.gif" path="layout\images" />
+  <file name="layout\images\warning.gif" path="layout\images" />
+  <file name="layout\feed-proxy.ashx" path="layout" />
+  <file name="layout\feed-proxy.ashx.vb" path="layout" />
+  <file name="form\xml-form.xml" path="form" />
+  <file name="form\xml-form.html" path="form" />
+  <file name="form\xml-errors.xml" path="form" />
+  <file name="tree\dependency.html" path="tree" />
+  <file name="tree\dependency.css" path="tree" />
+  <file name="tree\dependency.php" path="tree" />
+  <file name="shared\icons\fam\add.gif" path="shared\icons\fam" />
+  <file name="shared\icons\fam\cross.gif" path="shared\icons\fam" />
+  <file name="shared\icons\fam\delete.gif" path="shared\icons\fam" />
+  <file name="shared\icons\fam\plugin.gif" path="shared\icons\fam" />
+  <file name="shared\icons\fam\plugin_add.gif" path="shared\icons\fam" />
+  <file name="shared\icons\fam\SILK.txt" path="shared\icons\fam" />
+  <file name="shared\icons\save.gif" path="shared\icons" />
+  <file name="shared\.DS_Store" path="shared" />
+  <file name="debug\debug-console.html" path="debug" />
+  <file name="debug\inspector.gif" path="debug" />
+  <file name="tree\save-dep.php" path="tree" />
+  <file name="tree\images\cmp-bg.gif" path="tree\images" />
+  <file name="form\advanced.html" path="form" />
+  <file name="form\advanced.js" path="form" />
+  <file name="form\advanced.php" path="form" />
+  <file name="form\customers-remote.php" path="form" />
+  <file name="form\load-form.php" path="form" />
+  <file name="form\save-form.php" path="form" />
+  <file name="locale\dutch-form.html" path="locale" />
+  <file name="locale\multi-lang.html" path="locale" />
+  <file name="shared\icons\.DS_Store" path="shared\icons" />
+  <file name="shared\icons\arrow-down.gif" path="shared\icons" />
+  <file name="shared\icons\arrow-up.gif" path="shared\icons" />
+  <file name="tree\dep-tree.json" path="tree" />
+  <file name="table.html" path="" />
+  <file name="grid\grid-perf.html" path="grid" />
+  <file name="locale\create_languages_js.py" path="locale" />
+  <file name="panels\images\.DS_Store" path="panels\images" />
+  <file name="panels\images\._.DS_Store" path="panels\images" />
+  <file name="panels\images\app-win-btn-sprite.gif" path="panels\images" />
+  <file name="panels\images\appbar-bg.gif" path="panels\images" />
+  <file name="panels\images\appbar-btn-sprite.gif" path="panels\images" />
+  <file name="panels\images\beach.jpg" path="panels\images" />
+  <file name="panels\images\cancel-ticket.gif" path="panels\images" />
+  <file name="panels\images\delete.gif" path="panels\images" />
+  <file name="panels\images\desktop.gif" path="panels\images" />
+  <file name="panels\images\desktop.jpg" path="panels\images" />
+  <file name="panels\images\details.gif" path="panels\images" />
+  <file name="panels\images\new-ticket.gif" path="panels\images" />
+  <file name="panels\images\preview-panel.gif" path="panels\images" />
+  <file name="panels\images\qlaunch-bg.gif" path="panels\images" />
+  <file name="panels\images\required.gif" path="panels\images" />
+  <file name="panels\images\save-ticket.gif" path="panels\images" />
+  <file name="panels\images\task-btn-sprite.gif" path="panels\images" />
+  <file name="panels\images\ticket.gif" path="panels\images" />
+  <file name="panels\images\title-bg.gif" path="panels\images" />
+  <file name="panels\images\top-bar-bg.gif" path="panels\images" />
+  <file name="panels\images\windows-bg.gif" path="panels\images" />
+  <file name="panels\images\xtrack.gif" path="panels\images" />
+  <file name="panels\.DS_Store" path="panels" />
+  <file name="panels\._.DS_Store" path="panels" />
+  <file name="panels\app.css" path="panels" />
+  <file name="panels\app.html" path="panels" />
+  <file name="panels\desktop.css" path="panels" />
+  <file name="panels\desktop.html" path="panels" />
+  <file name="panels\panels.html" path="panels" />
+  <file name="panels\stack.html" path="panels" />
+  <file name="shared\icons\._.DS_Store" path="shared\icons" />
+  <file name="shared\._.DS_Store" path="shared" />
+  <file name="._.DS_Store" path="" />
+  <file name="panels\images\desktop2.jpg" path="panels\images" />
+  <file name="panels\images\desktop2.gif" path="panels\images" />
+  <file name="panels\images\desktop3.gif" path="panels\images" />
+  <file name="panels\images\desktop3.jpg" path="panels\images" />
+  <file name="editor\editor.css" path="editor" />
+  <file name="editor\editor.html" path="editor" />
+  <file name="editor\blank.html" path="editor" />
+  <file name="grid\perf.html" path="grid" />
+  <file name="editor\editor.js" path="editor" />
+  <file name="grid\grid3.html" path="grid" />
+  <file name="grid\grid3.js" path="grid" />
+  <file name="grid\perf.js" path="grid" />
+  <file name="panels\app.js" path="panels" />
+  <file name="panels\desktop.js" path="panels" />
+  <file name="panels\panels.js" path="panels" />
+  <file name="shared\icons\fam\grid.png" path="shared\icons\fam" />
+  <file name="window\desktop.html" path="window" />
+  <file name="window\Desktop.js" path="window" />
+  <file name="window\windows.js" path="window" />
+  <file name="window\images\winbar-bg.gif" path="window\images" />
+  <file name="window\images\winbar-btn.gif" path="window\images" />
+  <file name="window\images\windows-bg.gif" path="window\images" />
+  <file name="window\windows.css" path="window" />
+  <file name="window\css\windows.css" path="window\css" />
+  <file name="window\images\desktop.gif" path="window\images" />
+  <file name="window\images\desktop3.jpg" path="window\images" />
+  <file name="window\images\hd-bg.gif" path="window\images" />
+  <file name="window\images\hd-tb-bg.gif" path="window\images" />
+  <file name="window\images\launcher-bg.gif" path="window\images" />
+  <file name="window\images\launcher-btn.gif" path="window\images" />
+  <file name="window\images\bogus.png" path="window\images" />
+  <file name="window\images\accordian.gif" path="window\images" />
+  <file name="window\images\tabs.gif" path="window\images" />
+  <file name="shared\icons\fam\user.png" path="shared\icons\fam" />
+  <file name="shared\icons\fam\connect.png" path="shared\icons\fam" />
+  <file name="shared\icons\fam\user_add.png" path="shared\icons\fam" />
+  <file name="shared\icons\fam\user_comment.png" path="shared\icons\fam" />
+  <file name="shared\icons\fam\user_delete.png" path="shared\icons\fam" />
+  <file name="shared\icons\fam\user_edit.png" path="shared\icons\fam" />
+  <file name="shared\icons\fam\user_female.png" path="shared\icons\fam" />
+  <file name="shared\icons\fam\user_gray.png" path="shared\icons\fam" />
+  <file name="shared\icons\fam\user_green.png" path="shared\icons\fam" />
+  <file name="shared\icons\fam\user_orange.png" path="shared\icons\fam" />
+  <file name="shared\icons\fam\user_red.png" path="shared\icons\fam" />
+  <file name="shared\icons\fam\user_suit.png" path="shared\icons\fam" />
+  <file name="form\job.html" path="form" />
+  <file name="form\jobs.css" path="form" />
+  <file name="form\jobs.js" path="form" />
+  <file name="form\view-jobs.html" path="form" />
+  <file name="form\view-jobs.js" path="form" />
+  <file name="form\jobs-remote.php" path="form" />
+  <file name="form\custom.html" path="form" />
+  <file name="menu\menubar.html" path="menu" />
+  <file name="dialog\hello.js" path="dialog" />
+  <file name="dialog\layout.js" path="dialog" />
+  <file name="dialog\msg-box.js" path="dialog" />
+  <file name="dialog\post.js" path="dialog" />
+  <file name="form\combos.js" path="form" />
+  <file name="form\custom.js" path="form" />
+  <file name="form\dynamic.js" path="form" />
+  <file name="form\forms.js" path="form" />
+  <file name="form\forum-search.js" path="form" />
+  <file name="form\states.js" path="form" />
+  <file name="form\upload-test.html" path="form" />
+  <file name="form\xml-form.js" path="form" />
+  <file name="grid\array-grid.js" path="grid" />
+  <file name="grid\CheckboxSelectionModel.js" path="grid" />
+  <file name="grid\custom-grid.js" path="grid" />
+  <file name="grid\edit-grid.js" path="grid" />
+  <file name="grid\from-markup.js" path="grid" />
+  <file name="grid\paging.js" path="grid" />
+  <file name="grid\RowExpander.js" path="grid" />
+  <file name="grid\RowNumberer.js" path="grid" />
+  <file name="grid\xml-grid.js" path="grid" />
+  <file name="layout\feed-viewer.js" path="layout" />
+  <file name="locale\dutch-form.js" path="locale" />
+  <file name="locale\dutch-provinces.js" path="locale" />
+  <file name="locale\languages.js" path="locale" />
+  <file name="locale\multi-lang.js" path="locale" />
+  <file name="locale\PagingMemoryProxy.js" path="locale" />
+  <file name="menu\menus.js" path="menu" />
+  <file name="resizable\basic.js" path="resizable" />
+  <file name="tabs\tabs-adv.js" path="tabs" />
+  <file name="tabs\tabs-example.js" path="tabs" />
+  <file name="tree\dependency.js" path="tree" />
+  <file name="tree\organizer.js" path="tree" />
+  <file name="tree\reorder.js" path="tree" />
+  <file name="tree\two-trees.js" path="tree" />
+  <file name="view\chooser-example.js" path="view" />
+  <file name="view\chooser.js" path="view" />
+  <file name="examples.js" path="" />
+  <file name="form\upload.php" path="form" />
+</project>
 \ No newline at end of file
+/*
+ * Ext JS Library 1.1 Beta 1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ * licensing@extjs.com
+ * 
+ * http://www.extjs.com/license
+ */
+
+.search-item {
+    font:normal 11px tahoma, arial, helvetica, sans-serif;
+    padding:3px 10px 3px 10px;
+    border:1px solid #fff;
+    border-bottom:1px solid #eeeeee;
+    white-space:normal;
+}
+.search-item h3 {
+    display:block;
+    font:inherit;
+    font-weight:bold;
+}
+
+.search-item h3 span {
+    float: right;
+    font-weight:normal;
+    margin:0 0 5px 5px;
+    width:100px;
+    display:block;
+    clear:none;
+}
 \ No newline at end of file
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+    <title>Combo Boxes</title>
+    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
+
+    <!-- GC --> <!-- LIBS -->     <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>     <!-- ENDLIBS -->
+    <script type="text/javascript" src="../../ext-all.js"></script>
+
+    <script type="text/javascript" src="states.js"></script>
+    <script type="text/javascript" src="combos.js"></script>
+    <link rel="stylesheet" type="text/css" href="combos.css" />
+
+    <!-- Common Styles for the examples -->
+    <link rel="stylesheet" type="text/css" href="../examples.css" />
+    <style type="text/css">
+        p { width:650px; }
+    </style>
+</head>
+<body>
+<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
+<h1>Combo Boxes</h1>
+<p>The js is not minified so it is readable. See <a href="combos.js">combos.js</a>.</p>
+
+<p>
+<b>Data Sources</b><br />
+The combo box can use any type of Ext.data.Store as it's data source.
+    This means your data can be XML, JSON, arrays or any other supported format. It can be loaded using Ajax, script tags or be local.
+    This combo uses local data from a JS array.
+</p>
+<div>
+    <input type="text" id="local-states" size="20"/>
+</div>
+<pre class="code"><code>// simple array store
+var store = new Ext.data.SimpleStore({
+    fields: ['abbr', 'state'],
+    data : exampleData
+});
+var combo = new Ext.form.ComboBox({
+    store: store,
+    displayField:'state',
+    typeAhead: true,
+    mode: 'local',
+    triggerAction: 'all',
+    emptyText:'Select a state...',
+    selectOnFocus:true
+});
+combo.applyTo('local-states');
+</code></pre>
+<br />
+<p>
+<b>Unobtrusive</b><br />
+The combo box can very easily be used to convert existing select elements into auto-completing, filtering combos.
+</p>
+<div>
+Transformed select:<br/> <select name="state" id="state">
+<option value="AL">Alabama__________________________________________</option>
+<option value="AK">Alaska</option>
+<option value="AZ">Arizona</option>
+<option value="AR">Arkansas</option>
+<option value="CA">California</option>
+<option value="CO">Colorado</option>
+<option value="CT">Connecticut</option>
+<option value="DE">Delaware</option>
+<option value="FL">Florida</option>
+<option value="GA">Georgia</option>
+<option value="HI">Hawaii</option>
+<option value="ID">Idaho</option>
+<option value="IL">Illinois</option>
+<option value="IN">Indiana</option>
+<option value="IA">Iowa</option>
+<option value="KS">Kansas</option>
+<option value="KY">Kentucky</option>
+<option value="LA">Louisiana</option>
+<option value="ME">Maine</option>
+<option value="MD">Maryland</option>
+<option value="MA">Massachusetts</option>
+<option value="MI">Michigan</option>
+<option value="MN">Minnesota</option>
+<option value="MS">Mississippi</option>
+<option value="MO">Missouri</option>
+<option value="MT">Montana</option>
+<option value="NE">Nebraska</option>
+<option value="NV">Nevada</option>
+<option value="NH">New Hampshire</option>
+<option value="NJ">New Jersey</option>
+<option value="NM">New Mexico</option>
+<option value="NY">New York</option>
+<option value="NC">North Carolina</option>
+<option value="ND">North Dakota</option>
+<option value="OH" selected>Ohio</option>
+<option value="OK">Oklahoma</option>
+<option value="OR">Oregon</option>
+<option value="PA">Pennsylvania</option>
+<option value="RI">Rhode Island</option>
+<option value="SC">South Carolina</option>
+<option value="SD">South Dakota</option>
+<option value="TN">Tennessee</option>
+<option value="TX">Texas</option>
+<option value="UT">Utah</option>
+<option value="VT">Vermont</option>
+<option value="VA">Virginia</option>
+<option value="WA">Washington</option>
+<option value="WV">West Virginia</option>
+<option value="WI">Wisconsin</option>
+<option value="WY">Wyoming</option>
+</select>
+</div><br />
+<p>
+Originally looked like:<br/> <select name="state-orig">
+<option value="AL">Alabama</option>
+<option value="AK">Alaska</option>
+<option value="AZ">Arizona</option>
+<option value="AR">Arkansas</option>
+<option value="CA">California</option>
+<option value="CO">Colorado</option>
+<option value="CT">Connecticut</option>
+<option value="DE">Delaware</option>
+<option value="FL">Florida</option>
+<option value="GA">Georgia</option>
+<option value="HI">Hawaii</option>
+<option value="ID">Idaho</option>
+<option value="IL">Illinois</option>
+<option value="IN">Indiana</option>
+<option value="IA">Iowa</option>
+<option value="KS">Kansas</option>
+<option value="KY">Kentucky</option>
+<option value="LA">Louisiana</option>
+<option value="ME">Maine</option>
+<option value="MD">Maryland</option>
+<option value="MA">Massachusetts</option>
+<option value="MI">Michigan</option>
+<option value="MN">Minnesota</option>
+<option value="MS">Mississippi</option>
+<option value="MO">Missouri</option>
+<option value="MT">Montana</option>
+<option value="NE">Nebraska</option>
+<option value="NV">Nevada</option>
+<option value="NH">New Hampshire</option>
+<option value="NJ">New Jersey</option>
+<option value="NM">New Mexico</option>
+<option value="NY">New York</option>
+<option value="NC">North Carolina</option>
+<option value="ND">North Dakota</option>
+<option value="OH" selected>Ohio</option>
+<option value="OK">Oklahoma</option>
+<option value="OR">Oregon</option>
+<option value="PA">Pennsylvania</option>
+<option value="RI">Rhode Island</option>
+<option value="SC">South Carolina</option>
+<option value="SD">South Dakota</option>
+<option value="TN">Tennessee</option>
+<option value="TX">Texas</option>
+<option value="UT">Utah</option>
+<option value="VT">Vermont</option>
+<option value="VA">Virginia</option>
+<option value="WA">Washington</option>
+<option value="WV">West Virginia</option>
+<option value="WI">Wisconsin</option>
+<option value="WY">Wyoming</option>
+</select>
+</p>
+<pre class="code"><code>var converted = new Ext.form.ComboBox({
+    typeAhead: true,
+    triggerAction: 'all',
+    transform:'state',
+    width:135,
+    forceSelection:true
+});
+</code></pre>
+<br />
+<p>
+    <b>Grid Editor</b><br />
+    <a href="../grid/edit-grid.html">Click here</a> to see the combo as a grid editor.
+</p>
+<br />
+<p>
+    <b>Templates and Ajax</b><br />
+    <a href="forum-search.html">Click here</a> for a more advanced example.
+</p>
+<br /><br /><br /><br />
+</body>
+</html>
+/*
+ * Ext JS Library 1.1 Beta 1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ * licensing@extjs.com
+ * 
+ * http://www.extjs.com/license
+ */
+
+Ext.onReady(function(){
+    // simple array store
+    var store = new Ext.data.SimpleStore({
+        fields: ['abbr', 'state'],
+        data : Ext.exampledata.states // from states.js
+    });
+    var combo = new Ext.form.ComboBox({
+        store: store,
+        displayField:'state',
+        typeAhead: true,
+        mode: 'local',
+        triggerAction: 'all',
+        emptyText:'Select a state...',
+        selectOnFocus:true,
+        resizable:true
+    });
+    combo.applyTo('local-states');
+
+
+
+    var converted = new Ext.form.ComboBox({
+        typeAhead: true,
+        triggerAction: 'all',
+        transform:'state',
+        width:135,
+        forceSelection:true
+    });
+});
 \ No newline at end of file
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+    <title>Custom Fields</title>
+    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
+
+    <!-- GC --> <!-- LIBS -->     <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>     <!-- ENDLIBS -->
+    <script type="text/javascript" src="../../ext-all.js"></script>
+
+    <script type="text/javascript" src="custom.js"></script>
+    <link rel="stylesheet" type="text/css" href="combos.css" />
+
+    <style type="text/css">
+        #search-results a {
+            color: #385F95;
+            font:bold 11px tahoma, arial, helvetica, sans-serif;
+            text-decoration:none;
+        }
+        #search-results a:hover {
+            text-decoration:underline;
+        }
+        #search-results .search-item {
+            padding:5px;
+        }
+        #search-results p {
+            margin:3px !important;
+        }
+        #search-results {
+            border-bottom:1px solid #ddd;
+            margin: 0 1px;
+            height:300px;
+            overflow:auto;
+        }
+        #search-results .x-toolbar {
+            border:0 none;
+        }
+    </style>
+
+    <!-- Common Styles for the examples -->
+    <link rel="stylesheet" type="text/css" href="../examples.css" />
+</head>
+<body>
+<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
+<p>
+    <b>Custom Form Feilds</b><br />
+    Ext provides many types of form fields to build interactive and rich forms. However, it also
+    provides a complete framework for building new types of fields quickly. The search field below
+    is an example.
+</p>
+<p>The js is not minified so it is readable. See <a href="custom.js">custom.js</a>.</p>
+
+<div style="width:600px;position:static;" class="x-layout-panel">
+    <div class="x-layout-panel-hd">
+        <div class="x-layout-panel-hd-text">Forum Posts</div>
+    </div>
+    <div id="search-tb"></div>
+    <div id="search-results"></div>
+    <div id="page-tb"></div>
+</div>
+
+</body>
+</html>
+/*
+ * Ext JS Library 1.1 Beta 1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ * licensing@extjs.com
+ * 
+ * http://www.extjs.com/license
+ */
+
+Ext.onReady(function(){
+    var ds = new Ext.data.Store({
+        proxy: new Ext.data.ScriptTagProxy({
+            url: 'http://extjs.com/forum/topics-remote.php'
+        }),
+        reader: new Ext.data.JsonReader({
+            root: 'topics',
+            totalProperty: 'totalCount',
+            id: 'post_id'
+        }, [
+            {name: 'postId', mapping: 'post_id'},
+            {name: 'title', mapping: 'topic_title'},
+            {name: 'topicId', mapping: 'topic_id'},
+            {name: 'author', mapping: 'author'},
+            {name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},
+            {name: 'excerpt', mapping: 'post_text'}
+        ]),
+
+        baseParams: {limit:20, forumId: 4}
+    });
+
+    // Custom rendering Template for the View
+    var resultTpl = new Ext.Template(
+        '<div class="search-item">',
+            '<h3><span>{lastPost:date("M j, Y")}<br />by {author}</span>',
+            '<a href="http://extjs.com/forum/showthread.php?t={topicId}&p={postId}" target="_blank">{title}</a></h3>',
+            '<p>{excerpt}</p>',
+        '</div>'
+    );
+
+    var view = new Ext.View('search-results', resultTpl, {store: ds});
+
+    var tb = new Ext.Toolbar('search-tb', [
+        'Search: ', ' ',
+        new Ext.app.SearchField({
+            store: ds,
+            width:320
+        })
+    ]);
+
+    new Ext.PagingToolbar('page-tb', ds, {
+        pageSize: 20,
+        displayInfo: true,
+        displayMsg: 'Topics {0} - {1} of {2}',
+        emptyMsg: "No topics to display"
+    });
+    
+    ds.load({params:{start:0, limit:20, forumId: 4}});
+});
+
+/**
+ * The custom search field
+ */
+
+Ext.app.SearchField = Ext.extend(Ext.form.TwinTriggerField, {
+    initComponent : function(){
+        Ext.app.SearchField.superclass.initComponent.call(this);
+        this.on('specialkey', function(f, e){
+            if(e.getKey() == e.ENTER){
+                this.onTrigger2Click();
+            }
+        }, this);
+    },
+
+    validationEvent:false,
+    validateOnBlur:false,
+    trigger1Class:'x-form-clear-trigger',
+    trigger2Class:'x-form-search-trigger',
+    hideTrigger1:true,
+    width:180,
+    hasSearch : false,
+    paramName : 'query',
+
+    onTrigger1Click : function(){
+        if(this.hasSearch){
+            var o = {start: 0};
+            o[this.paramName] = '';
+            this.store.reload({params:o});
+            this.el.dom.value = '';
+            this.triggers[0].hide();
+            this.hasSearch = false;
+        }
+    },
+
+    onTrigger2Click : function(){
+        var v = this.getRawValue();
+        if(v.length < 1){
+            this.onTrigger1Click();
+            return;
+        }
+        var o = {start: 0};
+        o[this.paramName] = v;
+        this.store.reload({params:o});
+        this.hasSearch = true;
+        this.triggers[0].show();
+    }
+});
 \ No newline at end of file
+<!--<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">-->
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+<title>Forms</title>
+<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
+
+    <!-- GC --> <!-- LIBS -->     <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>     <!-- ENDLIBS -->
+    <script type="text/javascript" src="../../ext-all.js"></script>
+
+<script type="text/javascript" src="states.js"></script>
+<script type="text/javascript" src="dynamic.js"></script>
+<link rel="stylesheet" type="text/css" href="forms.css" />
+
+<!-- Common Styles for the examples -->
+<link rel="stylesheet" type="text/css" href="../examples.css" />
+</head>
+<body>
+<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
+<h1>Dynamic Forms built with JavaScript</h1>
+<p>
+    These forms do not do anything and have very little validation. They solely demonstrate
+    how you can use Ext Forms to build and layout forms on the fly.
+</p>
+
+<p>The js is not minified so it is readable. See <a href="dynamic.js">dynamic.js</a>.</p>
+
+<div style="width:300px;">
+    <div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
+    <div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
+        <h3 style="margin-bottom:5px;">Simple Form</h3>
+        <div id="form-ct">
+
+        </div>
+    </div></div></div>
+    <div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
+</div>
+<br/>
+<div style="width:600px;">
+    <div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
+    <div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
+        <h3 style="margin-bottom:5px;">Multi-column and labels top</h3>
+        <div id="form-ct2">
+
+        </div>
+    </div></div></div>
+    <div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
+</div>
+<br/>
+<div style="width:345px;">
+    <div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
+    <div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
+        <h3>Fieldsets, labels right and complex fields</h3>
+        <div id="form-ct3">
+
+        </div>
+    </div></div></div>
+    <div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
+</div>
+<br/>
+<div style="width:600px;">
+    <div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
+    <div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
+        <h3 style="margin-bottom:5px;">Multi-column, nesting and fieldsets</h3>
+        <div id="form-ct4">
+
+        </div>
+    </div></div></div>
+    <div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
+</div>
+<div class="x-form-clear"></div>
+</body>
+</html>
+/*
+ * Ext JS Library 1.1 Beta 1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ * licensing@extjs.com
+ * 
+ * http://www.extjs.com/license
+ */
+
+Ext.onReady(function(){
+
+    Ext.QuickTips.init();
+
+    // turn on validation errors beside the field globally
+    Ext.form.Field.prototype.msgTarget = 'side';
+
+    /*
+     * ================  Simple form  =======================
+     */
+    var simple = new Ext.form.Form({
+        labelWidth: 75, // label settings here cascade unless overridden
+        url:'save-form.php'
+    });
+    simple.add(
+        new Ext.form.TextField({
+            fieldLabel: 'First Name',
+            name: 'first',
+            width:175,
+            allowBlank:false
+        }),
+
+        new Ext.form.TextField({
+            fieldLabel: 'Last Name',
+            name: 'last',
+            width:175
+        }),
+
+        new Ext.form.TextField({
+            fieldLabel: 'Company',
+            name: 'company',
+            width:175
+        }),
+
+        new Ext.form.TextField({
+            fieldLabel: 'Email',
+            name: 'email',
+            vtype:'email',
+            width:175
+        })
+    );
+
+    simple.addButton('Save');
+    simple.addButton('Cancel');
+
+    simple.render('form-ct');
+
+
+    /*
+     * ================  Form 2  =======================
+     */
+    var top = new Ext.form.Form({
+        labelAlign: 'top'
+    });
+
+    top.column(
+        {width:282}, // precise column sizes or percentages or straight CSS
+        new Ext.form.TextField({
+            fieldLabel: 'First Name',
+            name: 'first',
+            width:225
+        }),
+
+        new Ext.form.TextField({
+            fieldLabel: 'Company',
+            name: 'company',
+            width:225
+        })
+    );
+
+    top.column(
+        {width:272, style:'margin-left:10px', clear:true}, // apply custom css, clear:true means it is the last column
+        new Ext.form.TextField({
+            fieldLabel: 'Last Name',
+            name: 'last',
+            width:225
+        }),
+
+        new Ext.form.TextField({
+            fieldLabel: 'Email',
+            name: 'email',
+            vtype:'email',
+            width:225
+        })
+    );
+
+    top.container({},
+        new Ext.form.HtmlEditor({
+            id:'bio',
+            fieldLabel:'Biography',
+            width:550,
+            height:200
+        })
+    );
+
+    top.addButton('Save');
+    top.addButton('Cancel');
+
+    top.render('form-ct2');
+
+    /*
+     * ================  Form 3  =======================
+     */
+    var fs = new Ext.form.Form({
+        labelAlign: 'right',
+        labelWidth: 80
+    });
+
+    fs.fieldset(
+        {legend:'Contact Information'},
+        new Ext.form.TextField({
+            fieldLabel: 'First Name',
+            name: 'first',
+            width:190
+        }),
+
+        new Ext.form.TextField({
+            fieldLabel: 'Last Name',
+            name: 'last',
+            width:190
+        }),
+
+        new Ext.form.TextField({
+            fieldLabel: 'Company',
+            name: 'company',
+            width:190
+        }),
+
+        new Ext.form.TextField({
+            fieldLabel: 'Email',
+            name: 'email',
+            vtype:'email',
+            width:190
+        }),
+
+        new Ext.form.ComboBox({
+            fieldLabel: 'State',
+            hiddenName:'state',
+            store: new Ext.data.SimpleStore({
+                fields: ['abbr', 'state'],
+                data : Ext.exampledata.states // from states.js
+            }),
+            displayField:'state',
+            typeAhead: true,
+            mode: 'local',
+            triggerAction: 'all',
+            emptyText:'Select a state...',
+            selectOnFocus:true,
+            width:190
+        }),
+
+        new Ext.form.DateField({
+            fieldLabel: 'Date of Birth',
+            name: 'dob',
+            width:190,
+            allowBlank:false
+        })
+    );
+
+    fs.addButton('Save');
+    fs.addButton('Cancel');
+
+    fs.render('form-ct3');
+
+    /*
+     * ================  Form 4  =======================
+     */
+    var form = new Ext.form.Form({
+        labelAlign: 'right',
+        labelWidth: 75
+    });
+
+    form.column({width:342, labelWidth:75}); // open column, without auto close
+    form.fieldset(
+        {legend:'Contact Information'},
+        new Ext.form.TextField({
+            fieldLabel: 'Full Name',
+            name: 'fullName',
+            allowBlank:false,
+            value: 'Jack Slocum'
+        }),
+
+        new Ext.form.TextField({
+            fieldLabel: 'Job Title',
+            name: 'title',
+            value: 'Jr. Developer'
+        }),
+
+        new Ext.form.TextField({
+            fieldLabel: 'Company',
+            name: 'company',
+            value: 'Ext JS'
+        }),
+
+        new Ext.form.TextArea({
+            fieldLabel: 'Address',
+            name: 'address',
+            grow: true,
+            preventScrollbars:true,
+            value: '4 Redbulls Drive'
+        })
+    );
+    form.fieldset(
+        {legend:'Phone Numbers'},
+        new Ext.form.TextField({
+            fieldLabel: 'Home',
+            name: 'home',
+            value: '(888) 555-1212'
+        }),
+
+        new Ext.form.TextField({
+            fieldLabel: 'Business',
+            name: 'business'
+        }),
+
+        new Ext.form.TextField({
+            fieldLabel: 'Mobile',
+            name: 'mobile'
+        }),
+
+        new Ext.form.TextField({
+            fieldLabel: 'Fax',
+            name: 'fax'
+        })
+    );
+    form.end(); // closes the last container element (column, layout, fieldset, etc) and moves up 1 level in the stack
+
+    
+    form.column(
+        {width:202, style:'margin-left:10px', clear:true}
+    );
+
+    form.fieldset(
+        {id:'photo', legend:'Photo'}
+    );
+    form.end();
+
+    form.fieldset(
+        {legend:'Options', hideLabels:true},
+        new Ext.form.Checkbox({
+            boxLabel:'Ext 1.0 User',
+            name:'extuser'
+        }),
+        new Ext.form.Checkbox({
+            boxLabel:'Ext Commercial User',
+            name:'extcomm'
+        }),
+        new Ext.form.Checkbox({
+            boxLabel:'Ext Premium Member',
+            name:'extprem'
+        }),
+        new Ext.form.Checkbox({
+            boxLabel:'Ext Team Member',
+            name:'extteam',
+            checked:true
+        })
+    );
+
+    form.end(); // close the column
+
+    
+    form.applyIfToFields({
+        width:230
+    });
+
+    form.addButton('Save');
+    form.addButton('Cancel');
+
+    form.render('form-ct4');
+
+    // The form elements are standard HTML elements. By assigning an id (as we did above)
+    // we can manipulate them like any other element
+    var photo = Ext.get('photo');
+    var c = photo.createChild({
+        tag:'center', 
+        cn: {
+            tag:'img',
+            src: 'http://extjs.com/forum/image.php?u=2&dateline=1175747336',
+            style:'margin-bottom:5px;'
+        }
+    });
+    new Ext.Button(c, {
+        text: 'Change Photo'
+    });
+});
 \ No newline at end of file
+/*
+ * Ext JS Library 1.1 Beta 1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ * licensing@extjs.com
+ * 
+ * http://www.extjs.com/license
+ */
+
+.calendar .x-menu-item-icon {
+    background-image:url(../../resources/images/default/shared/calendar.gif);
+}
+
+.search-item {
+    font:normal 11px tahoma, arial, helvetica, sans-serif;
+    padding:3px 10px 3px 10px;
+    border-bottom:1px solid #eeeeee;
+}
+.search-item h3 {
+    display:block;
+    font:inherit;
+    font-weight:bold;
+}
+
+.search-item h3 span {
+    float: right;
+    font-weight:normal;
+    margin:0 0 5px 5px;
+    width:100px;
+    display:block;
+    clear:none;
+}
 \ No newline at end of file
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+<title>Forms</title>
+<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
+
+    <!-- GC --> <!-- LIBS -->     <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>     <!-- ENDLIBS -->
+    <script type="text/javascript" src="../../ext-all.js"></script>
+
+<script type="text/javascript" src="forms.js"></script>
+<link rel="stylesheet" type="text/css" href="forms.css" />
+
+<!-- Common Styles for the examples -->
+<link rel="stylesheet" type="text/css" href="../examples.css" />
+</head>
+<body>
+<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
+<h1>Forms</h1>
+<p>The js is not minified so it is readable. See <a href="forms.js">forms.js</a>.</p>
+
+<form id="form1" class="x-form">
+    <div style="width:400px;">
+        <div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
+        <div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
+            <h3 style="margin-bottom:5px;">Ext Live Forms</h3>
+            <!-- begin form layout -->
+            <div class="x-form-bd" id="container">
+                <fieldset>
+                    <legend>ComboBox Fields</legend>
+
+                    <div class="x-form-item">
+                        <label for="combo-local">Local Data:</label>
+                        <div class="x-form-element">
+                            <input type="text" size="20" name="combo-local" id="combo-local" />
+                        </div>
+                    </div>
+                    
+                    <div class="x-form-item">
+                        <label for="combo-ajax">Ajax Data:</label>
+                        <div class="x-form-element">
+                            <input type="text" size="20" name="combo-ajax" id="combo-ajax" />
+                        </div>
+                    </div>
+
+                    <div class="x-form-item">
+                        <label for="combo-selection">Only Selection:</label>
+                        <div class="x-form-element">
+                            <input type="text" size="20" value="OH" name="combo-selection" id="combo-selection" />
+                        </div>
+                    </div>
+
+                    <div class="x-form-item">
+                        <label for="combo-tpl">Item Templates:</label>
+                        <div class="x-form-element">
+                            <input type="text" size="20" name="combo-tpl" id="combo-tpl" />
+                        </div>
+                    </div>
+
+                    <div class="x-form-item">
+                        <label for="combo-tpl">Unobtrusive:</label>
+                        <div class="x-form-element">
+                            <select name="light" id="light">
+                                <option value="Shade">Shade</option>
+                                <option value="Mostly Shady">Mostly Shady</option>
+                                <option value="Sun or Shade">Sun or Shade</option>
+
+                                <option value="Mostly Sunny">Mostly Sunny</option>
+
+                                <option value="Sunny">Sunny</option>
+                            </select>
+                        </div>
+                    </div>
+
+                </fieldset>
+
+                <fieldset>
+                    <legend>Component Fields</legend>
+
+                    <div class="x-form-item">
+                        <label for="markup-date">Date:</label>
+                        <div class="x-form-element">
+                            <input type="text" size="10" value="03/08/03" name="markup-date" id="markup-date" />
+                        </div>
+                    </div>
+                </fieldset>
+
+                <fieldset>
+                    <legend>Live Validation and key filtering</legend>
+
+                    <div class="x-form-item">
+                        <label for="required">Required:</label>
+                        <div class="x-form-element">
+                            <input type="text" size="24" name="required" id="required" />
+                        </div>
+                    </div>
+
+                    <div class="x-form-item">
+                        <label for="alpha">Alpha:</label>
+                        <div class="x-form-element">
+                            <input type="text" size="24" name="alpha" id="alpha" />
+                        </div>
+                    </div>
+
+                    <div class="x-form-item">
+                        <label for="alpha2">(No Filter):</label>
+                        <div class="x-form-element">
+                            <input type="text" size="24" name="alpha2" id="alpha2" />
+                        </div>
+                    </div>
+
+                    <div class="x-form-item">
+                        <label for="alphanum">Alphanum:</label>
+                        <div class="x-form-element">
+                            <input type="text" size="24" name="alphanum" id="alphanum" />
+                        </div>
+                    </div>
+
+                    <div class="x-form-item">
+                        <label for="email">Email:</label>
+                        <div class="x-form-element">
+                            <input type="text" size="32" name="email" id="email" />
+                        </div>
+                    </div>
+
+                    <div class="x-form-item">
+                        <label for="url">URL:</label>
+                        <div class="x-form-element">
+                            <input type="text" size="32" name="url" id="url" />
+                        </div>
+                    </div>
+
+                    <div class="x-form-item">
+                        <label for="url">Auto grow textareas:</label>
+                        <div class="x-form-element">
+                            <textarea name="grow" id="grow" cols="25" rows="3"></textarea>
+                        </div>
+                    </div>
+                </fieldset>
+            </div>
+            <!-- end form layout -->
+        </div></div></div>
+        <div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
+    </div>
+</form>
+</body>
+</html>
+/*
+ * Ext JS Library 1.1 Beta 1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ * licensing@extjs.com
+ * 
+ * http://www.extjs.com/license
+ */
+
+Ext.onReady(function(){
+    Ext.QuickTips.init();
+
+    Ext.MessageBox.alert("Warning", "This example is not done and results may vary.");
+
+    // Change field to default to validation message "under" instead of tooltips
+    Ext.form.Field.prototype.msgTarget = 'under';
+
+
+    var date = new Ext.form.DateField({
+        allowBlank:false
+    });
+
+    date.applyTo('markup-date');
+
+    var tranny = new Ext.form.ComboBox({
+        typeAhead: true,
+        triggerAction: 'all',
+        transform:'light',
+        width:120,
+        forceSelection:true
+    });
+
+    var required = new Ext.form.TextField({
+        allowBlank:false
+    });
+    required.applyTo('required');
+
+    var alpha = new Ext.form.TextField({
+        vtype:'alpha'
+    });
+    alpha.applyTo('alpha');
+
+    var alpha2 = new Ext.form.TextField({
+        vtype:'alpha',
+        disableKeyFilter:true
+    });
+    alpha2.applyTo('alpha2');
+
+    var alphanum = new Ext.form.TextField({
+        vtype:'alphanum'
+    });
+    alphanum.applyTo('alphanum');
+
+    var email = new Ext.form.TextField({
+        allowBlank:false,
+        vtype:'email'
+    });
+    email.applyTo('email');
+
+    var url = new Ext.form.TextField({
+        vtype:'url'
+    });
+    url.applyTo('url');
+
+    var grow = new Ext.form.TextArea({
+        width:200, grow:true
+    });
+    grow.applyTo('grow');
+
+});
 \ No newline at end of file
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+    <title>ComboBox - Live Search</title>
+    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
+
+    <!-- GC --> <!-- LIBS -->     <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>     <!-- ENDLIBS -->
+    <script type="text/javascript" src="../../ext-all.js"></script>
+
+    <script type="text/javascript" src="forum-search.js"></script>
+    <link rel="stylesheet" type="text/css" href="combos.css" />
+
+    <!-- Common Styles for the examples -->
+    <link rel="stylesheet" type="text/css" href="../examples.css" />
+    <style type="text/css">
+        p { width:650px; }
+    </style>
+</head>
+<body>
+<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
+<p>
+    <b>Combo with Templates and Ajax</b><br />
+    This is a more advanced example that shows how you can combine paging, Ext.Template and a remote data store
+    to create a "live search" feature.
+</p>
+<p>The js is not minified so it is readable. See <a href="forum-search.js">forum-search.js</a>.</p>
+
+<!-- The box wrap markup embedded instead of using Element.boxWrap() -->
+<div style="width:600px;">
+    <div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
+    <div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
+        <h3 style="margin-bottom:5px;">Search the Ext Forums</h3>
+        <input type="text" size="40" name="search" id="search" />
+        <div style="padding-top:4px;">
+            Live search requires a minimum of 4 characters.
+        </div>
+    </div></div></div>
+    <div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
+</div>
+        
+</body>
+</html>
+/*
+ * Ext JS Library 1.1 Beta 1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ * licensing@extjs.com
+ * 
+ * http://www.extjs.com/license
+ */
+
+Ext.onReady(function(){
+
+    var ds = new Ext.data.Store({
+        proxy: new Ext.data.ScriptTagProxy({
+            url: 'http://extjs.com/forum/topics-remote.php'
+        }),
+        reader: new Ext.data.JsonReader({
+            root: 'topics',
+            totalProperty: 'totalCount',
+            id: 'post_id'
+        }, [
+            {name: 'title', mapping: 'topic_title'},
+            {name: 'topicId', mapping: 'topic_id'},
+            {name: 'author', mapping: 'author'},
+            {name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},
+            {name: 'excerpt', mapping: 'post_text'}
+        ])
+    });
+
+    // Custom rendering Template
+    var resultTpl = new Ext.Template(
+        '<div class="search-item">',
+            '<h3><span>{lastPost:date("M j, Y")}<br />by {author}</span>{title}</h3>',
+            '{excerpt}',
+        '</div>'
+    );
+    
+    var search = new Ext.form.ComboBox({
+        store: ds,
+        displayField:'title',
+        typeAhead: false,
+        loadingText: 'Searching...',
+        width: 570,
+        pageSize:10,
+        hideTrigger:true,
+        tpl: resultTpl,
+        onSelect: function(record){ // override default onSelect to do redirect
+            window.location =
+                String.format('http://extjs.com/forum/showthread.php?t={0}&p={1}', record.data.topicId, record.id);
+        }
+    });
+    // apply it to the exsting input element
+    search.applyTo('search');
+});
 \ No newline at end of file
+/*
+ * Ext JS Library 1.1 Beta 1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ * licensing@extjs.com
+ * 
+ * http://www.extjs.com/license
+ */
+
+// some data used in the examples
+Ext.namespace('Ext.exampledata');
+
+Ext.exampledata.states = [
+        ['AL', 'Alabama'],
+        ['AK', 'Alaska'],
+        ['AZ', 'Arizona'],
+        ['AR', 'Arkansas'],
+        ['CA', 'California'],
+        ['CO', 'Colorado'],
+        ['CN', 'Connecticut'],
+        ['DE', 'Delaware'],
+        ['DC', 'District of Columbia'],
+        ['FL', 'Florida'],
+        ['GA', 'Georgia'],
+        ['HW', 'Hawaii'],
+        ['ID', 'Idaho'],
+        ['IL', 'Illinois'],
+        ['IN', 'Indiana'],
+        ['IA', 'Iowa'],
+        ['KS', 'Kansas'],
+        ['KY', 'Kentucky'],
+        ['LA', 'Louisiana'],
+        ['MA', 'Maine'],
+        ['MD', 'Maryland'],
+        ['MS', 'Massachusetts'],
+        ['MI', 'Michigan'],
+        ['MN', 'Minnesota'],
+        ['MS', 'Mississippi'],
+        ['MO', 'Missouri'],
+        ['MT', 'Montana'],
+        ['NE', 'Nebraska'],
+        ['NV', 'Nevada'],
+        ['NH', 'New Hampshire'],
+        ['NJ', 'New Jersey'],
+        ['NM', 'New Mexico'],
+        ['NY', 'New York'],
+        ['NC', 'North Carolina'],
+        ['ND', 'North Dakota'],
+        ['OH', 'Ohio'],
+        ['OK', 'Oklahoma'],
+        ['OR', 'Oregon'],
+        ['PA', 'Pennsylvania'],
+        ['RH', 'Rhode Island'],
+        ['SC', 'South Carolina'],
+        ['SD', 'South Dakota'],
+        ['TE', 'Tennessee'],
+        ['TX', 'Texas'],
+        ['UT', 'Utah'],
+        ['VE', 'Vermont'],
+        ['VA', 'Virginia'],
+        ['WA', 'Washington'],
+        ['WV', 'West Virginia'],
+        ['WI', 'Wisconsin'],
+        ['WY', 'Wyoming']
+    ];
 \ No newline at end of file
+<?xml version="1.0" encoding="UTF-8"?>
+<response success="false">
+<errors>
+    <field>
+        <id>first</id>
+        <msg><![CDATA[
+            Invalid name. <br /><i>This is a test validation message from the server </i>
+         ]]></msg>
+    </field>
+    <field>
+        <id>dob</id>
+        <msg><![CDATA[
+            Invalid Date of Birth. <br /><i>This is a test validation message from the server </i>
+         ]]></msg>
+    </field>
+</errors>
+</response>
 \ No newline at end of file
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+<title>XML Form</title>
+<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
+
+    <!-- GC --> <!-- LIBS -->     <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>     <!-- ENDLIBS -->
+    <script type="text/javascript" src="../../ext-all.js"></script>
+
+<script type="text/javascript" src="states.js"></script>
+<script type="text/javascript" src="xml-form.js"></script>
+<link rel="stylesheet" type="text/css" href="forms.css" />
+
+<!-- Common Styles for the examples -->
+<link rel="stylesheet" type="text/css" href="../examples.css" />
+</head>
+<body>
+<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
+<h1>Loading/Saving a Dynamic Form using XML</h1>
+<p>
+    This is a very simple example of using XML for load and submit of data with an Ext dynamic form.
+</p>
+<p>
+    Click "Load" to load the <a href="xml-form.xml">dummy XML data</a> from the server using an XmlReader.
+</p>
+<p>
+    After loading the form, you will be able to hit submit. The submit action will make a post to the server,
+    and the <a href="xml-errors.xml">dummy XML file</a> on the server with test server-side validation failure messages will be sent back.
+    Those messages will be applied to the appropriate fields in the form.
+</p>
+<p>
+    Note: The built-in JSON support does not require any special readers for mapping. However, If you don't like the Form's built-in JSON format, you could also use a JsonReader for reading data into a form.
+</p>
+<p>The js is not minified so it is readable. See <a href="xml-form.js">xml-form.js</a>.</p>
+
+<div style="width:340px;">
+    <div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
+    <div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc" id="box-bd">
+        <h3>XML Form</h3>
+        <div id="form-ct">
+
+        </div>
+    </div></div></div>
+    <div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
+</div>
+<div class="x-form-clear"></div>
+</body>
+</html>
+/*
+ * Ext JS Library 1.1 Beta 1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ * licensing@extjs.com
+ * 
+ * http://www.extjs.com/license
+ */
+
+Ext.onReady(function(){
+
+    Ext.QuickTips.init();
+
+    // turn on validation errors beside the field globally
+    Ext.form.Field.prototype.msgTarget = 'side';
+
+    var fs = new Ext.form.Form({
+        labelAlign: 'right',
+        labelWidth: 75,
+        waitMsgTarget: 'box-bd',
+
+        // configure how to read the XML Data
+        reader : new Ext.data.XmlReader({
+            record : 'contact',
+            success: '@success'
+        }, [
+            {name: 'first', mapping:'name/first'}, // custom mapping
+            {name: 'last', mapping:'name/last'},
+            'company', 'email', 'state',
+            {name: 'dob', type:'date', dateFormat:'m/d/Y'} // custom data types
+        ]),
+
+        // reusable eror reader class defined at the end of this file
+        errorReader: new Ext.form.XmlErrorReader()
+    });
+
+    fs.fieldset(
+        {legend:'Contact Information'},
+        new Ext.form.TextField({
+            fieldLabel: 'First Name',
+            name: 'first',
+            width:190
+        }),
+
+        new Ext.form.TextField({
+            fieldLabel: 'Last Name',
+            name: 'last',
+            width:190
+        }),
+
+        new Ext.form.TextField({
+            fieldLabel: 'Company',
+            name: 'company',
+            width:190
+        }),
+
+        new Ext.form.TextField({
+            fieldLabel: 'Email',
+            name: 'email',
+            vtype:'email',
+            width:190
+        }),
+
+        new Ext.form.ComboBox({
+            fieldLabel: 'State',
+            hiddenName:'state',
+            store: new Ext.data.SimpleStore({
+                fields: ['abbr', 'state'],
+                data : Ext.exampledata.states // from states.js
+            }),
+            valueField:'abbr',
+            displayField:'state',
+            typeAhead: true,
+            mode: 'local',
+            triggerAction: 'all',
+            emptyText:'Select a state...',
+            selectOnFocus:true,
+            width:190
+        }),
+
+        new Ext.form.DateField({
+            fieldLabel: 'Date of Birth',
+            name: 'dob',
+            width:190,
+            allowBlank:false
+        })
+    );
+
+    // simple button add
+    fs.addButton('Load', function(){
+        fs.load({url:'xml-form.xml', waitMsg:'Loading'});
+    });
+
+    // explicit add
+    var submit = fs.addButton({
+        text: 'Submit',
+        disabled:true,
+        handler: function(){
+            fs.submit({url:'xml-errors.xml', waitMsg:'Saving Data...'});
+        }
+    });
+
+    fs.render('form-ct');
+
+    fs.on({
+        actioncomplete: function(form, action){
+            if(action.type == 'load'){
+                submit.enable();
+            }
+        }
+    });
+
+});
+
+// A reusable error reader class for XML forms
+Ext.form.XmlErrorReader = function(){
+    Ext.form.XmlErrorReader.superclass.constructor.call(this, {
+            record : 'field',
+            success: '@success'
+        }, [
+            'id', 'msg'
+        ]
+    );
+};
+Ext.extend(Ext.form.XmlErrorReader, Ext.data.XmlReader);
 \ No newline at end of file
+<?xml version="1.0" encoding="UTF-8"?>
+<response success="true">
+<contact>
+    <name>
+        <first>Jack</first>
+        <last>Slocum</last>
+    </name>
+    <company>Ext JS</company>
+    <email>support@extjs.com</email>
+    <state>OH</state>
+    <dob>04/15/2007</dob>
+</contact>
+</response>
 \ No newline at end of file
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+<title>Array Grid Example</title>
+
+    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
+
+    <!-- GC --> <!-- LIBS -->     <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>     <!-- ENDLIBS -->
+    <script type="text/javascript" src="../../ext-all.js"></script>
+
+    <script type="text/javascript" src="array-grid.js"></script>
+    <link rel="stylesheet" type="text/css" href="grid-examples.css" />
+
+    <!-- Common Styles for the examples -->
+    <link rel="stylesheet" type="text/css" href="../examples.css" />
+</head>
+<body>
+<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
+<h1>Array Grid Example</h1>
+<p>This example shows how to create a grid from Array data. For more details on this example, see <a href="http://www.jackslocum.com/yui/2006/08/30/a-grid-component-for-yahoo-ui-extensions-v1/">the blog post</a>.</p>
+<p>Note that the js is not minified so it is readable. See <a href="array-grid.js">array-grid.js</a>.</p>
+
+<div id="grid-panel" style="width:600px;height:300px;">
+<div id="grid-example"></div>
+</div>
+</body>
+</html>
+/*
+ * Ext JS Library 1.1 Beta 1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ * licensing@extjs.com
+ * 
+ * http://www.extjs.com/license
+ */
+
+var Example = {
+    init : function(){
+        // some data yanked off the web
+        var myData = [
+			['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
+            ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
+            ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
+            ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
+            ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
+            ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
+            ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
+            ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
+            ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
+            ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
+            ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
+            ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
+            ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
+            ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
+            ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
+            ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
+            ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
+            ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
+            ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
+            ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
+            ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
+            ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
+            ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
+            ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
+            ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
+            ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
+            ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
+            ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
+            ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'],
+            ['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am']
+		];
+
+        var ds = new Ext.data.Store({
+		        proxy: new Ext.data.MemoryProxy(myData),
+		        reader: new Ext.data.ArrayReader({}, [
+                       {name: 'company'},
+                       {name: 'price', type: 'float'},
+                       {name: 'change', type: 'float'},
+                       {name: 'pctChange', type: 'float'},
+                       {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
+                  ])
+        });
+        ds.load();
+
+		// example of custom renderer function
+        function italic(value){
+            return '<i>' + value + '</i>';
+        }
+
+		// example of custom renderer function
+        function change(val){
+            if(val > 0){
+                return '<span style="color:green;">' + val + '</span>';
+            }else if(val < 0){
+                return '<span style="color:red;">' + val + '</span>';
+            }
+            return val;
+        }
+		// example of custom renderer function
+        function pctChange(val){
+		    if(val > 0){
+		        return '<span style="color:green;">' + val + '%</span>';
+		    }else if(val < 0){
+		        return '<span style="color:red;">' + val + '%</span>';
+		    }
+		    return val;
+		}
+
+		// the DefaultColumnModel expects this blob to define columns. It can be extended to provide
+        // custom or reusable ColumnModels
+        var colModel = new Ext.grid.ColumnModel([
+			{id:'company',header: "Company", width: 160, sortable: true, locked:false, dataIndex: 'company'},
+			{header: "Price", width: 75, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
+			{header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
+			{header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
+			{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
+		]);
+
+
+        // create the Grid
+        var grid = new Ext.grid.Grid('grid-example', {
+            ds: ds,
+            cm: colModel,
+            autoExpandColumn: 'company'
+        });
+        
+        var layout = Ext.BorderLayout.create({
+            center: {
+                margins:{left:3,top:3,right:3,bottom:3},
+                panels: [new Ext.GridPanel(grid)]
+            }
+        }, 'grid-panel');
+
+        grid.render();
+        
+
+        grid.getSelectionModel().selectFirstRow();
+    }
+};
+Ext.onReady(Example.init, Example);
 \ No newline at end of file
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+<title>Customizing the Grid</title>
+
+<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
+
+    <!-- GC --> <!-- LIBS -->     <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>     <!-- ENDLIBS -->
+    <script type="text/javascript" src="../../ext-all.js"></script>
+    
+<!--
+    <script type="text/javascript" src="custom-grid.js"></script>
+-->
+    <script type="text/javascript" >
+    // create the property grid application (single instance)
+    var CustGrid = function() {
+        return {
+            init : function() {
+                var propsGrid = new Ext.grid.PropertyGrid('props-grid', {
+                    nameText: 'Properties Grid',
+                    enableHdMenu: false,
+                    viewConfig : {
+                        forceFit:true,
+                        scrollOffset:2 // the grid will never have scrollbars
+                    }
+                });
+
+                propsGrid.setSource({
+                    "(name)": "Properties Grid",
+                    "grouping": false,
+                    "autoFitColumns": true,
+                    "productionQuality": false,
+                    "created": new Date(Date.parse('10/15/2006')),
+                    "tested": false,
+                    "version": .01,
+                    "borderWidth": 1
+                });
+                
+                propsGrid.render();
+            }
+        };
+    }();
+
+    Ext.onReady(CustGrid.init, CustGrid, true);
+
+    </script>
+
+<!-- Common Styles for the examples -->
+<link rel="stylesheet" type="text/css" href="../examples.css" />
+</head>
+<body>
+<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
+<h1>Property Grid</h1>
+
+<!-- a place holder for the grid. requires the unique id to be passed in the javascript function, and width and height ! -->
+<div id="props-grid" style="overflow: hidden; width: 275px;border:1px solid #c3daf9;"></div>
+
+</body>
+</html>
+/*
+ * Ext JS Library 1.1 Beta 1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ * licensing@extjs.com
+ * 
+ * http://www.extjs.com/license
+ */
+
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+<title>Editor Grid Example</title>
+
+<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
+
+    <!-- GC --> <!-- LIBS -->     <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>     <!-- ENDLIBS -->
+    <script type="text/javascript" src="../../ext-all.js"></script>
+
+    <script type="text/javascript" src="edit-grid.js"></script>
+    <link rel="stylesheet" type="text/css" href="grid-examples.css" />
+
+<!-- Common Styles for the examples -->
+<link rel="stylesheet" type="text/css" href="../examples.css" />
+</head>
+<body>
+<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
+<h1>Editor Grid Example</h1>
+<p>This example shows how to create a grid with inline editing. For more details on this example, see <a href="http://www.jackslocum.com/yui/2006/09/10/adding-built-in-editing-support-to-the-yahoo-ui-extensions-grid/">the blog post</a>.</p>
+<p>Note that the js is not minified so it is readable. See <a href="edit-grid.js">edit-grid.js</a>.</p>
+
+<p>The data in the grid is loaded from <a href="plants.xml">plants.xml</a>.</p>
+
+<!-- you must define the select box here, as the custom editor for the 'Light' column will require it -->
+<select name="light" id="light" style="display: none;">
+	<option value="Shade">Shade</option>
+	<option value="Mostly Shady">Mostly Shady</option>
+	<option value="Sun or Shade">Sun or Shade</option>
+
+	<option value="Mostly Sunny">Mostly Sunny</option>
+
+	<option value="Sunny">Sunny</option>
+</select>
+
+<div id="grid-panel" style="width:600px;height:300px;">
+<div id="editor-grid"></div>
+</div>
+</body>
+</html>
+/*
+ * Ext JS Library 1.1 Beta 1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ * licensing@extjs.com
+ * 
+ * http://www.extjs.com/license
+ */
+
+Ext.onReady(function(){
+    Ext.QuickTips.init();
+    function formatBoolean(value){
+        return value ? 'Yes' : 'No';  
+    };
+    
+    function formatDate(value){
+        return value ? value.dateFormat('M d, Y') : '';
+    };
+    // shorthand alias
+    var fm = Ext.form, Ed = Ext.grid.GridEditor;
+
+    // the column model has information about grid columns
+    // dataIndex maps the column to the specific data field in
+    // the data store (created below)
+    var cm = new Ext.grid.ColumnModel([{
+           header: "Common Name",
+           dataIndex: 'common',
+           width: 220,
+           editor: new Ed(new fm.TextField({
+               allowBlank: false
+           }))
+        },{
+           header: "Light",
+           dataIndex: 'light',
+           width: 130,
+           editor: new Ed(new Ext.form.ComboBox({
+               typeAhead: true,
+               triggerAction: 'all',
+               transform:'light',
+               lazyRender:true
+            }))
+        },{
+           header: "Price",
+           dataIndex: 'price',
+           width: 70,
+           align: 'right',
+           renderer: 'usMoney',
+           editor: new Ed(new fm.NumberField({
+               allowBlank: false,
+               allowNegative: false,
+               maxValue: 10
+           }))
+        },{
+           header: "Available",
+           dataIndex: 'availDate',
+           width: 95,
+           renderer: formatDate,
+           editor: new Ed(new fm.DateField({
+                format: 'm/d/y',
+                minValue: '01/01/06',
+                disabledDays: [0, 6],
+                disabledDaysText: 'Plants are not available on the weekends'
+            }))
+        },{
+           header: "Indoor?",
+           dataIndex: 'indoor',
+           width: 55,
+           renderer: formatBoolean,
+           editor: new Ed(new fm.Checkbox())
+        }]);
+
+    // by default columns are sortable
+    cm.defaultSortable = true;
+
+    // this could be inline, but we want to define the Plant record
+    // type so we can add records dynamically
+    var Plant = Ext.data.Record.create([
+           // the "name" below matches the tag name to read, except "availDate"
+           // which is mapped to the tag "availability"
+           {name: 'common', type: 'string'},
+           {name: 'botanical', type: 'string'},
+           {name: 'light'},
+           {name: 'price', type: 'float'},             // automatic date conversions
+           {name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},
+           {name: 'indoor', type: 'bool'}
+      ]);
+
+    // create the Data Store
+    var ds = new Ext.data.Store({
+        // load using HTTP
+        proxy: new Ext.data.HttpProxy({url: 'plants.xml'}),
+
+        // the return will be XML, so lets set up a reader
+        reader: new Ext.data.XmlReader({
+               // records will have a "plant" tag
+               record: 'plant'
+           }, Plant)
+    });
+
+    // create the editor grid
+    var grid = new Ext.grid.EditorGrid('editor-grid', {
+        ds: ds,
+        cm: cm,
+        //selModel: new Ext.grid.RowSelectionModel(),
+        enableColLock:false
+    });
+
+    var layout = Ext.BorderLayout.create({
+        center: {
+            margins:{left:3,top:3,right:3,bottom:3},
+            panels: [new Ext.GridPanel(grid)]
+        }
+    }, 'grid-panel');
+
+
+    // render it
+    grid.render();
+
+    
+    var gridHead = grid.getView().getHeaderPanel(true);
+    var tb = new Ext.Toolbar(gridHead, [{
+        text: 'Add Plant',
+        handler : function(){
+            var p = new Plant({
+                common: 'New Plant 1',
+                light: 'Mostly Shade',
+                price: 0,
+                availDate: new Date(),
+                indoor: false
+            });
+            grid.stopEditing();
+            ds.insert(0, p);
+            grid.startEditing(0, 0);
+        }
+    }]);
+
+    // trigger the data store load
+    ds.load();
+});
 \ No newline at end of file
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+<title>From Markup Grid Example</title>
+<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
+<!-- GC --> <!-- LIBS -->     <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>     <!-- ENDLIBS -->
+<script type="text/javascript" src="../../ext-all.js"></script>
+<script type="text/javascript" src="from-markup.js"></script>
+<link rel="stylesheet" type="text/css" href="grid-examples.css" />
+<!-- Common Styles for the examples -->
+<link rel="stylesheet" type="text/css" href="../examples.css" />
+<style type="text/css">
+#the-table { border:1px solid #bbb;border-collapse:collapse; }
+#the-table td,#the-table th { border:1px solid #ccc;border-collapse:collapse;padding:5px; }
+</style>
+</head>
+<body>
+<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
+<h1>From Markup Grid Example</h1>
+<p>This example shows how to create a grid with from an existing, unformatted HTML table.</p>
+<p>Note that the js is not minified so it is readable. See <a href="from-markup.js">from-markup.js</a>.</p>
+<button id="create-grid" type="button">Create grid</button>
+<br />
+<br />
+<table cellspacing="0" id="the-table">
+        <thead>
+            <tr style="background:#eeeeee;">
+                <th>Name</th>
+                <th>Age</th>
+                <th>Sex</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>Barney Rubble</td>
+                <td>32</td>
+                <td>Male</td>
+            </tr>
+            <tr>
+                <td>Fred Flintstone</td>
+                <td>33</td>
+                <td>Male</td>
+            </tr>
+            <tr>
+                <td>Betty Rubble</td>
+                <td>32</td>
+                <td>Female</td>
+            </tr>
+            <tr>
+                <td>Pebbles</td>
+                <td>1</td>
+                <td>Female</td>
+            </tr>
+            <tr>
+                <td>Bamm Bamm</td>
+                <td>2</td>
+                <td>Male</td>
+            </tr>
+        </tbody>
+    </table>
+
+</body>
+</html>
 \ No newline at end of file
+/*
+ * Ext JS Library 1.1 Beta 1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ * licensing@extjs.com
+ * 
+ * http://www.extjs.com/license
+ */
+
+Ext.onReady(function() {
+    var btn = Ext.get("create-grid");
+    btn.on("click", function(){
+        btn.dom.disabled = true;
+
+        // create the grid
+        var grid = new Ext.grid.TableGrid("the-table");
+        grid.render();
+
+    }, false, {single:true}); // run once
+});
+
+/**
+ * @class Ext.grid.TableGrid
+ * @extends Ext.grid.Grid
+ * A Grid which creates itself from an existing HTML table element.
+ * @constructor
+ * @param {String/HTMLElement/Ext.Element} table The table element from which this grid will be created - 
+ * The table MUST have some type of size defined for the grid to fill. The container will be 
+ * automatically set to position relative if it isn't already.
+ * @param {Object} config A config object that sets properties on this grid and has two additional (optional)
+ * properties: fields and columns which allow for customizing data fields and columns for this grid.
+ * @history
+ * 2007-03-01 Original version by Nige "Animal" White
+ * 2007-03-10 jvs Slightly refactored to reuse existing classes
+ */
+Ext.grid.TableGrid = function(table, config) {
+    config = config || {};
+    var cf = config.fields || [], ch = config.columns || [];
+    table = Ext.get(table);
+
+    var ct = table.insertSibling();
+
+    var fields = [], cols = [];
+    var headers = table.query("thead th");
+	for (var i = 0, h; h = headers[i]; i++) {
+		var text = h.innerHTML;
+		var name = 'tcol-'+i;
+
+        fields.push(Ext.applyIf(cf[i] || {}, {
+            name: name,
+            mapping: 'td:nth('+(i+1)+')/@innerHTML'
+        }));
+
+		cols.push(Ext.applyIf(ch[i] || {}, {
+			'header': text,
+			'dataIndex': name,
+			'width': h.offsetWidth,
+			'tooltip': h.title,
+            'sortable': true
+        }));
+	}
+
+    var ds  = new Ext.data.Store({
+        reader: new Ext.data.XmlReader({
+            record:'tbody tr'
+        }, fields)
+    });
+
+	ds.loadData(table.dom);
+
+    var cm = new Ext.grid.ColumnModel(cols);
+
+    if(config.width || config.height){
+        ct.setSize(config.width || 'auto', config.height || 'auto');
+    }
+    if(config.remove !== false){
+        table.remove();
+    }
+
+    Ext.grid.TableGrid.superclass.constructor.call(this, ct,
+        Ext.applyIf(config, {
+            'ds': ds,
+            'cm': cm,
+            'sm': new Ext.grid.RowSelectionModel(),
+            autoHeight:true,
+            autoWidth:true
+        }
+    ));
+};
+
+Ext.extend(Ext.grid.TableGrid, Ext.grid.Grid);
 \ No newline at end of file
+/*
+ * Ext JS Library 1.1 Beta 1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ * licensing@extjs.com
+ * 
+ * http://www.extjs.com/license
+ */
+
+#grid-example .x-grid-col-1 {
+	text-align: right;
+}
+#grid-example .x-grid-col-2{
+	text-align: right;
+}
+#grid-example .x-grid-col-3 {
+	text-align: right;
+}
+#grid-example .x-grid-col-4 {
+	text-align: right;
+}
+#grid-example.x-grid-mso{
+	border: 1px solid #6593cf;
+}
+#grid-example.x-grid-vista{
+	border: 1px solid #b3bcc0;
+}
+#xml-grid-example{
+	border: 1px solid #cbc7b8;
+	left: 0;
+	position: relative;
+	top: 0;
+}
+#xml-grid-example.x-grid-mso{
+	border: 1px solid #6593cf;
+}
+#xml-grid-example.x-grid-vista{
+	border: 1px solid #b3bcc0;
+}
+#editor-grid .x-grid-col-2{
+    text-align:right;
+}
+.x-grid-col-topic b {
+    font-family:tahoma, verdana;
+    color:#333;
+    display:block;
+    padding-left:18px;
+    line-height:18px;
+    vertical-align:middle;
+    background:transparent url(topic.gif) no-repeat left 1px;
+}
+.x-grid-col-topic b i {
+    font-weight:normal;
+    font-style: normal;
+    color:#000;
+}
+.details .x-btn-text {
+    background-image: url(details.gif);
+}
+.x-resizable-pinned .x-resizable-handle-south{
+    background:url(../../resources/images/default/sizer/s-handle-dark.gif);
+    background-position: top;
+}
 \ No newline at end of file
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+<title>Paging Grid Example</title>
+
+<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
+
+    <!-- GC --> <!-- LIBS -->     <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>     <!-- ENDLIBS -->
+    <script type="text/javascript" src="../../ext-all.js"></script>
+    
+<script type="text/javascript" src="paging.js"></script>
+<link rel="stylesheet" type="text/css" href="grid-examples.css" />
+
+<!-- Common Styles for the examples -->
+<link rel="stylesheet" type="text/css" href="../examples.css" />
+</head>
+<body>
+<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
+<h1>Paging Grid Example</h1>
+<p>This example shows how to create a grid with paging. This grid uses a ScriptTagProxy to fetch cross-domain
+    remote data (from the Ext forums).</p>
+<p>Note that the js is not minified so it is readable. See <a href="paging.js">paging.js</a>.</p>
+
+    <div style="width:694px;" class="x-box-blue">
+        <div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
+        <div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
+            <h3 style="margin-bottom:5px;">Ext - Help Forum</h3>
+            <div id="topic-grid" style="border:1px solid #99bbe8;overflow: hidden; width: 665px; height: 300px;"></div>
+        </div></div></div>
+        <div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
+    </div>
+
+
+</body>
+</html>
+/*
+ * Ext JS Library 1.1 Beta 1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ * licensing@extjs.com
+ * 
+ * http://www.extjs.com/license
+ */
+
+Ext.onReady(function(){
+
+    // create the Data Store
+    var ds = new Ext.data.Store({
+        // load using script tags for cross domain, if the data in on the same domain as
+        // this page, an HttpProxy would be better
+        proxy: new Ext.data.ScriptTagProxy({
+            url: 'http://extjs.com/forum/topics-remote.php'
+        }),
+
+        // create reader that reads the Topic records
+        reader: new Ext.data.JsonReader({
+            root: 'topics',
+            totalProperty: 'totalCount',
+            id: 'post_id'
+        }, [
+            {name: 'title', mapping: 'topic_title'},
+            {name: 'author', mapping: 'author'},
+            {name: 'totalPosts', mapping: 'topic_replies', type: 'int'},
+            {name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},
+            {name: 'excerpt', mapping: 'post_text'}
+        ]),
+
+        // turn on remote sorting
+        remoteSort: true
+    });
+
+
+    // pluggable renders
+    function renderTopic(value, p, record){
+        return String.format('<b>{0}</b>{1}', value, record.data['excerpt']);
+    }
+    function renderTopicPlain(value){
+        return String.format('<b><i>{0}</i></b>', value);
+    }
+    function renderLast(value, p, r){
+        return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['author']);
+    }
+    function renderLastPlain(value){
+        return value.dateFormat('M j, Y, g:i a');
+    }
+
+    // the column model has information about grid columns
+    // dataIndex maps the column to the specific data field in
+    // the data store
+    var cm = new Ext.grid.ColumnModel([{
+           id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
+           header: "Topic",
+           dataIndex: 'title',
+           width: 490,
+           renderer: renderTopic,
+           css: 'white-space:normal;'
+        },{
+           header: "Author",
+           dataIndex: 'author',
+           width: 100,
+           hidden: true
+        },{
+           id: 'last',
+           header: "Last Post",
+           dataIndex: 'lastPost',
+           width: 150,
+           renderer: renderLast
+        }]);
+
+    
+
+    // create the editor grid
+    var grid = new Ext.grid.Grid('topic-grid', {
+        ds: ds,
+        cm: cm,
+        selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
+        enableColLock:false,
+        loadMask: true
+    });
+
+    // make the grid resizable, do before render for better performance
+    var rz = new Ext.Resizable('topic-grid', {
+        wrap:true,
+        minHeight:100,
+        pinned:true,
+        handles: 's'
+    });
+    rz.on('resize', grid.autoSize, grid);
+
+    // render it
+    grid.render();
+
+    var gridFoot = grid.getView().getFooterPanel(true);
+
+    // add a paging toolbar to the grid's footer
+    var paging = new Ext.PagingToolbar(gridFoot, ds, {
+        pageSize: 25,
+        displayInfo: true,
+        displayMsg: 'Displaying topics {0} - {1} of {2}',
+        emptyMsg: "No topics to display"
+    });
+    // add the detailed view button
+    paging.add('-', {
+        pressed: true,
+        enableToggle:true,
+        text: 'Detailed View',
+        cls: 'x-btn-text-icon details',
+        toggleHandler: toggleDetails
+    });
+
+    // trigger the data store load
+    ds.load({params:{start:0, limit:25}});
+
+    function toggleDetails(btn, pressed){
+        cm.getColumnById('topic').renderer = pressed ? renderTopic : renderTopicPlain;
+        cm.getColumnById('last').renderer = pressed ? renderLast : renderLastPlain;
+        grid.getView().refresh();
+    }
+});
+<?xml version="1.0" encoding="ISO-8859-1"?>
+<catalog>
+  <plant>
+    <common>Bloodroot</common>
+    <botanical>Sanguinaria canadensis</botanical>
+    <zone>4</zone>
+    <light>Mostly Shady</light>
+    <price>2.44</price>
+    <availability>03/15/2006</availability>
+    <indoor>true</indoor>
+  </plant>
+  <plant>
+    <common>Columbine</common>
+    <botanical>Aquilegia canadensis</botanical>
+    <zone>3</zone>
+    <light>Mostly Shady</light>
+    <price>9.37</price>
+    <availability>03/06/2006</availability>
+    <indoor>true</indoor>
+  </plant>
+  <plant>
+    <common>Marsh Marigold</common>
+    <botanical>Caltha palustris</botanical>
+    <zone>4</zone>
+    <light>Mostly Sunny</light>
+    <price>6.81</price>
+    <availability>05/17/2006</availability>
+    <indoor>false</indoor>
+  </plant>
+  <plant>
+    <common>Cowslip</common>
+    <botanical>Caltha palustris</botanical>
+    <zone>4</zone>
+    <light>Mostly Shady</light>
+    <price>9.90</price>
+    <availability>03/06/2006</availability>
+    <indoor>true</indoor>
+  </plant>
+  <plant>
+    <common>Dutchman's-Breeches</common>
+    <botanical>Dicentra cucullaria</botanical>
+    <zone>3</zone>
+    <light>Mostly Shady</light>
+    <price>6.44</price>
+    <availability>01/20/2006</availability>
+    <indoor>true</indoor>
+  </plant>
+  <plant>
+    <common>Ginger, Wild</common>
+    <botanical>Asarum canadense</botanical>
+    <zone>3</zone>
+    <light>Mostly Shady</light>
+    <price>9.03</price>
+    <availability>04/18/2006</availability>
+    <indoor>true</indoor>
+  </plant>
+  <plant>
+    <common>Hepatica</common>
+    <botanical>Hepatica americana</botanical>
+    <zone>4</zone>
+    <light>Mostly Shady</light>
+    <price>4.45</price>
+    <availability>01/26/2006</availability>
+    <indoor>true</indoor>
+  </plant>
+  <plant>
+    <common>Liverleaf</common>
+    <botanical>Hepatica americana</botanical>
+    <zone>4</zone>
+    <light>Mostly Shady</light>
+    <price>3.99</price>
+    <availability>01/02/2006</availability>
+    <indoor>true</indoor>
+  </plant>
+  <plant>
+    <common>Jack-In-The-Pulpit</common>
+    <botanical>Arisaema triphyllum</botanical>
+    <zone>4</zone>
+    <light>Mostly Shady</light>
+    <price>3.23</price>
+    <availability>02/01/2006</availability>
+    <indoor>true</indoor>
+  </plant>
+  <plant>
+    <common>Mayapple</common>
+    <botanical>Podophyllum peltatum</botanical>
+    <zone>3</zone>
+    <light>Mostly Shady</light>
+    <price>2.98</price>
+    <availability>06/05/2006</availability>
+    <indoor>true</indoor>
+  </plant>
+  <plant>
+    <common>Phlox, Woodland</common>
+    <botanical>Phlox divaricata</botanical>
+    <zone>3</zone>
+    <light>Sun or Shade</light>
+    <price>2.80</price>
+    <availability>01/22/2006</availability>
+    <indoor>false</indoor>
+  </plant>
+  <plant>
+    <common>Phlox, Blue</common>
+    <botanical>Phlox divaricata</botanical>
+    <zone>3</zone>
+    <light>Sun or Shade</light>
+    <price>5.59</price>
+    <availability>02/16/2006</availability>
+    <indoor>false</indoor>
+  </plant>
+  <plant>
+    <common>Spring-Beauty</common>
+    <botanical>Claytonia Virginica</botanical>
+    <zone>7</zone>
+    <light>Mostly Shady</light>
+    <price>6.59</price>
+    <availability>02/01/2006</availability>
+    <indoor>true</indoor>
+  </plant>
+  <plant>
+    <common>Trillium</common>
+    <botanical>Trillium grandiflorum</botanical>
+    <zone>5</zone>
+    <light>Sun or Shade</light>
+    <price>3.90</price>
+    <availability>04/29/2006</availability>
+    <indoor>false</indoor>
+  </plant>
+  <plant>
+    <common>Wake Robin</common>
+    <botanical>Trillium grandiflorum</botanical>
+    <zone>5</zone>
+    <light>Sun or Shade</light>
+    <price>3.20</price>
+    <availability>02/21/2006</availability>
+    <indoor>false</indoor>
+  </plant>
+  <plant>
+    <common>Violet, Dog-Tooth</common>
+    <botanical>Erythronium americanum</botanical>
+    <zone>4</zone>
+    <light>Shade</light>
+    <price>9.04</price>
+    <availability>02/01/2006</availability>
+    <indoor>true</indoor>
+  </plant>
+  <plant>
+    <common>Trout Lily</common>
+    <botanical>Erythronium americanum</botanical>
+    <zone>4</zone>
+    <light>Shade</light>
+    <price>6.94</price>
+    <availability>03/24/2006</availability>
+    <indoor>true</indoor>
+  </plant>
+  <plant>
+    <common>Adder's-Tongue</common>
+    <botanical>Erythronium americanum</botanical>
+    <zone>4</zone>
+    <light>Shade</light>
+    <price>9.58</price>
+    <availability>04/13/2006</availability>
+    <indoor>true</indoor>
+  </plant>
+  <plant>
+    <common>Anemone</common>
+    <botanical>Anemone blanda</botanical>
+    <zone>6</zone>
+    <light>Mostly Shady</light>
+    <price>8.86</price>
+    <availability>12/26/2006</availability>
+    <indoor>true</indoor>
+  </plant>
+  <plant>
+    <common>Grecian Windflower</common>
+    <botanical>Anemone blanda</botanical>
+    <zone>6</zone>
+    <light>Mostly Shady</light>
+    <price>9.16</price>
+    <availability>07/10/2006</availability>
+    <indoor>true</indoor>
+  </plant>
+  <plant>
+    <common>Bee Balm</common>
+    <botanical>Monarda didyma</botanical>
+    <zone>4</zone>
+    <light>Shade</light>
+    <price>4.59</price>
+    <availability>05/03/2006</availability>
+    <indoor>true</indoor>
+  </plant>
+  <plant>
+    <common>Bergamot</common>
+    <botanical>Monarda didyma</botanical>
+    <zone>4</zone>
+    <light>Shade</light>
+    <price>7.16</price>
+    <availability>04/27/2006</availability>
+    <indoor>true</indoor>
+  </plant>
+  <plant>
+    <common>Black-Eyed Susan</common>
+    <botanical>Rudbeckia hirta</botanical>
+    <zone>Annual</zone>
+    <light>Sunny</light>
+    <price>9.80</price>
+    <availability>06/18/2006</availability>
+    <indoor>false</indoor>
+  </plant>
+  <plant>
+    <common>Buttercup</common>
+    <botanical>Ranunculus</botanical>
+    <zone>4</zone>
+    <light>Shade</light>
+    <price>2.57</price>
+    <availability>06/10/2006</availability>
+    <indoor>true</indoor>
+  </plant>
+  <plant>
+    <common>Crowfoot</common>
+    <botanical>Ranunculus</botanical>
+    <zone>4</zone>
+    <light>Shade</light>
+    <price>9.34</price>
+    <availability>04/03/2006</availability>
+    <indoor>true</indoor>
+  </plant>
+  <plant>
+    <common>Butterfly Weed</common>
+    <botanical>Asclepias tuberosa</botanical>
+    <zone>Annual</zone>
+    <light>Sunny</light>
+    <price>2.78</price>
+    <availability>06/30/2006</availability>
+    <indoor>false</indoor>
+  </plant>
+  <plant>
+    <common>Cinquefoil</common>
+    <botanical>Potentilla</botanical>
+    <zone>Annual</zone>
+    <light>Shade</light>
+    <price>7.06</price>
+    <availability>05/25/2006</availability>
+    <indoor>true</indoor>
+  </plant>
+  <plant>
+    <common>Primrose</common>
+    <botanical>Oenothera</botanical>
+    <zone>3 - 5</zone>
+    <light>Sunny</light>
+    <price>6.56</price>
+    <availability>01/30/2006</availability>
+    <indoor>false</indoor>
+  </plant>
+  <plant>
+    <common>Gentian</common>
+    <botanical>Gentiana</botanical>
+    <zone>4</zone>
+    <light>Sun or Shade</light>
+    <price>7.81</price>
+    <availability>05/18/2006</availability>
+    <indoor>false</indoor>
+  </plant>
+  <plant>
+    <common>Blue Gentian</common>
+    <botanical>Gentiana</botanical>
+    <zone>4</zone>
+    <light>Sun or Shade</light>
+    <price>8.56</price>
+    <availability>05/02/2006</availability>
+    <indoor>false</indoor>
+  </plant>
+  <plant>
+    <common>Jacob's Ladder</common>
+    <botanical>Polemonium caeruleum</botanical>
+    <zone>Annual</zone>
+    <light>Shade</light>
+    <price>9.26</price>
+    <availability>02/21/2006</availability>
+    <indoor>true</indoor>
+  </plant>
+  <plant>
+    <common>Greek Valerian</common>
+    <botanical>Polemonium caeruleum</botanical>
+    <zone>Annual</zone>
+    <light>Shade</light>
+    <price>4.36</price>
+    <availability>07/14/2006</availability>
+    <indoor>true</indoor>
+  </plant>
+  <plant>
+    <common>California Poppy</common>
+    <botanical>Eschscholzia californica</botanical>
+    <zone>Annual</zone>
+    <light>Sunny</light>
+    <price>7.89</price>
+    <availability>03/27/2006</availability>
+    <indoor>false</indoor>
+  </plant>
+  <plant>
+    <common>Shooting Star</common>
+    <botanical>Dodecatheon</botanical>
+    <zone>Annual</zone>
+    <light>Mostly Shady</light>
+    <price>8.60</price>
+    <availability>05/13/2006</availability>
+    <indoor>true</indoor>
+  </plant>
+  <plant>
+    <common>Snakeroot</common>
+    <botanical>Cimicifuga</botanical>
+    <zone>Annual</zone>
+    <light>Shade</light>
+    <price>5.63</price>
+    <availability>07/11/2006</availability>
+    <indoor>true</indoor>
+  </plant>
+  <plant>
+    <common>Cardinal Flower</common>
+    <botanical>Lobelia cardinalis</botanical>
+    <zone>2</zone>
+    <light>Shade</light>
+    <price>3.02</price>
+    <availability>02/22/2006</availability>
+    <indoor>true</indoor>
+  </plant>
+</catalog>
 \ No newline at end of file
+<?xml version="1.0" encoding="UTF-8"?>
+<ItemSearchResponse xmlns="http://webservices.amazon.com/AWSECommerceService/2006-06-28">
+    <OperationRequest>
+        <HTTPHeaders>
+            <Header Name="UserAgent"
+                    Value="Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Avant Browser; Avant Browser; .NET CLR 1.0.3705; .NET CLR 2.0.50727; .NET CLR 1.1.4322; Media Center PC 4.0; InfoPath.2)"></Header>
+        </HTTPHeaders>
+        <RequestId>18CZWZFXKSV8F601AGMF</RequestId>
+        <Arguments>
+            <Argument Name="Service" Value="AWSECommerceService"></Argument>
+            <Argument Name="AssociateTag" Value="ws"></Argument>
+            <Argument Name="SearchIndex" Value="Books"></Argument>
+            <Argument Name="Author" Value="Sidney Sheldon"></Argument>
+            <Argument Name="SubscriptionId" Value="1A7XKHR5BYD0WPJVQEG2"></Argument>
+            <Argument Name="Version" Value="2006-06-28"></Argument>
+            <Argument Name="Operation" Value="ItemSearch"></Argument>
+        </Arguments>
+        <RequestProcessingTime>1.05041599273682</RequestProcessingTime>
+    </OperationRequest>
+    <Items>
+        <Request>
+            <IsValid>True</IsValid>
+            <ItemSearchRequest>
+                <Author>Sidney Sheldon</Author>
+                <SearchIndex>Books</SearchIndex>
+            </ItemSearchRequest>
+        </Request>
+        <TotalResults>203</TotalResults>
+        <TotalPages>21</TotalPages>
+        <Item>
+            <ASIN>0446355453</ASIN>
+            <DetailPageURL>
+                http://www.amazon.com/gp/redirect.html%3FASIN=0446355453%26tag=ws%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/0446355453%253FSubscriptionId=1A7XKHR5BYD0WPJVQEG2
+            </DetailPageURL>
+            <ItemAttributes>
+                <Author>Sidney Sheldon</Author>
+                <Manufacturer>Warner Books</Manufacturer>
+                <ProductGroup>Book</ProductGroup>
+                <Title>Master of the Game</Title>
+            </ItemAttributes>
+        </Item>
+        <Item>
+            <ASIN>0446613657</ASIN>
+            <DetailPageURL>
+                http://www.amazon.com/gp/redirect.html%3FASIN=0446613657%26tag=ws%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/0446613657%253FSubscriptionId=1A7XKHR5BYD0WPJVQEG2
+            </DetailPageURL>
+            <ItemAttributes>
+                <Author>Sidney Sheldon</Author>
+                <Manufacturer>Warner Books</Manufacturer>
+                <ProductGroup>Book</ProductGroup>
+                <Title>Are You Afraid of the Dark?</Title>
+            </ItemAttributes>
+        </Item>
+        <Item>
+            <ASIN>0446357421</ASIN>
+            <DetailPageURL>
+                http://www.amazon.com/gp/redirect.html%3FASIN=0446357421%26tag=ws%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/0446357421%253FSubscriptionId=1A7XKHR5BYD0WPJVQEG2
+            </DetailPageURL>
+            <ItemAttributes>
+                <Author>Sidney Sheldon</Author>
+                <Manufacturer>Warner Books</Manufacturer>
+                <ProductGroup>Book</ProductGroup>
+                <Title>If Tomorrow Comes</Title>
+            </ItemAttributes>
+        </Item>
+        <Item>
+            <ASIN>0446607207</ASIN>
+            <DetailPageURL>
+                http://www.amazon.com/gp/redirect.html%3FASIN=0446607207%26tag=ws%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/0446607207%253FSubscriptionId=1A7XKHR5BYD0WPJVQEG2
+            </DetailPageURL>
+            <ItemAttributes>
+                <Author>Sidney Sheldon</Author>
+                <Manufacturer>Warner Vision</Manufacturer>
+                <ProductGroup>Book</ProductGroup>
+                <Title>Tell Me Your Dreams</Title>
+            </ItemAttributes>
+        </Item>
+        <Item>
+            <ASIN>0446357448</ASIN>
+            <DetailPageURL>
+                http://www.amazon.com/gp/redirect.html%3FASIN=0446357448%26tag=ws%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/0446357448%253FSubscriptionId=1A7XKHR5BYD0WPJVQEG2
+            </DetailPageURL>
+            <ItemAttributes>
+                <Author>Sidney Sheldon</Author>
+                <Manufacturer>Warner Books</Manufacturer>
+                <ProductGroup>Book</ProductGroup>
+                <Title>Bloodline</Title>
+            </ItemAttributes>
+        </Item>
+        <Item>
+            <ASIN>0446532673</ASIN>
+            <DetailPageURL>
+                http://www.amazon.com/gp/redirect.html%3FASIN=0446532673%26tag=ws%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/0446532673%253FSubscriptionId=1A7XKHR5BYD0WPJVQEG2
+            </DetailPageURL>
+            <ItemAttributes>
+                <Author>Sidney Sheldon</Author>
+                <Manufacturer>Warner Books</Manufacturer>
+                <ProductGroup>Book</ProductGroup>
+                <Title>The Other Side of Me</Title>
+            </ItemAttributes>
+        </Item>
+        <Item>
+            <ASIN>0446356573</ASIN>
+            <DetailPageURL>
+                http://www.amazon.com/gp/redirect.html%3FASIN=0446356573%26tag=ws%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/0446356573%253FSubscriptionId=1A7XKHR5BYD0WPJVQEG2
+            </DetailPageURL>
+            <ItemAttributes>
+                <Author>Sidney Sheldon</Author>
+                <Manufacturer>Warner Books</Manufacturer>
+                <ProductGroup>Book</ProductGroup>
+                <Title>A Stranger in the Mirror</Title>
+            </ItemAttributes>
+        </Item>
+        <Item>
+            <ASIN>0060198346</ASIN>
+            <DetailPageURL>
+                http://www.amazon.com/gp/redirect.html%3FASIN=0060198346%26tag=ws%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/0060198346%253FSubscriptionId=1A7XKHR5BYD0WPJVQEG2
+            </DetailPageURL>
+            <ItemAttributes>
+                <Author>Sidney Sheldon</Author>
+                <Manufacturer>William Morrow &amp; Company</Manufacturer>
+                <ProductGroup>Book</ProductGroup>
+                <Title>The Sky Is Falling</Title>
+            </ItemAttributes>
+        </Item>
+        <Item>
+            <ASIN>0446354732</ASIN>
+            <DetailPageURL>
+                http://www.amazon.com/gp/redirect.html%3FASIN=0446354732%26tag=ws%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/0446354732%253FSubscriptionId=1A7XKHR5BYD0WPJVQEG2
+            </DetailPageURL>
+            <ItemAttributes>
+                <Author>Sidney Sheldon</Author>
+                <Manufacturer>Warner Books</Manufacturer>
+                <ProductGroup>Book</ProductGroup>
+                <Title>Nothing Lasts Forever</Title>
+            </ItemAttributes>
+        </Item>
+        <Item>
+            <ASIN>0446341916</ASIN>
+            <DetailPageURL>
+                http://www.amazon.com/gp/redirect.html%3FASIN=0446341916%26tag=ws%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/0446341916%253FSubscriptionId=1A7XKHR5BYD0WPJVQEG2
+            </DetailPageURL>
+            <ItemAttributes>
+                <Author>Sidney Sheldon</Author>
+                <Manufacturer>Warner Books</Manufacturer>
+                <ProductGroup>Book</ProductGroup>
+                <Title>The Naked Face</Title>
+            </ItemAttributes>
+        </Item>
+    </Items>
+</ItemSearchResponse>
 \ No newline at end of file
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+<title>XML Grid Example</title>
+<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
+
+    <!-- GC --> <!-- LIBS -->     <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>     <!-- ENDLIBS -->
+    <script type="text/javascript" src="../../ext-all.js"></script>
+    
+<script type="text/javascript" src="xml-grid.js"></script>
+<link rel="stylesheet" type="text/css" href="grid-examples.css" />
+
+<!-- Common Styles for the examples -->
+<link rel="stylesheet" type="text/css" href="../examples.css" />
+</head>
+<body>
+<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
+<h1>XML Grid Example</h1>
+<p>This example shows how to load a grid with XML data. For more details on this example, see <a href="http://www.jackslocum.com/yui/2006/08/31/a-grid-component-for-yahoo-ui-part-2/">the blog post</a>.</p>
+
+<p>This grid also uses autoHeight and autoWidth to dynamically size to fit it's data and columns.</p>
+
+<p>Note that the js is not minified so it is readable. See <a href="xml-grid.js">xml-grid.js</a>.</p>
+
+<p>The data in the grid is loaded from <a href="sheldon.xml">sheldon.xml</a>, which is directly from an Amazon.com search.</p>
+
+<!-- a place holder for the grid. requires the unique id to be passed in the javascript function, and width and height ! -->
+<div id="example-grid" class="x-grid-mso" style="border: 1px solid #c3daf9; overflow: hidden; width:520px;"></div>
+
+</body>
+</html>
+/*
+ * Ext JS Library 1.1 Beta 1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ * licensing@extjs.com
+ * 
+ * http://www.extjs.com/license
+ */
+
+Ext.onReady(function(){
+
+    // create the Data Store
+    var ds = new Ext.data.Store({
+        // load using HTTP
+        proxy: new Ext.data.HttpProxy({url: 'sheldon.xml'}),
+
+        // the return will be XML, so lets set up a reader
+        reader: new Ext.data.XmlReader({
+               // records will have an "Item" tag
+               record: 'Item',
+               id: 'ASIN',
+               totalRecords: '@total'
+           }, [
+               // set up the fields mapping into the xml doc
+               // The first needs mapping, the others are very basic
+               {name: 'Author', mapping: 'ItemAttributes > Author'},
+               'Title', 'Manufacturer', 'ProductGroup'
+           ])
+    });
+
+    var cm = new Ext.grid.ColumnModel([
+	    {header: "Author", width: 120, dataIndex: 'Author'},
+		{header: "Title", width: 180, dataIndex: 'Title'},
+		{header: "Manufacturer", width: 115, dataIndex: 'Manufacturer'},
+		{header: "Product Group", width: 100, dataIndex: 'ProductGroup'}
+	]);
+    cm.defaultSortable = true;
+
+    // create the grid
+    var grid = new Ext.grid.Grid('example-grid', {
+        ds: ds,
+        cm: cm
+    });
+    grid.render();
+
+    ds.load();
+});
+<html>
+<head>
+  <title>Complex Layout</title>
+	<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
+
+    <!-- GC --> <!-- LIBS -->     <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>     <!-- ENDLIBS -->
+    <script type="text/javascript" src="../../ext-all.js"></script>
+  
+    <!--<script language="javascript" src="../grid/PropsGrid.js"></script>-->
+	<style type="text/css">
+	html, body {
+        font:normal 12px verdana;
+        margin:0;
+        padding:0;
+        border:0 none;
+        overflow:hidden;
+        height:100%;
+    }
+	.x-layout-panel-north {
+	    border:0px none;
+	}
+	#nav {
+	}
+	#autoTabs, #center1, #center2, #west {
+	    padding:10px;
+	}
+	#north, #south{
+	    font:normal 8pt arial, helvetica;
+	    padding:4px;
+	}
+	.x-layout-panel-center p {
+	    margin:5px;
+	}
+	#props-panel .x-grid-col-0{
+	}
+	#props-panel .x-grid-col-1{
+	}
+	</style>
+	<script type="text/javascript">
+	Example = function(){
+	        var layout;
+	        return {
+	            init : function(){
+	               layout = new Ext.BorderLayout(document.body, {
+	                    north: {
+	                        split:false,
+	                        initialSize: 32,
+	                        titlebar: false
+	                    },
+	                    west: {
+	                        split:true,
+	                        initialSize: 200,
+	                        minSize: 175,
+	                        maxSize: 400,
+	                        titlebar: true,
+	                        collapsible: true,
+                            animate: true
+	                    },
+	                    east: {
+	                        split:true,
+	                        initialSize: 202,
+	                        minSize: 175,
+	                        maxSize: 400,
+	                        titlebar: true,
+	                        collapsible: true,
+                            animate: true
+	                    },
+	                    south: {
+	                        split:true,
+	                        initialSize: 100,
+	                        minSize: 100,
+	                        maxSize: 200,
+	                        titlebar: true,
+	                        collapsible: true,
+                            animate: true
+	                    },
+	                    center: {
+	                        titlebar: true,
+	                        autoScroll:true,
+                            closeOnTab: true
+                        }
+	                });
+
+                    layout.beginUpdate();
+	                layout.add('north', new Ext.ContentPanel('north', 'North'));
+	                layout.add('south', new Ext.ContentPanel('south', {title: 'South', closable: true}));
+	                layout.add('west', new Ext.ContentPanel('west', {title: 'West'}));
+	                layout.add('east', new Ext.ContentPanel(Ext.id(), {autoCreate:true, title: 'Dynamic Tab', closable: true}));
+	                layout.add('east', new Ext.ContentPanel('autoTabs', {title: 'Auto Tabs', closable: true}));
+	                layout.add('center', new Ext.ContentPanel('center1', {title: 'Close Me', closable: true}));
+	                layout.add('center', new Ext.ContentPanel('center2', {title: 'Center Panel', closable: false}));
+	                layout.getRegion('center').showPanel('center1');
+	                layout.getRegion('west').hide();
+	                layout.endUpdate();
+	           },
+
+	           toggleWest : function(link){
+	                var west = layout.getRegion('west');
+	                if(west.isVisible()){
+	                    west.hide();
+	                    link.innerHTML = 'Show West Region';
+	                }else{
+	                    west.show();
+	                    link.innerHTML = 'Hide West Region';
+	                }
+	           }
+	     };
+	       
+	}();
+	Ext.EventManager.onDocumentReady(Example.init, Example, true);
+	</script>
+</head>
+<body>
+<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
+<div id ="container">
+  <div id="west" class="x-layout-inactive-content">
+    Hi. I'm the west panel.
+  </div>
+  <div id="north" class="x-layout-inactive-content">
+    north - generally for menus, toolbars and/or advertisements 
+  </div>
+  <div id="autoTabs" class="x-layout-inactive-content">
+      The layout manager will automatically create and/or remove the TabPanel component when a region has more than one panel. Close one of my panels and you can see what I mean.
+  </div>
+  <div id="center2" class="x-layout-inactive-content">
+        <p><a href="#" onclick="Example.toggleWest(this);return false;">Show West Region</a></p>
+        <p>My closable attribute is set to false so you can't close me. The other center panels can be closed.</p>
+        <p>The center panel automatically grows to fit the remaining space in the container that isn't taken up by the border regions.</p>
+        <hr>
+        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.</p>
+        <p>Donec quis dui. Sed imperdiet. Nunc consequat, est eu sollicitudin gravida, mauris ligula lacinia mauris, eu porta dui nisl in velit. Nam congue, odio id auctor nonummy, augue lectus euismod nunc, in tristique turpis dolor sed urna. Donec sit amet quam eget diam fermentum pharetra. Integer tincidunt arcu ut purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla blandit malesuada odio. Nam augue. Aenean molestie sapien in mi. Suspendisse tincidunt. Pellentesque tempus dui vitae sapien. Donec aliquam ipsum sit amet pede. Sed scelerisque mi a erat. Curabitur rutrum ullamcorper risus. Maecenas et lorem ut felis dictum viverra. Fusce sem. Donec pharetra nibh sit amet sapien.</p>
+        <p>Aenean ut orci sed ligula consectetuer pretium. Aliquam odio. Nam pellentesque enim. Nam tincidunt condimentum nisi. Maecenas convallis luctus ligula. Donec accumsan ornare risus. Vestibulum id magna a nunc posuere laoreet. Integer iaculis leo vitae nibh. Nam vulputate, mauris vitae luctus pharetra, pede neque bibendum tellus, facilisis commodo diam nisi eget lacus. Duis consectetuer pulvinar nisi. Cras interdum ultricies sem. Nullam tristique. Suspendisse elementum purus eu nisl. Nulla facilisi. Phasellus ultricies ullamcorper lorem. Sed euismod ante vitae lacus. Nam nunc leo, congue vehicula, luctus ac, tempus non, ante. Morbi suscipit purus a nulla. Sed eu diam.</p>
+        <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras imperdiet felis id velit. Ut non quam at sem dictum ullamcorper. Vestibulum pharetra purus sed pede. Aliquam ultrices, nunc in varius mattis, felis justo pretium magna, eget laoreet justo eros id eros. Aliquam elementum diam fringilla nulla. Praesent laoreet sapien vel metus. Cras tempus, sapien condimentum dictum dapibus, lorem augue fringilla orci, ut tincidunt eros nisi eget turpis. Nullam nunc nunc, eleifend et, dictum et, pharetra a, neque. Ut feugiat. Aliquam erat volutpat. Donec pretium odio nec felis. Phasellus sagittis lacus eget sapien. Donec est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
+        <p>Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor ullamcorper. Sed tincidunt molestie enim. Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula elit. Proin quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis. Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non erat. Nulla ultrices vestibulum quam.</p>
+        <p>Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque tortor, sed pellentesque sem enim id metus. Maecenas at pede. Nulla velit libero, dictum at, mattis quis, sagittis vel, ante. Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac nulla. In risus.</p>
+        <p>Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis pulvinar, odio turpis dapibus elit, in tincidunt turpis felis nec libero. Nam vestibulum tempus ipsum. In hac habitasse platea dictumst. Nulla facilisi. Donec semper ligula. Donec commodo tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id velit ut velit varius commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Fusce ornare pellentesque libero. Nunc rhoncus. Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo sem lobortis elit, ac sollicitudin ipsum neque nec ante.</p>
+        <p>Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum sodales. Donec varius dapibus nisl. Praesent at velit id risus convallis bibendum. Aliquam felis nibh, rutrum nec, blandit non, mattis sit amet, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam varius dignissim nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>
+  </div>
+  <div id="center1" class="x-layout-inactive-content">
+        <p><b>Done reading me? Close me by clicking the X in the top right corner.</b></p>
+        <p>Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor ullamcorper. Sed tincidunt molestie enim. Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula elit. Proin quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis. Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non erat. Nulla ultrices vestibulum quam.</p>
+        <p>Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque tortor, sed pellentesque sem enim id metus. Maecenas at pede. Nulla velit libero, dictum at, mattis quis, sagittis vel, ante. Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac nulla. In risus.</p>
+        <p>Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis pulvinar, odio turpis dapibus elit, in tincidunt turpis felis nec libero. Nam vestibulum tempus ipsum. In hac habitasse platea dictumst. Nulla facilisi. Donec semper ligula. Donec commodo tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id velit ut velit varius commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Fusce ornare pellentesque libero. Nunc rhoncus. Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo sem lobortis elit, ac sollicitudin ipsum neque nec ante.</p>
+        <p>Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum sodales. Donec varius dapibus nisl. Praesent at velit id risus convallis bibendum. Aliquam felis nibh, rutrum nec, blandit non, mattis sit amet, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam varius dignissim nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>
+  </div>
+  <div id="props-panel" class="x-layout-inactive-content" style="width:200px;height:200px;overflow:hidden;">
+  </div>
+  <div id="south" class="x-layout-inactive-content">
+    south - generally for informational stuff, also could be for status bar
+  </div>
+</div>
+ </body>
+</html>
+<%@ WebHandler Language="VB" CodeBehind="feed-proxy.ashx.vb" Class="SendGate.feedproxy1" %>
+Imports System.Web
+Imports System.Web.Services
+Imports System
+Imports System.IO
+Imports System.Net
+
+Public Class feedproxy1
+    Implements System.Web.IHttpHandler
+
+  Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
+
+    'Address of URL
+    'Dim URL As String = "http://www.jackslocum.com/yui/feed/"
+    Dim URL As String = context.Request.Form("feed")
+    'Only allow http:// prefix
+    If IsNothing(URL) Then
+      Exit Sub
+    End If
+    If URL.Substring(0, 7) = "http://" Then
+      Try
+        'Dim enc As Encoding = Encoding.GetEncoding("UTF-8")
+        Dim enc As Encoding = Encoding.GetEncoding("ISO-8859-1")
+
+        Dim request As HttpWebRequest = WebRequest.Create(URL)
+        Dim response As HttpWebResponse = request.GetResponse()
+        Dim reader As StreamReader = New StreamReader(response.GetResponseStream(), enc)
+        Dim str As String '= reader.ReadLine()
+        Dim reply As String = ""
+        'Do While str.Length > 0 And Not reader.EndOfStream
+        Do While Not reader.EndOfStream
+          str = reader.ReadLine()
+          reply &= str & vbCrLf
+          'Console.WriteLine(str)
+        Loop
+        context.Response.ContentType = "text/xml"
+        context.Response.ContentEncoding = enc
+        context.Response.Cache.SetExpires(DateTime.Now.AddSeconds(60))
+        context.Response.Cache.SetCacheability(HttpCacheability.Public)
+
+        context.Response.Write(reply)
+      Catch ex As Exception
+      End Try
+
+    End If
+
+  End Sub
+
+    ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
+        Get
+            Return False
+        End Get
+    End Property
+
+End Class
 \ No newline at end of file
+<?php
+// this is an example server-side proxy to load feeds
+$feed = $_REQUEST['feed'];
+if($feed != '' && strpos($feed, 'http') === 0){
+	header('Content-Type: text/xml');
+	readfile($feed);
+	return;
+}
+?>
 \ No newline at end of file
+/*
+ * Ext JS Library 1.1 Beta 1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ * licensing@extjs.com
+ * 
+ * http://www.extjs.com/license
+ */
+
+/*
+ * Ext - JS Library 1.0 Alpha 2
+ * Copyright(c) 2006-2007, Jack Slocum.
+ */
+
+html, body {
+	font: normal 9pt tahoma;
+	margin: 0px;
+	padding:0px;
+	border:0px;
+}
+.x-layout-panel-south{
+	background:#c3daf9;
+	border:0px none;
+	border-top:1px solid #ddecfe;
+}
+.x-layout-panel-north, .xtheme-gray .x-layout-panel-north{
+	background-image: url(images/header.gif);
+	background-repeat: repeat-x;
+	color:#FFF;
+	font:bold 12px verdana, helvetica;
+	overflow:hidden;
+	padding:4px;
+	border:0px none;
+	border-bottom:2px solid #c3daf9;
+}
+.xtheme-gray .x-layout-panel-north{
+	border-bottom:2px solid #f3f2e7;
+}
+.x-layout-panel-hd-text{
+	font: bold 11px tahoma,verdana,helvetica;
+	color:#083772;
+}
+.xtheme-gray .x-layout-panel-hd-text{
+	font: bold 11px tahoma,verdana,helvetica;
+	color:#333333;
+}
+#preview-body{
+	background:white;
+}
+#main .x-layout-panel-center{
+	border-bottom:1px solid #98c0f4;
+}
+#preview-body {
+	padding:10px;
+	overflow:auto;
+	line-height: 18px;
+}
+#preview-body p{
+	margin:5px;
+	margin-bottom:10px;
+}
+.x-toolbar{
+	border:0px none;
+	background-color:#D8E7FB;
+	border-bottom:1px solid #c3daf9;
+	padding-bottom:1px;
+}
+#preview-tb .view-tab,#preview-tb .view-window,#myfeeds-tb .add-feed{
+	background-position: 0px 0px;
+	background-repeat: no-repeat;
+	padding-left:18px;
+	padding-top:1px;
+	width:auto;
+	display:block;
+}
+.add-feed {
+	background-image: url('images/add-feed.gif');
+}
+#myfeeds-body{
+	overflow:auto;
+}
+.view-tab{
+	background-image: url('images/new_tab.gif');
+}
+.view-window{
+	background-image: url('images/new_window.gif');
+}
+.feed-list{
+	padding:1px;
+}
+.feed-list a{
+	border:1px solid white;
+	display:block;
+	-moz-outline:none;
+	margin-bottom:2px;
+	text-decoration:none;
+}
+.feed-list a .body{
+	padding:5px 2px 5px 22px;
+	background-image:url(images/rss.gif);
+	background-position: 2px 5px;
+	background-repeat: no-repeat;
+	font:bold 12px tahoma, verdana, helvetica;
+	color: #2d5593;
+	display:block;
+	-moz-outline:none;
+}
+.feed-list a .desc{
+	font:normal 11px tahoma, verdana, helvetica;
+	color: #222222;
+}
+.feed-list a:hover, .feed-list .selected{
+	text-decoration: none;
+	border:1px solid #c3daf9;
+	background-color:#ddecfe;
+}
+.feed-list .selected{
+	background-image: url('images/post-bg.gif');
+	border:1px solid #c3daf9;
+}
+#feed-grid {
+	overflow:auto;
+}
+#add-feed{
+	background-image: url('images/post-bg.gif');
+	border:2px solid #c3daf9;
+	position:absolute;
+	z-index:10006;
+	font-size:8pt;
+	width:300px;
+	padding:5px;
+	overflow:auto;
+	left:-1000px;
+	top:-1000px;
+}
+#add-feed input{
+	font:normal 8pt arial,helvetica;
+}
+#add-feed .eg{
+	display:block;
+	padding:3px;
+	color:#1e4e8f;
+}
+#feed-url{
+	width:240px;
+}
+#add-feed-close{
+	position:absolute;
+	right:2px;
+	top:2px;
+	cursor:pointer;
+}
+#add-feed p{
+	height:18px;
+	display:none;
+}
+#add-feed p.active-msg{
+	display:block;
+}
+
+#status {
+	font-size:8pt;
+	background-image: url('../../resources/images/default/grid/loading.gif');
+	background-repeat: no-repeat;
+	background-position: left;
+	padding-left:20px;
+	padding-top:3px;
+	height:18px;
+}
+#status.done {
+	background-image: url('../../resources/images/default/grid/loading.gif');
+}
+.x-layout-collapsed-west{
+    background-image:url(images/myfeeds.gif);
+    background-repeat:no-repeat;
+    background-position:center;
+}
+.x-layout-collapsed-east{
+    background-image:url(images/suggested.gif);
+    background-repeat:no-repeat;
+    background-position:center;
+}
+#main .x-layout-collapsed-south{
+    background-image:url(images/preview.gif);
+    background-repeat:no-repeat;
+    background-position:center;
+}
+
+/** Comment List */
+.item-date {
+	margin: 0;
+	display: block;
+	font-size: 10px;
+	font-weight:normal;
+	margin-bottom:3px;
+}
+.item-title{
+	font:bold 11px "sans serif", verdana;
+	color:#444444;
+}
+.feed-item {
+	display:block;
+	margin:5px;
+	padding:5px;
+	font-size:11px;
+	border:1px solid white;
+	border-bottom:1px solid #dddddd;
+	color:#222222;
+	cursor:pointer;
+	line-height: 18px;
+	-moz-user-select: none;
+	-khtml-user-select:none;
+}
+.selected-article{
+	background:#ecf5fe url('images/post-bg.gif') repeat-x;
+	border:1px solid #c3daf9;
+}
 \ No newline at end of file
+<html>
+<head>
+  <title>RSS Feed Viewer 2.0</title>
+  <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
+
+    <!-- GC --> <!-- LIBS -->     <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>     <!-- ENDLIBS -->
+    <script type="text/javascript" src="../../ext-all.js"></script>
+
+    <link rel="stylesheet" type="text/css" href="feed-viewer.css"/>
+    <script type="text/javascript" language="javascript" src="feed-viewer.js"></script>
+</head>
+<body id="feedViewer">
+<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
+    <div id="header" class="x-layout-inactive-content">
+   Simple RSS Feed Viewer - 2.0
+    </div>
+    <div id="feeds" class="x-layout-inactive-content">
+        <div id="myfeeds-tb"></div>
+        <div id="myfeeds-body" class="feed-list"></div>
+    </div>
+    <div id="suggested" class="x-layout-inactive-content feed-list"></div>
+    <div id="main" class="x-layout-inactive-content">
+        <div id="feed-grid" class="x-layout-inactive-content"></div>
+        <div id="preview" class="x-layout-inactive-content">
+            <div id="preview-tb"></div>
+            <div id="preview-body"></div>
+        </div>
+    </div>
+    <div id="status" class="x-layout-inactive-content"></div>
+    <div id="add-feed" style="visibility:hidden;">
+        <img alt="tab-close" id="add-feed-close" src="images/tab-close-on.gif" />
+		<p id="add-title" class="active-msg">Please enter the URL for the feed:</p>
+		<p id="invalid-feed"><img src="images/warning.gif" width="16" height="16" align="absmiddle" alt="" />&nbsp;The feed URL specified is not a valid RSS feed.</p>
+		<p id="loading-feed"><img src="images/wait.gif" width="18" height="18" align="absmiddle" />&nbsp;Loading feed...</p>
+		<input type="text" id="feed-url" name="feed-url" class="input-text"/><input id="add-btn" type="button" value="Add"/><br>
+		<span class="eg">e.g. http://www.jackslocum.com/yui/feed/</span>
+    </div>
+</body>
+</html>
+/*
+ * Ext JS Library 1.1 Beta 1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ * licensing@extjs.com
+ * 
+ * http://www.extjs.com/license
+ */
+
+var Viewer = function(){
+    // a bunch of private variables accessible by member function
+    var layout, statusPanel, south, preview, previewBody, feedPanel;
+    var grid, ds, sm;
+    var addFeed, currentItem, tpl;
+    var suggested, feeds;
+    var sfeeds, myfeeds;
+    var seed = 0;
+    
+    // feed clicks bubble up to this universal handler
+    var feedClicked = function(e){
+        // find the "a" element that was clicked
+        var a = e.getTarget('a');
+        if(a){
+            e.preventDefault();
+            Viewer.loadFeed(a.href);
+            Viewer.changeActiveFeed(a.id.substr(5));
+        }  
+    };
+    
+    return {
+        init : function(){
+            // initialize state manager, we will use cookies
+            Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
+            
+            // initialize the add feed overlay and buttons
+            addFeed = Ext.get('add-feed');
+            var addBtn = Ext.get('add-btn');
+            addBtn.on('click', this.validateFeed, this);
+            var closeBtn = Ext.get('add-feed-close');
+            closeBtn.on('click', addFeed.hide, addFeed, true);
+            
+            // create Elements for the feed and suggested lists
+            feeds = Ext.get('feeds'); suggested = Ext.get('suggested');
+            
+            // delegate clicks on the lists
+            feeds.on('click', feedClicked);
+            suggested.on('click', feedClicked);
+            
+            //create feed template
+            tpl = new Ext.DomHelper.Template('<a id="feed-{id}" href="{url}"><span class="body">{name}<br><span class="desc">{desc}</span></span></a>');
+            
+            // collection of feeds added by the user
+            myfeeds = {};
+            
+            // some default feeds
+            sfeeds = {
+                'ajaxian':{id:'ajaxian', name: 'Ajaxian', desc: 'Cleaning up the web with Ajax.', url:'http://feeds.feedburner.com/ajaxian'},
+                'yui':{id:'yui', name: 'YUI Blog', desc: 'News and Articles about Designing and Developing with Yahoo! Libraries.', url:'http://feeds.yuiblog.com/YahooUserInterfaceBlog'},
+                'sports':{id:'sports', name: 'Yahoo! Sports', desc: 'Latest news and information for the world of sports.', url:'http://sports.yahoo.com/top/rss.xml'}
+            };
+            
+            // go through the suggested feeds and add them to the list
+            for(var id in sfeeds) {
+            	var f = sfeeds[id];
+            	tpl.append(suggested.dom, f);
+            }
+            
+            // create the main layout
+            layout = new Ext.BorderLayout(document.body, {
+                north: {
+                    split:false,
+                    initialSize: 25,
+                    titlebar: false
+                },
+                west: {
+                    split:true,
+                    initialSize: 200,
+                    minSize: 175,
+                    maxSize: 400,
+                    titlebar: true,
+                    collapsible: true,
+                    animate: true,
+                    autoScroll:false,
+                    useShim:true,
+                    cmargins: {top:0,bottom:2,right:2,left:2}
+                },
+                east: {
+                    split:true,
+                    initialSize: 200,
+                    minSize: 175,
+                    maxSize: 400,
+                    titlebar: true,
+                    collapsible: true,
+                    animate: true,
+                    autoScroll:false,
+                    useShim:true,
+                    collapsed:true,
+                    cmargins: {top:0,bottom:2,right:2,left:2}
+                },
+                south: {
+                    split:false,
+                    initialSize: 22,
+                    titlebar: false,
+                    collapsible: false,
+                    animate: false
+                },
+                center: {
+                    titlebar: false,
+                    autoScroll:false,
+                    tabPosition: 'top',
+                    closeOnTab: true,
+                    alwaysShowTabs: true,
+                    resizeTabs: true
+                }
+            });
+            // tell the layout not to perform layouts until we're done adding everything
+            layout.beginUpdate();
+            layout.add('north', new Ext.ContentPanel('header'));
+            
+            // initialize the statusbar
+            statusPanel = new Ext.ContentPanel('status');
+            south = layout.getRegion('south');
+            south.add(statusPanel);
+            
+            // create the add feed toolbar
+            var feedtb = new Ext.Toolbar('myfeeds-tb');
+            // They can also be referenced by id in or components
+            feedtb.add( {
+              id:'add-feed-btn',
+              icon: 'images/add-feed.gif', // icons can also be specified inline
+              cls: 'x-btn-text-icon',
+              text: 'Add feed',
+              handler: this.showAddFeed.createDelegate(this),
+              tooltip: '<b>Add Feed</b><br/>Button with tooltip'
+          });            
+            
+            layout.add('west', new Ext.ContentPanel('feeds', {title: 'My Feeds', fitToFrame:true, toolbar: feedtb, resizeEl:'myfeeds-body'}));
+            layout.add('east', new Ext.ContentPanel('suggested', {title: 'Suggested Feeds', fitToFrame:true}));
+            
+            // the inner layout houses the grid panel and the preview panel
+            var innerLayout = new Ext.BorderLayout('main', {
+                south: {
+                    split:true,
+                    initialSize: 250,
+                    minSize: 100,
+                    maxSize: 400,
+                    autoScroll:false,
+                    collapsible:true,
+                    titlebar: true,
+                    animate: true,
+                    cmargins: {top:2,bottom:0,right:0,left:0}
+                },
+                center: {
+                    autoScroll:false,
+                    titlebar:false
+                }
+            });
+            // add the nested layout
+            feedPanel = new Ext.NestedLayoutPanel(innerLayout, 'View Feed');
+            layout.add('center', feedPanel);
+            
+            innerLayout.beginUpdate();
+            
+            var lv = innerLayout.add('center', new Ext.ContentPanel('feed-grid', {title: 'Feed Articles', fitToFrame:true}));
+            this.createView(lv.getEl());
+            
+            // create the preview panel and toolbar
+            previewBody = Ext.get('preview-body');
+            var tb = new Ext.Toolbar('preview-tb');
+            
+            tb.addButton({text: 'View in New Tab',icon: 'images/new_tab.gif',cls: 'x-btn-text-icon', handler: this.showInTab.createDelegate(this)});
+            tb.addSeparator();
+            tb.addButton({text: 'View in New Window',icon: 'images/new_window.gif',cls: 'x-btn-text-icon', handler: this.showInWindow.createDelegate(this)});
+            
+            preview = new Ext.ContentPanel('preview', {title: "Preview", fitToFrame:true, toolbar: tb, resizeEl:'preview-body'});
+            innerLayout.add('south', preview);
+            
+            // restore innerLayout state
+            innerLayout.restoreState();
+            innerLayout.endUpdate(true);
+            
+            // restore any state information
+            layout.restoreState();
+            layout.endUpdate();
+            
+            this.loadFeed('http://feeds.feedburner.com/ajaxian');
+            this.changeActiveFeed('ajaxian');
+        },
+        
+        createView : function(el){
+            function reformatDate(feedDate){
+                var d = new Date(Date.parse(feedDate));
+                return d ? d.dateFormat('D M j, Y, g:i a') : '';
+            }
+            
+            var reader = new Ext.data.XmlReader({record: 'item'},
+                ['title', {name:'pubDate', type:'date'}, 'link', 'description']
+            );
+
+            ds = new Ext.data.Store({
+                proxy: new Ext.data.HttpProxy({
+                    url: 'feed-proxy.php'
+                }),
+                reader : reader
+            });
+            
+            ds.on('load', this.onLoad, this);
+            
+            var tpl = new Ext.Template(
+                  '<div class="feed-item">' +
+                  '<div class="item-title">{title}</div>' +
+                  '<div class="item-date">{date}</div>' +
+                  '{desc}</div>'
+            );
+            
+            var view = new Ext.View(el, tpl, {store: ds, singleSelect:true, selectedClass:'selected-article'});
+            view.prepareData = function(data){
+                return {
+                    title: data.title,
+                    date: reformatDate(data.pubDate),
+                    desc: data.description.replace(/<\/?[^>]+>/gi, '').ellipse(350)
+                
+                };
+            };
+            view.on('click', this.showPost, this);
+            view.on('dblclick', this.showFullPost, this);
+        },
+        
+        onLoad : function(){
+            if(ds.getCount() < 1){
+        		preview.setContent('');
+        	}
+            statusPanel.getEl().addClass('done');
+            statusPanel.setContent('Done.');
+        },
+        
+        loadFeed : function(feed){
+        	statusPanel.setContent('Loading feed ' + feed + '...');
+        	statusPanel.getEl().removeClass('done');
+            //ds.load({'feed': feed});
+            //cgsktca
+            ds.load({params:{'feed': feed}});
+        },
+        
+        showPost : function(view, dataIndex){            
+            var node = ds.getAt(dataIndex);
+            var title = node.data.title;
+            var link = node.data.link;
+            var desc = node.data.description;
+              		
+    		    currentItem = {
+    		        index: dataIndex, link: link
+    		    };
+    		    preview.setTitle(title.ellipse(80));
+    		    previewBody.update(desc);
+        },
+        
+        showFullPost : function(view, rowIndex){
+          var node = ds.getAt(rowIndex);
+    		  var link = node.data.link;
+    		  var title = node.data.title;
+    		  
+    		  if(!title){
+    		      title = 'View Post';
+    		  }
+    		  var iframe = Ext.DomHelper.append(document.body, 
+    		              {tag: 'iframe', frameBorder: 0, src: link});
+    		  var panel = new Ext.ContentPanel(iframe, 
+    		              {title: title, fitToFrame:true, closable:true});
+    		  layout.add('center', panel);     	
+        },
+        
+        showInTab : function(){
+            if(currentItem){
+                this.showFullPost(grid, currentItem.index);
+            }
+        },
+        
+        showInWindow : function(){
+            if(currentItem){
+                window.open(currentItem.link, 'win');
+            }
+        },
+        
+        changeActiveFeed : function(feedId){
+            suggested.select('a').removeClass('selected');
+            feeds.select('a').removeClass('selected');
+            Ext.fly('feed-'+feedId).addClass('selected');
+            var feed = sfeeds[feedId] || myfeeds[feedId];
+            feedPanel.setTitle('View Feed (' + feed.name.ellipse(16) + ')');
+        },
+        
+        showAddFeed : function(btn){
+            Ext.get('feed-url').dom.value = '';
+            Ext.get('add-title').radioClass('active-msg');
+            var el = Ext.get('myfeeds-tb');
+
+            addFeed.alignTo('myfeeds-tb', 'tl', [3,3]);
+            addFeed.show();
+        },        
+        
+        validateFeed : function(){
+            var url = Ext.get('feed-url').dom.value;
+            Ext.get('loading-feed').radioClass('active-msg');
+            var success = function(o){
+                try{
+                    var xml = o.responseXML;
+                    var channel = xml.getElementsByTagName('channel')[0];
+                    var titleEl = channel.getElementsByTagName('title')[0];
+                    var descEl = channel.getElementsByTagName('description')[0];
+                    var name = titleEl.firstChild.nodeValue;
+                    var desc = (descEl.firstChild ? descEl.firstChild.nodeValue : '');
+                    var id = ++seed;
+                    myfeeds[id] = {id:id, name:name, desc:desc, url:url};
+                    tpl.append('myfeeds-body', myfeeds[id]);
+                    
+                    addFeed.hide();  
+                   
+                      
+                    ds.loadData(xml); 
+                    this.changeActiveFeed(id);
+                                       
+                }catch(e){
+                    Ext.get('invalid-feed').radioClass('active-msg');                   
+                }                     
+            }.createDelegate(this);
+            var failure = function(o){
+                Ext.get('invalid-feed').radioClass('active-msg');
+            };
+            Ext.lib.Ajax.request('POST', 'feed-proxy.php', {success:success, failure:failure}, 'feed='+encodeURIComponent(url));
+        }
+    };
+}();
+Ext.onReady(Viewer.init, Viewer);
+
+String.prototype.ellipse = function(maxLength){
+    if(this.length > maxLength){
+        return this.substr(0, maxLength-3) + '...';
+    }
+    return this;
+};
+
+<html>
+<head>
+  <title>Complex Layout</title>
+	<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
+
+    <!-- GC --> <!-- LIBS -->     <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>     <!-- ENDLIBS -->
+    <script type="text/javascript" src="../../ext-all.js"></script>
+    
+    <style type="text/css">
+	html, body {
+        font:normal 12px verdana;
+        margin:0;
+        padding:0;
+        border:0 none;
+        overflow:hidden;
+        height:100%;
+    }
+	#header{
+	    background: url(images/header-bar.gif) repeat-x bottom;
+	    border-bottom: 1px solid #083772;
+	    padding:5px 4px;
+	}
+	#footer{
+	    background: url(images/header-bar.gif) repeat-x bottom;
+	    border-top: 1px solid #083772;
+	    padding:2px 4px;
+	    color:white;
+	    font:normal 8pt arial,helvetica;
+    }
+	#nav {
+	}
+	#nav, #inner1, #inner2 {
+	    padding:10px;
+	}
+	#content p {
+	    margin:5px;
+	}
+	#nav li {
+	    padding:2px;
+	    padding-left:10px;
+	    background-image:url(images/bullet.gif);
+	    background-position: -3px 6px;
+	    background-repeat: no-repeat;
+	    font-size:8pt;
+	    display: block;
+    }
+    .x-layout-panel-north, .x-layout-panel-south, #content .x-layout-panel-center{
+        border:0px none;
+    }
+    #content .x-layout-panel-south{
+        border-top:1px solid #aca899;
+    }
+    #content .x-layout-panel-center{
+        border-bottom:1px solid #aca899;
+    }
+    </style>
+	<script type="text/javascript">
+	Example = function(){
+	        return {
+	            init : function(){
+	               var layout = new Ext.BorderLayout(document.body, {
+	                    west: {
+	                        split:true,
+	                        initialSize: 200,
+	                        titlebar: true,
+	                        collapsible: true,
+	                        minSize: 100,
+	                        maxSize: 400
+	                    },
+	                    center: {
+	                        autoScroll: false
+	                    }
+	                });
+	                layout.beginUpdate();
+	                
+	                layout.add('west', new Ext.ContentPanel('nav', {title: 'Navigation', fitToFrame:true, closable:false}));
+	                var innerLayout = new Ext.BorderLayout('content', {
+	                    south: {
+	                        split:true,
+	                        initialSize: 200,
+	                        minSize: 100,
+	                        maxSize: 400,
+	                        autoScroll:true,
+	                        collapsible:true,
+	                        titlebar: true
+	                    },
+	                    center: {
+	                        autoScroll:true
+	                    }
+	                });
+	                innerLayout.add('south', new Ext.ContentPanel('inner1', "More Information"));
+	                innerLayout.add('center', new Ext.ContentPanel('inner2'));
+	                layout.add('center', new Ext.NestedLayoutPanel(innerLayout));
+	                layout.endUpdate();
+	           }
+	     };
+	       
+	}();
+	Ext.EventManager.onDocumentReady(Example.init, Example, true);
+	</script>
+</head>
+<body class="xtheme-gray">
+<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
+<div id ="container">
+  <div id="nav" class="x-layout-inactive-content">
+      <ul>
+        <li><a href="http://developer.yahoo.com/yui/" target="_blank"><img src="/blog/images/icons/yahoo.gif" width="16" height="16" border="0" align="absmiddle">&nbsp;Yahoo! UI Library</a></li>
+	    <li><a href="http://www.ajaxian.com/" target="_blank"><img src="/blog/images/icons/ajaxian.gif" width="16" height="16" border="0" align="absmiddle">&nbsp;Ajaxian.com</a></li>
+      </ul> 
+  </div>
+  <div id="content" class="x-layout-inactive-content"></div>
+  <div id="inner1" class="x-layout-inactive-content">
+        <p>This layout uses the gray theme. To make a layout use the gray theme, add the class .xtheme-gray to the body or a container element.</p>
+        <p>Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor ullamcorper. Sed tincidunt molestie enim. Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula elit. Proin quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis. Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non erat. Nulla ultrices vestibulum quam.</p>
+        <p>Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque tortor, sed pellentesque sem enim id metus. Maecenas at pede. Nulla velit libero, dictum at, mattis quis, sagittis vel, ante. Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac nulla. In risus.</p>
+        <p>Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis pulvinar, odio turpis dapibus elit, in tincidunt turpis felis nec libero. Nam vestibulum tempus ipsum. In hac habitasse platea dictumst. Nulla facilisi. Donec semper ligula. Donec commodo tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id velit ut velit varius commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Fusce ornare pellentesque libero. Nunc rhoncus. Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo sem lobortis elit, ac sollicitudin ipsum neque nec ante.</p>
+        <p>Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum sodales. Donec varius dapibus nisl. Praesent at velit id risus convallis bibendum. Aliquam felis nibh, rutrum nec, blandit non, mattis sit amet, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam varius dignissim nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>
+  </div>
+  <div id="inner2" class="x-layout-inactive-content">
+        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.</p>
+        <p>Donec quis dui. Sed imperdiet. Nunc consequat, est eu sollicitudin gravida, mauris ligula lacinia mauris, eu porta dui nisl in velit. Nam congue, odio id auctor nonummy, augue lectus euismod nunc, in tristique turpis dolor sed urna. Donec sit amet quam eget diam fermentum pharetra. Integer tincidunt arcu ut purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla blandit malesuada odio. Nam augue. Aenean molestie sapien in mi. Suspendisse tincidunt. Pellentesque tempus dui vitae sapien. Donec aliquam ipsum sit amet pede. Sed scelerisque mi a erat. Curabitur rutrum ullamcorper risus. Maecenas et lorem ut felis dictum viverra. Fusce sem. Donec pharetra nibh sit amet sapien.</p>
+        <p>Aenean ut orci sed ligula consectetuer pretium. Aliquam odio. Nam pellentesque enim. Nam tincidunt condimentum nisi. Maecenas convallis luctus ligula. Donec accumsan ornare risus. Vestibulum id magna a nunc posuere laoreet. Integer iaculis leo vitae nibh. Nam vulputate, mauris vitae luctus pharetra, pede neque bibendum tellus, facilisis commodo diam nisi eget lacus. Duis consectetuer pulvinar nisi. Cras interdum ultricies sem. Nullam tristique. Suspendisse elementum purus eu nisl. Nulla facilisi. Phasellus ultricies ullamcorper lorem. Sed euismod ante vitae lacus. Nam nunc leo, congue vehicula, luctus ac, tempus non, ante. Morbi suscipit purus a nulla. Sed eu diam.</p>
+  </div>
+</div>
+ </body>
+</html>
+<html>
+<head>
+  <title>Simple Layout</title>
+	<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
+	<!-- GC --> <!-- LIBS -->     <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>     <!-- ENDLIBS -->
+    <script type="text/javascript" src="../../ext-all.js"></script>
+    
+    <style type="text/css">
+	html, body {
+        font:normal 12px verdana;
+        margin:0;
+        padding:0;
+        border:0 none;
+        overflow:hidden;
+        height:100%;
+    }
+	#header{
+	    background: url(images/header-bar.gif) repeat-x bottom;
+	    border-bottom: 1px solid #083772;
+	    padding:5px 4px;
+	}
+	#footer{
+	    background: url(images/header-bar.gif) repeat-x bottom;
+	    border-top: 1px solid #083772;
+	    padding:2px 4px;
+	    color:white;
+	    font:normal 8pt arial,helvetica;
+    }
+	#nav {
+	    background-color:#c3daf9;
+	}
+	#nav, #content {
+	    padding:10px;
+	}
+	#content p {
+	    margin:5px;
+	}
+	#nav li {
+	    padding:2px;
+	    padding-left:10px;
+	    background-image:url(images/bullet.gif);
+	    background-position: -3px 6px;
+	    background-repeat: no-repeat;
+	    font-size:8pt;
+	    display: block;
+    }
+    .x-layout-panel{
+        border:0px none;
+    }
+	</style>
+	<script type="text/javascript">
+	Example = function(){
+	        return {
+	            init : function(){
+	               var layout = new Ext.BorderLayout(document.body, {
+	                    north: {
+	                        split:false,
+	                        initialSize: 35
+	                    },
+	                    south: {
+	                        split:false,
+	                        initialSize: 20
+	                    },
+	                    west: {
+	                        split:false,
+	                        initialSize: 200,
+	                        collapsible: false
+	                    },
+	                    center: {
+	                        autoScroll: true
+	                    }
+	                });
+	                layout.beginUpdate();
+	                layout.add('north', new Ext.ContentPanel('header', {fitToFrame:true}));
+	                layout.add('south', new Ext.ContentPanel('footer', {fitToFrame:true}));
+	                layout.add('west', new Ext.ContentPanel('nav', {fitToFrame:true}));
+	                layout.add('center', new Ext.ContentPanel('content'));
+	                layout.endUpdate();
+	           }
+	     };
+	       
+	}();
+	Ext.EventManager.onDocumentReady(Example.init, Example, true);
+	</script>
+</head>
+<body>
+<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
+<div id ="container">
+  <div id="header" class="x-layout-inactive-content">
+      <img src="/blog/images/jsblog.gif" width="160" height="27" alt="Jack Slocum's Blog" border="0"/>
+  </div>
+  <div id="nav" class="x-layout-inactive-content">
+      <ul>
+        <li><a href="http://developer.yahoo.com/yui/" target="_blank"><img src="/blog/images/icons/yahoo.gif" width="16" height="16" border="0" align="absmiddle">&nbsp;Yahoo! UI Library</a></li>
+	    <li><a href="http://www.ajaxian.com/" target="_blank"><img src="/blog/images/icons/ajaxian.gif" width="16" height="16" border="0" align="absmiddle">&nbsp;Ajaxian.com</a></li>
+      </ul> 
+  </div>
+  <div id="content" class="x-layout-inactive-content">
+        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.</p>
+        <p>Donec quis dui. Sed imperdiet. Nunc consequat, est eu sollicitudin gravida, mauris ligula lacinia mauris, eu porta dui nisl in velit. Nam congue, odio id auctor nonummy, augue lectus euismod nunc, in tristique turpis dolor sed urna. Donec sit amet quam eget diam fermentum pharetra. Integer tincidunt arcu ut purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla blandit malesuada odio. Nam augue. Aenean molestie sapien in mi. Suspendisse tincidunt. Pellentesque tempus dui vitae sapien. Donec aliquam ipsum sit amet pede. Sed scelerisque mi a erat. Curabitur rutrum ullamcorper risus. Maecenas et lorem ut felis dictum viverra. Fusce sem. Donec pharetra nibh sit amet sapien.</p>
+        <p>Aenean ut orci sed ligula consectetuer pretium. Aliquam odio. Nam pellentesque enim. Nam tincidunt condimentum nisi. Maecenas convallis luctus ligula. Donec accumsan ornare risus. Vestibulum id magna a nunc posuere laoreet. Integer iaculis leo vitae nibh. Nam vulputate, mauris vitae luctus pharetra, pede neque bibendum tellus, facilisis commodo diam nisi eget lacus. Duis consectetuer pulvinar nisi. Cras interdum ultricies sem. Nullam tristique. Suspendisse elementum purus eu nisl. Nulla facilisi. Phasellus ultricies ullamcorper lorem. Sed euismod ante vitae lacus. Nam nunc leo, congue vehicula, luctus ac, tempus non, ante. Morbi suscipit purus a nulla. Sed eu diam.</p>
+        <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras imperdiet felis id velit. Ut non quam at sem dictum ullamcorper. Vestibulum pharetra purus sed pede. Aliquam ultrices, nunc in varius mattis, felis justo pretium magna, eget laoreet justo eros id eros. Aliquam elementum diam fringilla nulla. Praesent laoreet sapien vel metus. Cras tempus, sapien condimentum dictum dapibus, lorem augue fringilla orci, ut tincidunt eros nisi eget turpis. Nullam nunc nunc, eleifend et, dictum et, pharetra a, neque. Ut feugiat. Aliquam erat volutpat. Donec pretium odio nec felis. Phasellus sagittis lacus eget sapien. Donec est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
+        <p>Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor ullamcorper. Sed tincidunt molestie enim. Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula elit. Proin quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis. Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non erat. Nulla ultrices vestibulum quam.</p>
+        <p>Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque tortor, sed pellentesque sem enim id metus. Maecenas at pede. Nulla velit libero, dictum at, mattis quis, sagittis vel, ante. Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac nulla. In risus.</p>
+        <p>Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis pulvinar, odio turpis dapibus elit, in tincidunt turpis felis nec libero. Nam vestibulum tempus ipsum. In hac habitasse platea dictumst. Nulla facilisi. Donec semper ligula. Donec commodo tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id velit ut velit varius commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Fusce ornare pellentesque libero. Nunc rhoncus. Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo sem lobortis elit, ac sollicitudin ipsum neque nec ante.</p>
+        <p>Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum sodales. Donec varius dapibus nisl. Praesent at velit id risus convallis bibendum. Aliquam felis nibh, rutrum nec, blandit non, mattis sit amet, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam varius dignissim nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>
+          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.</p>
+        <p>Donec quis dui. Sed imperdiet. Nunc consequat, est eu sollicitudin gravida, mauris ligula lacinia mauris, eu porta dui nisl in velit. Nam congue, odio id auctor nonummy, augue lectus euismod nunc, in tristique turpis dolor sed urna. Donec sit amet quam eget diam fermentum pharetra. Integer tincidunt arcu ut purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla blandit malesuada odio. Nam augue. Aenean molestie sapien in mi. Suspendisse tincidunt. Pellentesque tempus dui vitae sapien. Donec aliquam ipsum sit amet pede. Sed scelerisque mi a erat. Curabitur rutrum ullamcorper risus. Maecenas et lorem ut felis dictum viverra. Fusce sem. Donec pharetra nibh sit amet sapien.</p>
+        <p>Aenean ut orci sed ligula consectetuer pretium. Aliquam odio. Nam pellentesque enim. Nam tincidunt condimentum nisi. Maecenas convallis luctus ligula. Donec accumsan ornare risus. Vestibulum id magna a nunc posuere laoreet. Integer iaculis leo vitae nibh. Nam vulputate, mauris vitae luctus pharetra, pede neque bibendum tellus, facilisis commodo diam nisi eget lacus. Duis consectetuer pulvinar nisi. Cras interdum ultricies sem. Nullam tristique. Suspendisse elementum purus eu nisl. Nulla facilisi. Phasellus ultricies ullamcorper lorem. Sed euismod ante vitae lacus. Nam nunc leo, congue vehicula, luctus ac, tempus non, ante. Morbi suscipit purus a nulla. Sed eu diam.</p>
+        <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras imperdiet felis id velit. Ut non quam at sem dictum ullamcorper. Vestibulum pharetra purus sed pede. Aliquam ultrices, nunc in varius mattis, felis justo pretium magna, eget laoreet justo eros id eros. Aliquam elementum diam fringilla nulla. Praesent laoreet sapien vel metus. Cras tempus, sapien condimentum dictum dapibus, lorem augue fringilla orci, ut tincidunt eros nisi eget turpis. Nullam nunc nunc, eleifend et, dictum et, pharetra a, neque. Ut feugiat. Aliquam erat volutpat. Donec pretium odio nec felis. Phasellus sagittis lacus eget sapien. Donec est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
+        <p>Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor ullamcorper. Sed tincidunt molestie enim. Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula elit. Proin quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis. Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non erat. Nulla ultrices vestibulum quam.</p>
+        <p>Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque tortor, sed pellentesque sem enim id metus. Maecenas at pede. Nulla velit libero, dictum at, mattis quis, sagittis vel, ante. Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac nulla. In risus.</p>
+        <p>Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis pulvinar, odio turpis dapibus elit, in tincidunt turpis felis nec libero. Nam vestibulum tempus ipsum. In hac habitasse platea dictumst. Nulla facilisi. Donec semper ligula. Donec commodo tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id velit ut velit varius commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Fusce ornare pellentesque libero. Nunc rhoncus. Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo sem lobortis elit, ac sollicitudin ipsum neque nec ante.</p>
+        <p>Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum sodales. Donec varius dapibus nisl. Praesent at velit id risus convallis bibendum. Aliquam felis nibh, rutrum nec, blandit non, mattis sit amet, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam varius dignissim nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>
+        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.</p>
+        <p>Donec quis dui. Sed imperdiet. Nunc consequat, est eu sollicitudin gravida, mauris ligula lacinia mauris, eu porta dui nisl in velit. Nam congue, odio id auctor nonummy, augue lectus euismod nunc, in tristique turpis dolor sed urna. Donec sit amet quam eget diam fermentum pharetra. Integer tincidunt arcu ut purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla blandit malesuada odio. Nam augue. Aenean molestie sapien in mi. Suspendisse tincidunt. Pellentesque tempus dui vitae sapien. Donec aliquam ipsum sit amet pede. Sed scelerisque mi a erat. Curabitur rutrum ullamcorper risus. Maecenas et lorem ut felis dictum viverra. Fusce sem. Donec pharetra nibh sit amet sapien.</p>
+        <p>Aenean ut orci sed ligula consectetuer pretium. Aliquam odio. Nam pellentesque enim. Nam tincidunt condimentum nisi. Maecenas convallis luctus ligula. Donec accumsan ornare risus. Vestibulum id magna a nunc posuere laoreet. Integer iaculis leo vitae nibh. Nam vulputate, mauris vitae luctus pharetra, pede neque bibendum tellus, facilisis commodo diam nisi eget lacus. Duis consectetuer pulvinar nisi. Cras interdum ultricies sem. Nullam tristique. Suspendisse elementum purus eu nisl. Nulla facilisi. Phasellus ultricies ullamcorper lorem. Sed euismod ante vitae lacus. Nam nunc leo, congue vehicula, luctus ac, tempus non, ante. Morbi suscipit purus a nulla. Sed eu diam.</p>
+        <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras imperdiet felis id velit. Ut non quam at sem dictum ullamcorper. Vestibulum pharetra purus sed pede. Aliquam ultrices, nunc in varius mattis, felis justo pretium magna, eget laoreet justo eros id eros. Aliquam elementum diam fringilla nulla. Praesent laoreet sapien vel metus. Cras tempus, sapien condimentum dictum dapibus, lorem augue fringilla orci, ut tincidunt eros nisi eget turpis. Nullam nunc nunc, eleifend et, dictum et, pharetra a, neque. Ut feugiat. Aliquam erat volutpat. Donec pretium odio nec felis. Phasellus sagittis lacus eget sapien. Donec est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
+        <p>Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor ullamcorper. Sed tincidunt molestie enim. Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula elit. Proin quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis. Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non erat. Nulla ultrices vestibulum quam.</p>
+        <p>Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque tortor, sed pellentesque sem enim id metus. Maecenas at pede. Nulla velit libero, dictum at, mattis quis, sagittis vel, ante. Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac nulla. In risus.</p>
+        <p>Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis pulvinar, odio turpis dapibus elit, in tincidunt turpis felis nec libero. Nam vestibulum tempus ipsum. In hac habitasse platea dictumst. Nulla facilisi. Donec semper ligula. Donec commodo tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id velit ut velit varius commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Fusce ornare pellentesque libero. Nunc rhoncus. Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo sem lobortis elit, ac sollicitudin ipsum neque nec ante.</p>
+        <p>Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum sodales. Donec varius dapibus nisl. Praesent at velit id risus convallis bibendum. Aliquam felis nibh, rutrum nec, blandit non, mattis sit amet, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam varius dignissim nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>
+  </div>
+  <div id="footer" class="x-layout-inactive-content">
+      Copyright 2006 Jack Slocum
+  </div>
+</div>
+ </body>
+</html>
+/*
+ * Ext JS Library 1.1 Beta 1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ * licensing@extjs.com
+ * 
+ * http://www.extjs.com/license
+ */
+
+#lib-bar {
+    position:absolute;
+    top:0;
+    right:0;
+    z-index:100;
+}
+#lib-bar-inner {
+    padding:4px;
+}
+#lib-bar * {
+    font-size:11px;
+}
 \ No newline at end of file
+/*
+ * Ext JS Library 1.1 Beta 1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ * licensing@extjs.com
+ * 
+ * http://www.extjs.com/license
+ */
+
+/* Fix for Opera, which does not seem to include the map function on Array's */
+if(!Array.prototype.map){
+    Array.prototype.map = function(fun){
+	var len = this.length;
+	if(typeof fun != "function"){
+	    throw new TypeError();
+	}
+	var res = new Array(len);
+	var thisp = arguments[1];
+	for(var i = 0; i < len; i++){
+	    if(i in this){
+		res[i] = fun.call(thisp, this[i], i, this);
+	    }
+	}
+        return res;
+     };
+}
+
+/* Paging Memory Proxy, allows to use paging grid with in memory dataset */
+Ext.data.PagingMemoryProxy = function(data) {
+	Ext.data.PagingMemoryProxy.superclass.constructor.call(this);
+	this.data = data;
+};
+
+Ext.extend(Ext.data.PagingMemoryProxy, Ext.data.MemoryProxy, {
+	load : function(params, reader, callback, scope, arg) {
+		params = params || {};
+		var result;
+		try {
+			result = reader.readRecords(this.data);
+		}catch(e){
+			this.fireEvent("loadexception", this, arg, null, e);
+			callback.call(scope, null, arg, false);
+			return;
+		}
+		
+		// filtering
+		if (params.filter!==undefined) {
+			result.records = result.records.filter(function(el){
+			    if (typeof(el)=="object"){
+					var att = params.filterCol || 0;
+					return String(el.data[att]).match(params.filter)?true:false;
+			    } else {
+					return String(el).match(params.filter)?true:false;
+			    }
+			});
+			result.totalRecords = result.records.length;
+		}
+		
+		// sorting
+		if (params.sort!==undefined) {
+		    // use integer as params.sort to specify column, since arrays are not named
+		    // params.sort=0; would also match a array without columns
+		    var dir = String(params.dir).toUpperCase() == "DESC" ? -1 : 1;
+        	var fn = function(r1, r2){
+				return r1 < r2;
+            };
+		    result.records.sort(function(a, b) {
+				var v = 0;
+				if (typeof(a)=="object"){
+				    v = fn(a.data[params.sort], b.data[params.sort]) * dir;
+				} else {
+				    v = fn(a, b) * dir;
+				}
+				if (v==0) {
+				    v = (a.index < b.index ? -1 : 1);
+				}
+				return v;
+		    });
+		}
+
+		// paging (use undefined cause start can also be 0 (thus false))
+		if (params.start!==undefined && params.limit!==undefined) {
+			result.records = result.records.slice(params.start, params.start+params.limit);
+		}
+		
+		callback.call(scope, result, arg, true);
+	}
+});
+#!/usr/bin/env python
+
+import sys, os, re
+
+try:
+    import chardet
+except ImportError:
+    print "You need universal encoding detector for this script"
+    print " http://chardet.feedparser.org or apt-get install python-chardet"
+    sys.exit()
+
+regexp_language = re.compile("\* +(.+) +translation", re.IGNORECASE)
+js_template = """/* This file is automaticly generated by create_language_js.py */
+
+// some data used in the examples
+Ext.namespace('Ext.exampledata');
+
+// TODO: complete and sort the list
+Ext.exampledata.languages = [
+%s
+];
+"""
+
+def lang_name(file):
+    language = os.path.basename(file)
+    m = regexp_language.search(open(file).read(512))
+    if m:
+	language = m.groups()[0]
+    return language
+
+def print_locale(lang_code):
+    print lang_code,
+    sys.stdout.flush()
+    return True
+
+def main():
+    base_dir = "../../src/locale"
+    base_file = lambda f: os.path.join(base_dir, f)
+    try:
+	locales = os.listdir(base_dir)
+    except IOError:
+	print "Cannot find source locale directory: %s ... exiting" % base_dir
+	sys.exit()
+    
+    valid_file = lambda e: e.endswith(".js") and e.startswith("ext-lang-")
+    char_set = lambda f: chardet.detect(open(f).read())['encoding']
+    lang_code = lambda f: f[9:f.rfind(".js")]
+    info_set = lambda f: (lang_name(base_file(f)), (lang_code(f), char_set(base_file(f))))
+    locales = dict(info_set(file) for file in locales if valid_file(file) and print_locale(lang_code(file)))
+    print "... done"
+    locale_strarray = ',\n'.join(["\t[%r, %r, %r]" % (code, name, charset) \
+				     for name, (code, charset) in sorted(locales.items())])
+    # create languages.js
+    open("languages.js", "w").write(js_template % locale_strarray)
+    print "saved %d languages to languages.js" % len(locales)
+        
+if __name__=="__main__":
+    main()
+<!--<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">-->
+<html lang="nl">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+    <title>Dutch Form</title>
+    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
+
+    <!-- GC --> <!-- LIBS -->     <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>     <!-- ENDLIBS -->
+    <script type="text/javascript" src="../../ext-all.js"></script>
+
+    <!-- include the locale file -->
+    <script type="text/javascript" src="../../source/locale/ext-lang-nl.js"></script>
+
+    <script type="text/javascript" src="dutch-provinces.js"></script>
+    <script type="text/javascript" src="dutch-form.js"></script>
+
+    <!-- Common Styles for the examples -->
+    <link rel="stylesheet" type="text/css" href="../examples.css" />
+</head>
+<body>
+<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
+<h1>Localization with Ext</h1>
+<p>The js is not minified so it is readable. See <a href="dutch-form.js">dutch-form.js</a>.</p>
+
+<p>
+    This demonstrates a dutch location of Ext using the form component. It includes the localization
+    file "ext-lang-nl.js" from the source/locale folder of the Ext download.
+</p>
+
+<div style="width:360px;">
+    <div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
+    <div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
+        <h3>Persoons Gegevens</h3>
+        <div id="form-ct">
+        </div>
+    </div></div></div>
+    <div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
+</div>
+<div class="x-form-clear"></div>
+</body>
+</html>
+/*
+ * Ext JS Library 1.1 Beta 1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ * licensing@extjs.com
+ * 
+ * http://www.extjs.com/license
+ */
+
+Ext.onReady(function(){
+
+    Ext.QuickTips.init();
+
+    // turn on validation errors beside the field globally
+    Ext.form.Field.prototype.msgTarget = 'side';
+
+    var fs = new Ext.form.Form({
+        labelAlign: 'right',
+        labelWidth: 95
+    });
+
+    fs.fieldset(
+        {legend:'Contact Informatie'},
+        new Ext.form.TextField({
+            fieldLabel: 'Voornaam',
+            name: 'first',
+            width:190
+        }),
+
+        new Ext.form.TextField({
+            fieldLabel: 'Achternaam',
+            name: 'last',
+            width:190
+        }),
+
+        new Ext.form.TextField({
+            fieldLabel: 'Bedrijf',
+            name: 'company',
+            width:190
+        }),
+
+        new Ext.form.TextField({
+            fieldLabel: 'E-mail',
+            name: 'email',
+            vtype:'email',
+            width:190
+        }),
+
+        new Ext.form.ComboBox({
+            fieldLabel: 'Provincie',
+            hiddenName: 'state',
+            store: new Ext.data.SimpleStore({
+                fields: ['province'],
+                data : Ext.exampledata.dutch_provinces // from dutch-provinces.js
+            }),
+            displayField: 'province',
+            typeAhead: true,
+            mode: 'local',
+            triggerAction: 'all',
+            emptyText:'Kies uw provincie...',
+            selectOnFocus:true,
+            width:190
+        }),
+
+        new Ext.form.DateField({
+            fieldLabel: 'Geboorte datum',
+            name: 'dob',
+            width:190,
+            allowBlank:false
+        })
+    );
+
+    fs.addButton('Opslaan');
+    fs.addButton('Annuleren');
+
+    fs.render('form-ct');
+});
 \ No newline at end of file
+/*
+ * Ext JS Library 1.1 Beta 1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ * licensing@extjs.com
+ * 
+ * http://www.extjs.com/license
+ */
+
+// some data used in the examples
+Ext.namespace('Ext.exampledata');
+
+Ext.exampledata.dutch_provinces = [
+	['Drenthe'],
+	['Flevoland'],
+	['Friesland'],
+	['Gelderland'],
+	['Groningen'],
+	['Limburg'],
+	['Noord-Brabant'],
+	['Noord-Holland'],
+	['Overijsel'],
+	['Utrecht'],
+	['Zeeland'],
+	['Zuid-Holland']
+    ];
+/*
+ * Ext JS Library 1.1 Beta 1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ * licensing@extjs.com
+ * 
+ * http://www.extjs.com/license
+ */
+
+/* This file is automaticly generated by create_language_js.py */
+
+// some data used in the examples
+Ext.namespace('Ext.exampledata');
+
+// TODO: complete and sort the list
+Ext.exampledata.languages = [
+	['hr', 'Croatian', 'utf-8'],
+	['cs', 'Czech', 'utf-8'],
+	['da', 'Danish', 'utf-8'],
+	['nl', 'Dutch', 'ascii'],
+	['en', 'English', 'ascii'],
+	['fr_CA', 'France (Canadian)', 'UTF-8'],
+	['de', 'German', 'utf-8'],
+	['el_GR', 'Greek', 'utf-8'],
+	['hu', 'Hungarian', 'utf-8'],
+	['it', 'Italian', 'ascii'],
+	['ja', 'Japanese', 'utf-8'],
+	['lv', 'Latvian', 'utf-8'],
+	['mk', 'Macedonia', 'utf-8'],
+	['no', 'Norwegian', 'utf-8'],
+	['pl', 'Polish', 'utf-8'],
+	['pt_br', 'Portuguese/Brazil', 'utf-8'],
+	['ro', 'Romanian', 'utf-8'],
+	['ru', 'Russian', 'utf-8'],
+	['sr_RS', 'Serbian Cyrillic', 'UTF-8'],
+	['zh_CN', 'Simplified Chinese', 'UTF-8'],
+	['sk', 'Slovak', 'utf-8'],
+	['sl', 'Slovenian', 'utf-8'],
+	['sp', 'Spanish/Latin American', 'utf-8'],
+	['sv_se', 'Swedish', 'utf-8'],
+	['zh_TW', 'Traditional Chinese', 'UTF-8'],
+	['tr', 'Turkish', 'utf-8'],
+	['vn', 'Vietnamese', 'UTF-8']
+];
+<!--<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">-->
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf8">
+<title>Multiple Languages</title>
+<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
+<link rel="stylesheet" type="text/css" href="../../resources/css/xtheme-gray.css" />
+<script type="text/javascript" src="../../adapter/yui/yui-utilities.js"></script>
+<script type="text/javascript" src="../../adapter/yui/ext-yui-adapter.js"></script>
+<script type="text/javascript" src="../../ext-all.js"></script>
+<script type="text/javascript" src="languages.js"></script>
+
+<!-- Common Styles for the examples -->
+<link rel="stylesheet" type="text/css" href="../examples.css" />
+</head>
+<body class="x-gray">
+<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
+<script type="text/javascript">
+var params = Ext.urlDecode(window.location.search.substring(1));
+if (params.lang) {
+    var s = document.createElement("script");
+    s.type = 'text/javascript';
+    s.src = "../../source/locale/ext-lang-"+params.lang+".js";
+    s.charset = params.charset;
+    document.getElementsByTagName("head")[0].appendChild(s);
+}
+</script>
+<script type="text/javascript" src="PagingMemoryProxy.js"></script>
+<script type="text/javascript" src="multi-lang.js"></script>
+
+<h1>Localization with Extjs</h1>
+<p>The js is not minified so it is readable. See <a href="multi-lang.js">multi-lang.js</a>.</p>
+
+<p>
+This demonstrates multiple language with some of the Ext components.<br/>
+Select a language from the combobox below (default is english) and try out the components in different languages.
+</p>
+
+<div>
+  <span style="float: left;">Language selector:&nbsp;</span>
+  <input type="text" id="languages" size="20" />
+</div>
+<br/>
+<h2>Email Field</h2>
+<p></p>
+<div style="width:300px;">
+    <div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
+    <div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
+        <h3 style="margin-bottom:5px;">Localized Email Field</h3>
+        <div id="form-ct"></div>
+    </div></div></div>
+    <div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
+</div>
+<br/>
+<h2>Datepicker</h2>
+<br/>
+<div style="width:300px;">
+    <div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
+    <div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
+        <h3 style="margin-bottom:5px;">Localized Datepicker</h3>
+        <div id="form-ct2"></div>
+    </div></div></div>
+    <div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
+</div>
+<br/>
+<h2>Grid</h2>
+<br/>
+<div style="width:300px;">
+    <div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
+    <div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
+        <h3 style="margin-bottom:5px;">Localized Grid</h3>
+		<div id="grid-panel" style="width:270px;height:178px;">
+		    <div id="editor-grid"></div>
+		</div>
+    </div></div></div>
+    <div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
+</div>
+</body>
+</html>