ExtJs Examples

1. Build Ajax applications with Ext JS:
   http://www.ibm.com/developerworks/web/library/wa-aj-extjs/
2. Custom validations:
   http://www.quizzpot.com/2009/12/custom-validations/
3. Combo box loaded dynamically and remotely:
   http://www.quizzpot.com/2009/10/combo-box-loaded-dynamically-and-remotely/
4. Loading forms remotely:
   http://www.quizzpot.com/2009/11/loading-forms-remotely/
5. Saving information in the server:
   http://www.quizzpot.com/2009/11/saving-information-in-the-server/
6. Linked ComboBoxes with ExtJS:
   http://www.quizzpot.com/2009/11/linked-comboboxes-with-extjs/
7. Toolbar in panels and windows:
   http://www.quizzpot.com/2009/08/toolbar-in-panels-and-windows/
8. Status bar in panels and windows:
   http://www.quizzpot.com/2009/09/status-bar-in-panels-and-windows/
9. The Tabs:
   http://www.quizzpot.com/2009/09/the-tabs/
10. ExtJS basic forms and fields:
    http://www.quizzpot.com/2009/10/ext-js-basic-forms-and-fields/

Making AJAX Applications Crawlable

Ajax: The Definitive Guide
This document outlines the steps that are necessary in order to make your AJAX application crawlable. Once you have fully understood each of these steps, it should not take you very long to actually make your application crawlable! However, you do need to understand each of the steps involved, so we recommend reading this guide in its entirety.
Briefly, the solution works as follows: the crawler finds a pretty AJAX URL (that is, a URL containing a #! hash fragment). It then requests the content for this URL from your server in a slightly modified form. Your web server returns the content in the form of an HTML snapshot, which is then processed by the crawler. The search results will show the original URL.

http://code.google.com/intl/sv-SE/web/ajaxcrawling/docs/getting-started.html

Ajax.Responders.register

Ajax.Responders.register({
onCreate: function() {
  new Effect.Appear('ajax_loader', { duration: 0.3, to: 0.5 });
  },
onComplete: function(request, transport, json) {
  if (0 == Ajax.activeRequestCount) {
    new Effect.Fade('ajax_loader', { duration: 0.3, from: 0.5 });
  }
  if(!request.success()) {
    var errorMapping = $H({
      400: ['Bad Request', 'The request contains bad syntax or cannot be fulfilled.'],
      401: ['Authorization Required', 'You need to authenticate to access this page.'],
      403: ['Forbidden', 'The request was a legal request, but the server is refusing to respond to it.'],
      404: ['Page Not Found', 'The requested resource could not be found.'],
      405: ['Method Not Allowed', 'A request was made of a resource using a request method not supported by that resource; for example, using GET on a form which requires data to be presented via POST, or using PUT on a read-only resource.'],
      406: ['Not Acceptable', 'The action you tried to perform on this resource was considered unacceptable.'],
      415: ['Unsupported Media Type', 'The media type you are requesting is unsupported.'],
      422: ['Unprocessable Entity', 'The request was well-formed but was unable to be followed due to semantic errors.'],
      500: ['Application Error', 'An error occurred in the application code. Report sent.'],
      503: ['Service not available', 'The webserver did not respond to the request.'],
      505: ['HTTP Version Not Supported', 'The requested version is not available on this server.']
    });

    var errorMessage = errorMapping.get(transport.status) || ['Unknown Error', 'An error occurred, but could not be determined correctly.'];

    if (transport.responseJSON && transport.responseJSON.error)
       errorMessage = [transport.responseJSON.error.title, transport.responseJSON.error.message]

    var notifyUser = new GrowlNotifier({
      title: errorMessage[0],
      message: errorMessage[1],
      image: "/images/elements/growl_warning.png",
      type: 'error'
    });
  }
}
});

The Window.Growl Script.aculo.us mod is a modified version of Daniel Mota's Window.Growl adapted for the Script.aculo.us framework.

Growl.Smoke({
  title: "Growl.Smoke Script.aculo.us mod",
  text: "http://blog.var.cc/static/growl/",
  image: "image/var-logo-60.png",
  duration: 2.0
});

http://blog.var.cc/static/growl/
http://pastie.org/818221

Ajax.JSONRequest is JSONP for Prototype.js

The Basics

Your options are:

• onCreate: When the request is built but before it is invoked
• onSuccess: When the request is completed
• onFailure: When the request times out and fails
• onComplete: When the request is completed, regardless of success or failure
• callbackParamName: The name of the callback query parameter to use (defaults to "callback")
• parameters: Parameters to pass to the request
• timeout: The seconds before canceling the request and invoking onFailure

Handling response content:

The first (and only) argument passed to your response handlers is a Ajax.JSONResponse object. Access the resulting JSON data via that object's responseJSON property or get at the raw JSON string with that object's responseText property.

new Ajax.JSONRequest('http://api.flickr.com/services/feeds/photos_public.gne', {
callbackParamName: "jsoncallback",
parameters: {
  tags: 'cat', tagmode: 'any', format: 'json'
},
onCreate: function(response) {
  console.log("1: create", response, response.responseJSON);
},
onSuccess: function(response) {
  console.log("1: success", response, response.responseJSON);
},
onFailure: function(response) {
  console.log("1: fail", response, response.responseJSON);
},
onComplete: function(response) {
  console.log("1: complete", response, response.responseJSON);
}
});

Handling Failures

Since there is no way to inspect what happens after we make a request with the JSONP technique, we're stuck having to make informed guesses about what's going on.

This example makes a request to an invalid URL. Since the callback is not invoked within the default timeout period (10 seconds) the request is "cancelled" and the onFailure callback is invoked if specified. The Ajax.JSONResponse will have the status of 504 and statusText of "Gateway Timeout".

new Ajax.JSONRequest('http://api.flickr.com/services/feeds/asdfasdfasdfasdfasdfsdf', {
callbackParamName: "jsoncallback",
parameters: {
  tags: 'cat', tagmode: 'any', format: 'json'
},
onCreate: function(response) {
  console.log("2: create", response, response.responseJSON);
},
onSuccess: function(response) {
  console.log("2: success", response, response.responseJSON);
},
onFailure: function(response) {
  console.log("2: fail", response, response.responseJSON);
},
onComplete: function(response) {
  console.log("2: complete", response, response.responseJSON);
}
});

Using a custom timeout period

You can set your own timeout period. This example sets this timeout to 0.1 seconds which is pretty much guaranteed to fail.

new Ajax.JSONRequest('http://api.flickr.com/services/feeds/photos_public.gne', {

// Short timeout illustrates failure mechanism. This will "fail" because we don't
// get a response in time.
timeout: 0.1,

callbackParamName: "jsoncallback",
parameters: {
  tags: 'cat', tagmode: 'any', format: 'json'
},
onCreate: function(response) {
  console.log("3: create", response, response.responseJSON);
},
onSuccess: function(response) {
  console.log("3: success", response, response.responseJSON);
},
onFailure: function(response) {
  console.log("3: fail", response, response.responseJSON);
},
onComplete: function(response) {
  console.log("3: complete", response, response.responseJSON);
}
});

http://github.com/dandean/Ajax.JSONRequest

Really Useful Tutorials You Should Have Read

• 3 Ways to Preload Images with CSS, JavaScript, or Ajax
• How To Play with Google Maps and Twitter API
• Creating a Time Saving CSS Template
• How to Build a Shopping Cart using CodeIgniter and jQuery
• Top 15+ Best Practices for Writing Super Readable Code
• Building an Ajax Application with Progressive Enhancement
• Essential Tips and Tricks for Coding and Debugging AJAX Based Website
• Microformats: What, Why, and How
• Developing a Firefox Extension – the complete tutorial!
• Working With RGBA Colour

Diagnose and Prevent AJAX Performance Issues!

AJAX improves user experience by moving more code to the browser. Frameworks accelerate development, but lead to opaque application behavior and new performance issues.
dynaTrace AJAX Edition aims to solve these issues:

• Understand performance as real users experience it
• Differentiate between browser or server bottlenecks
• Trace asynchronous JavaScript executions for the full round-trip
• Analyze JavaScript, AJAX remoting, network and rendering performance in real-time
• Save performance data for interactive offline analysis
• Transform Selenium/Watir tests into performance tests and integrate them with your CI environment

http://ejohn.org/blog/deep-tracing-of-internet-explorer/
http://ajax.dynatrace.com/pages/

Cross-Domain Ajax with Flash

flXHR is a *client-based* cross-browser, XHR-compatible tool for cross-domain Ajax (Flash) communication. It utilizes an invisible flXHR.swf instance that acts as sort of a client-side proxy for requests, combined with a Javascript object/module wrapper that exposes an identical interface to the native XMLHttpRequest (XHR) browser object, with a few helpful additions and a couple of minor limitations (see the documentation for more details).

flXHR requires plugin v9.0.124 for security reasons. See the documentation for a configuration flag "autoUpdatePlayer" which will attempt to automatically inline update the plugin if need be.

The result is that flXHR can be used as a drop-in replacement for XHR based Ajax, giving you consistent, secure, efficient cross-domain client-to-server cross-domain Ajax communication, without messy workarounds such as IFRAME proxies, dynamic script tags, or server-side proxying.

flXHR brings a whole new world of cross-domain Ajax and API-consistency to any browser with Javascript and Flash Player plugin v9+ support (Adobe claims Flash has 99% browser support now External Link). No other methods or workarounds can claim that kind of wide-spread support or consistency. In addition, flXHR boasts the ability to be dropped-in to many different Javascript frameworks (Dojo, Prototype, jQuery, etc) for even easier and more robust Ajax usage.

http://flxhr.flensed.com/

Open Source Ajax Image Editor: AIE

AIE (Ajax Image Editor) is a rich internet application for manipulating images online. It's works with Mozilla Firefox and Internet Explorer. It uses HTML, JavaScript and Ext JS on client side and ImageMagick and PHP on server side.

AIE (Ajax Image Editor), formely known as Akoie was released as open source under the GNU General Public License (GPL) in 2007.

Easily integrate AIE in your Website!

It is avaiable for free download at sourceforge.net

Try live-demo

http://www.ajax-image-editor.com/

Ajax.History

Ajax.History provided features

Three parameters are provided by Ajax.History allowing you to configure the browsing history manager.
A callback has also been introduced: onStateChange(string state).
This callback is launched when the state of the browsing history points to the request.
This allows for example to change the title of the page according to the state (see example below).

Ajax.History.Request

Ajax.History.Request used exactly as Ajax.Request of Prototype.

For an interactive example, we create a simple function:

function ajaxHistoryRequest(url, myState) { new Ajax.History.Request(url, { history : { id : 'example', state : myState, cache : true, onStateChange: function(state) { // change title History.setTitle(History.getTitle() + ' - Page Ajax #' + state); } }, onSuccess: function(transport) { $('box-example').update(transport.responseText); // some stuff } });

ajaxHistoryRequest('history/request1', 'first-test');

ajaxHistoryRequest('history/request2', 'second-test');

ajaxHistoryRequest('history/request3', 'third-test');

** The cache is enabled, if you use a module as FireBug on Firefox, you can see that the use of buttons back/forward of your browser does not reload the Ajax.Request.

Ajax.History.Updater

Ajax.History.Updater used exactly as Ajax.History.Request :

Automatic historyId :

Here, the historyId is not declared, the 'containerName' is used automatically.

new Ajax.History.Updater('containerName', 'my/url/to/load.html', { history : { cache : true } }); // location.href == '...#containerName={state}'

Disable historyCache :

The cache is disabled, so, when user perform back/forward of browser, the Ajax Request will be loaded whenever.

new Ajax.History.Updater('containerName', 'my/url/to/load.html', { history : { id : 'my-own-identifier', cache : false } }); // location.href == '...#my-own-identifier={state}'

Ajax.Cache

How does the cache?

Ajax.Cache can "simulate" an Ajax Request from an Ajax Request made beforehand. It takes only one argument: the object Ajax.Request / Updater create first.
In fact, Ajax.Cache is based on a modified prototype Ajax.Request API. Yes, to simulate the request, I remove the mechanism (real) sending the HTTP request.

Perform simulation manually :

Ajax.Cache is already implemented in Ajax.History.* classes. However, you can use it manually :

// the request is executed firstly
var request = new Ajax.Request('my/url/to/load.html', {
  method: 'POST',
  ...
});

// reproduced the Ajax.Request without HTTP request
new Ajax.Cache(request);

http://www.prototypextensions.com/history

Cloudo

Forgot forwarding that presentation file to your personal email address? Left office without reading through the agenda for tomorrow? Forgot copying those vacation images onto your USB stick to show your friends?

Your Computer With You, Even When It’s Not

Imagine a world where your computer wasn’t tied to a physical computer, but rather a computer that lived on the Internet, instantly accessible from any computer or mobile phone connected to the Internet, no matter where you are or what you are up to. Cloudo offers just this.

With Cloudo, every computer, in school, at work, at your friends’ or even in the library becomes your own, free of charge computer. And with Cloudo Mobile your online computer is accessible from your mobile phone as well.
Use Cloudo as your default computer, or use it side by side with your work or home computer.

http://www.cloudo.com/

AjaxCSSJS class

AjaxCSSJS is a class for loading JavaScript and CSS files on-demand. (load dynamically)

Download AjaxCSSJS

Example1:
new AjaxCSSJS('layout.css', 'css');


Example2:
new AjaxCSSJS('js/ajaxtab.js', 'js');

Example3:
new AjaxCSSJS('js/ajaxtab.js', 'js',
function() {alert('loaded')}
)

Example4 [New feature: remove()]
var style;

addCss = function() {
 style = new AjaxCSSJS('css/style1.css', 'css');
}

removeCss = function() {
 style.remove();
}

Screencast : How to Create a File Upload Progress Bar in Rails, Passenger, Prototype and Low Pro

How to Create a File Upload Progress Bar in Rails, Passenger, Prototype and Low Pro from Erik Andrejko on Vimeo.

An upload progress bar is one of the best ways to improve the usability of file uploads in your application. This screencast will show how to create a file upload progress bar using Rails, Passenger, Low Pro and the upload progress bar apache module.

Screen Cast

• View a quicktime version: full, iPod.
• View the complete code for the screencast.

Required

• Passenger
• Upload progress bar apache module
• Prototype
• Low Pro for unobtrusive javascript
• Paperclip or something else to handle the uploaded files

Optional

• Configure a realistic (slow) development environment
• Passenger Prefpane a preference pane for Passenger under OS X Leopard

http://railsillustrated.com/screencast-file-uploads-progress-in-rails-passenger.html

Ajax progress indicator with prototype

You may know that you can add a global ajax responder to your application:

Ajax.Responders.register({
onCreate: function() {
Ajax.activeRequestCount++;
},
onComplete: function() {
Ajax.activeRequestCount--;
}
});

But we not going to cover that here, because you can't get the originating object. For example, there's no way here for a global ajax responder to get the anchor object.

< a_class="add" href="#" onclick="new Ajax.Request('/products/3/categorizations/18', {asynchronous:true, evalScripts:true, method:'put'}); return false;">add

Here's the rails generator code:

<%= link_to_remote "add", { :url => product_categorization_path(@product, category), :method => :put } %>

So, let's add some code to prevent the user from clicking twice.
To keep the view clean, We'll implement it as a simple view helper in application_helper.rb

<%= link_to_remote "add", { :url => product_categorization_path(@product, category), :before => ajax_progress, :method => :put } %>

def ajax_progress
 "setTimeout(function(){ this.innerHTML = '...' }.bind(this), 100)"
end

SetTimeout takes either a function name or an anonymous function. We binding the anonymous function to "this", which in this context refers to the 'A' anchor tag. Because it's bound, we can refer to "this" inside the function and get the anchor tag.

The setTimeout is useful because it lets us modify the tag (even remove it from the DOM) without messing with the ajax request. You can use setTimeout on a form to change the action, so it can't be submitted twice (for important forms)

We going to step it up one more, because this code belongs in a library. Time to open up application.js and create a ghetto pseudoclass singleton thingy.

This will prevent the link from doing anything if the user clicks it twice.

Now, to modify the ajax_progress helper to simple beauty.

def ajax_progress
 "setTimeout(MyApp.ajaxing.bind(this), 100)"
end

Finally, let's show the user a GMail-style notice after 5 seconds, just to let them know that we're running slow or have just plain died.

MyApp = {

 ajaxing: function(){
   this.innerHTML = '...';
   this.onclick = FacetApp.nothing;
   setTimeout(MyApp.slooow.bind(this), 5000);
 },

 /* shows a ? symbol. useful for showing progress on an ajax action */
 slooow: function(){
   this.innerHTML = ".?."
   /* show a warning message in the ui somewhere */
 }
}

Got a better way of doing this?

http://www.caboo.se/articles/2008/3/27/ajax-progress-indicator-with-prototype

Ajax file upload

Browsers force us to use file inputs for uploads, which are impossible to style. Moreover, form-based uploads look obsolete in modern ajax applications. We can use flash to solve this problem, but javascript works nice too.

View an usage examples for jquery and prototype with various options.

Download

• jquery.ajax_upload.0.9.js(7KB)
• jquery.ajax_upload.0.9.min.js (3KB)
• prototype.ajax_upload.0.9.js (7KB)
• prototype.ajax_upload.0.9.min.js(3KB)

http://valums.com/ajax-upload/

WaveMaker

The WaveMaker platform consists of two components: WaveMaker Visual Ajax Studio™ for developing rich internet applications and WaveMaker Rapid Deployment Server™ for deploying applications into a standard and secure Java environment.

Truly WYSIWYG Web 2.0 Development
WaveMaker Visual Ajax Studio is an easy-to-use visual builder that enables the drag & drop assembly of scalable, web-applications using Ajax widgets, web services and databases. WaveMaker Studio will look and feel especially familiar to client/server developers who are used to working with visual tools.

WaveMaker has helped customers reduced development costs by 67% and cut the lines of code written by 98%. Less code makes WaveMaker applications cheaper to maintain and easier to manage.

http://wavemaker.com/

JS Frameworks

Peppy
Peppy is a lightning fast CSS 3 compliant selector engine with no external library dependencies. Peppy can be used along side other libraries seamlessly.
As it stands now Peppy is faster¹ than all other major JavaScript libraries with DOM querying capabilities (Prototype 1.6.0.3, JQuery 1.2.6, MooTools 1.2.1, EXT 2.2, DoJo 1.2.0, YUI 2.6.0). It is faster² than Sizzle by John Resig and it also is cross browser (IE included). Take a look for yourselves, I have a profiling page set up here.
At 10k it is an ideal replacement for other excellent but bulkier libraries (whose feature sets span beyond DOM querying) when features additional to DOM querying are not needed in your web application. If you are designing your own JavaScript library or want to replace your existing libraries selector engine then Peppy is an ideal candidate.
http://jamesdonaghue.com

Sizzle
This is a new pure-JavaScript CSS selector engine that I'm working on. Comes in at roughly 4x faster in Firefox 3, 3x faster in Opera 9, 1.5x faster in Safari 3 than the other major JavaScript libraries. It's completely standalone (no library dependencies) and clocks in at 4KB.
Currently this engine is expected to become the new default selector engine of jQuery, MochiKit, Prototype, and Dojo.
http://github.com/jeresig/sizzle/tree/master

Prototype
Prototype is a JavaScript Framework that aims to ease development of dynamic web applications.
Featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around, Prototype is quickly becoming the codebase of choice for web application developers everywhere.
http://www.prototypejs.org/

jQuery
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.
http://jquery.com/

MooTools
MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.
MooTools code respects strict standards and doesn't throw any warnings. It's extensively documented and has meaningful variable names: a joy to browse and a snap to understand.
http://mootools.net

Ext JS

Ext JS is a cross-browser JavaScript library for building rich internet applications.

• High performance, customizable UI widgets
• Well designed, documented and extensible Component model
• Commercial and Open Source licenses available

http://extjs.com

dojo
Ajax, events, packaging, CSS-based querying, animations, JSON, language utilities, and a lot more. All at 26K (gzipped).
http://dojotoolkit.org

The Yahoo! User Interface Library
The Yahoo! User Interface (YUI) Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. The YUI Library also includes several core CSS resources.
http://developer.yahoo.com/yui/

How to observe more fields with AJAX helper

The observe_field AJAX helper allows to observe one field; if there is a change, it calls the specified method on the server side. It is possible to attach one value for the call.

This is enough if we have one text box search for searching over multiple columns or for a full-text search.

For a more complicated filtering functionality with more fields there are two main problems with the observe_field helper:

• how to specify more parameter values in the observe_field helper.
• it is necessary to write a observe_field call for each field.

http://www.valibuk.net/2006/08/how-to-observe-more-fields-with-ajax-helper/

FullAjax

AJAX (Asynchronous JavaScript and

XML — Асинхронный JavaScript и XML) — это подход к построению интерактивных пользовательских интерфейсов веб-приложений. При использовании AJAX веб-страница не перезагружается полностью в ответ на каждое действие пользователя. Вместо этого с веб-сервера догружаются только нужные пользователю данные.

AHAH (Asynchronous HTML and HTTP — Асинхронный HTML и HTTP) — это подход для динамического обновления веб-страниц, используя Javascript, подобный AJAX, но отличаются тем, что ответы сервера должны быть текстом или уже включать действительную структуру XHTML/HTML.

Fullajax = AJAX + AHAH — технология, подход к построению, переводу сайтов и веб-приложений на AJAX. Направлен на выработку правил и методов максимального внедрения всей мощности AJAX & AHAH. Наша технология уменьшает сложность и расширяет узконаправленность области применения AJAX.

http://fullajax.ru/

DOM Ready for prototype

If you are tired of waiting for your whole page to load including images, flash, ads and movies before your javascript executes? Well then you are someone like me.

Dan at Vivabit created the DOM Ready extension for the Prototype framework which allows you to start executing code when the DOM is ready and all elements are available, leaving the images and other element loading in the background. Very nice work and something i’ve been waiting for a long time!

http://www.skyrocket.be/2006/10/11/dom-ready-for-prototype/

A Technique for Lazy Script Loading

Bob Matsuoka has written a guest article on the topic of lazy script loading. Thanks so much Bob!

A recent article "Lazily load functionality via Unobtrusive Scripts" discussed how to lazily load Javascript script files by appending script elements to the HEAD tag.

While this works as expected, I've found that for best results, you should also consider tracking which scripts have been loaded in order to prevent re-loading an already loaded script, and more importantly supporting callbacks so that you can guarantee loading of scripts prior to calling functions that depend on that code.

LazyLoader.load('js/myscript1.js');

http://ajaxian.com/archives/a-technique-for-lazy-script-loading

MSN is now implementing a technique for loading JavaScript in a way that doesn’t stall the rendering of the document. They use Dynodes, a technique I also recommend for loading functionality on demand so it only consumes bandwidth when it is needed.

http://www.artzstudio.com/2008/07/beating-blocking-javascript-asynchronous-js/
http://www.yuiblog.com/blog/2008/07/22/non-blocking-scripts/
http://www.jspatterns.com/javascript-includes-and-domcontentloaded-event/