01. Plupload

Allows you to upload files using HTML5 Gears, Silverlight, Flash, BrowserPlus or normal forms, providing some unique features such as upload progress, image resizing and chunked uploads,  Plupload is currently separated into a Core API  and a jQuery upload queue widget this enables you to either use it out of the box or write your own custom implementation, demo.

02. Ajax Upload by Andrew Valums

AJAX Upload allows you to easily upload multiple files without refreshing the page and use any element to show file selection window. It works in all major browsers and doesn’t require any library to run. AJAX Upload doesn’t pollute the global namespace, and is tested with jQuery, Prototypejs. This plugin is one of the most famous jquery uploader that require no flash. demo

03. Ajax File Upload

This AjaxFileUpload Plugin is a hacked version of Ajaxupload plugin created by yvind Saltvik, which is really good enought for normal use. Its idea is to create a iframe and submit the specified form to it for further processing, demo.

03. jQuery Multiple File Upload Plugin by Fyneworks.com

The Multiple File Upload Plugin (jQuery.MultiFile) is a non-obstrusive plugin for the jQuery Javascript library that helps users easily select multiple files for upload quickly and easily whilst also providing some basic validation functionality to help developers idenfity simple errors, without having to submit the form.

04. jQuery Form Plugin – File Upload by malsup.com

This plugin is a part of jQuery Form Plugin it make you easier to submitting form using Ajax including the input file, and required no flash, demo.

05 . Uploadify

Uploadify is a jQuery plugin that allows the easy integration of a multiple (or single) file uploads on your website.  It requires Flash and any backend development language.  An array of options allow for full customization for advanced users, but basic implementation is so easy that even coding novices can do it. Uploadify free to be used in a number of applications and commercial products, demo.

06. SWFUpload jQuery Plugin by Adam Royle

This plugin created based on SWFUpload and Jquery, it support both single or mutiple file upload, and require flash, demo.

07. jqswfupload by Alexandre Magno

This plugin is the easier way to make a multiple file upload using swfupload library. You can create a complete interface for multiupload files based on Flickr in just one line of code and them make custom settings to controll how works all the features, demo.

08. jcUpload

It’s a small free plugin, that enables ajax-like file upload. It requires Adobe Flash player and jQuery JavaScript library. Plugin is freeware, demo.

09. jqUploader

jqUploader is a jquery plugin that substitutes html file input fields with a flash-based file upload widget, allowing to display a progressbar and percentage. It is designed to take most of its customization from the html code of your form directly – so you don’t have to do things twice . For instance, the maximum file size, if specified via html, will be recognized and used in the rich upload interface generated by jqUploader. This plugin required flash, demo.

10. jqupload by jQframework

From the site it got following feature Easy to integate to your application, easy to define your own logic. lightweight form uploader plugin, source file is just 2k, free and free of charge under the MIT License, demo.

11. uploadprogress

Plugin to augment a standard file upload form with transparent background upload and add uploadprogress meter to keep client informed of progress. This is not really the plugin for uploading file, but just to help inform the progress of uploading file, demo.

Other source that might be useful

http://kisdigital.wordpress.com/2010/03/30/easy-jquery-mutlifile-uploader/

http://docs.jquery.com/Tutorials:Multiple_File_Upload_Magic

http://www.fullfatcode.com/2009/06/06/jquery-ajax-uploader-plugin/

Let’s start :

1. Include EXTJS file in html header

<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/>
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>

2. Create The EXTJS form

<script type="text/javascript">
Ext.onReady(function(){
	var formRegister = new Ext.FormPanel({
		frame: false, border: false, buttonAlign: 'center',
		url: 'undefined', method: 'POST', id: 'frmRegister',
		bodyStyle: 'padding:10px 10px 15px 15px;background:#dfe8f6;',
		width: 300, labelWidth: 150,
		items: [{
			xtype: 'textfield',
			fieldLabel: 'Username',
			name: 'username',
			id: 'regUsername',
			allowBlank: false,
			vtype: 'uniqueusername'
		}, {
			xtype: 'textfield',
			fieldLabel: 'Password',
			name: 'password',
			allowBlank: false,
			inputType: 'password'
		}, {
			xtype: 'textfield',
			fieldLabel: 'Confirm Password',
			name: 'cpassword',
			allowBlank: false,
			inputType: 'password'
		}, {
			xtype: 'textfield',
			fieldLabel: 'Email',
			name: 'email',
			vtype:'email',
			allowBlank: false
		}
		],
		buttons: [
			{ text: 'Register' },
			{ text: 'Reset', handler: function() {
					formRegister.getForm().reset();
				}
			}
		]
	});

	var winRegister = new Ext.Window({
		title: 'CI_EXTJS &mdash; User Register',
		layout: 'fit',
		width: 350,
		height: 190,
		y: 260,
		resizable: false,
		closable: false,
		items: [formRegister]
	});

	winRegister.show();
});
</script>

3. Code for modified custom validation
The idea is overiding the custom validation everytime it called

<script type="text/javascript">
Ext.apply(Ext.form.VTypes, {
	uniqueusername : function(val, field) {
		var username = Ext.getCmp('regUsername').getValue();
		Ext.Ajax.request({
			url: 'check_username.php',
			method: 'POST',
			params: 'username=' + username,
			success: function(o) {
				if (o.responseText == 0) {
					setusernamevalidfalse();
				}
			}
		});
		return true;
	},

	uniqueusernameText : 'Username Already In Use'
});

function setusernamevalidfalse() {
	Ext.apply(Ext.form.VTypes, {
		uniqueusername : function(val, field) {
			var username = Ext.getCmp('regUsername').getValue();
			Ext.Ajax.request({
				url: 'check_username.php',
				method: 'POST',
				params: 'username=' + username,
				success: function(o) {
					if (o.responseText == 0) {
						setusernamevalidfalse();
					} else {
						setusernamevalidtrue();
					}
				}
			});
			return false;
		}
	});
}

function setusernamevalidtrue() {
	Ext.apply(Ext.form.VTypes, {
		uniqueusername : function(val, field) {
			var username = Ext.getCmp('regUsername').getValue();
			Ext.Ajax.request({
				url: 'check_username.php',
				method: 'POST',
				params: 'username=' + username,
				success: function(o) {
					if (o.responseText == 0) {
						setusernamevalidfalse();
					} else {
						setusernamevalidtrue();
					}
				}
			});
			return true;
		}
	});
}
</script>

4. The simple php file validation
For more advanced usage you can use some database connection, and I call it check_username.php

<?php

$username_list = array('admin', 'administrator', 'superadmin', 'john', 'michael');
if (in_array($_POST['username'], $username_list)) {
	echo 0;
} else {
	echo 1;
}

?>

You can download all files following the download link below, but i’m included EXTJS file you can download from the official site here.

DOWNLOAD SOURCE

1. Table Orderer

Demo | Download

2. Table Sort

Demo | Download

3. Tablekit

Demo | Download

4. Table Sorting With Prototype

Demo | Download

5. Lighweight Table Sorting

Download

6. MyTableGrid

Demo | Download

7. Sortable for Prototype

Demo

1. Follow the examples

ExtJS come with a bunch of great sample use of using widget, this provide the basic use of the component, creating plugin, etc. This is the best way to know what you can do with the component and how to implement the component by viewing the source code, if you somehow don’t understand what the code means, simply you can consult the API documentation first. Just download it first and run on your local server or you can view it online.

2. Read the ExtJS tutorial

So, you are ready to get your hand wet ? but don’t know what to do to digging depper to understanding ExtJS, I suggest you start with tutorial from the ExtJS official site. It’s cover about the getting started guide, dom query helper, combobox, form, grids, drag & drop, menus, tree, etc, even the basic of the application design and some of them provide the downloadable example source code. Although the tutorial is useing version 1.x and 2.x, yes it is compatible if you are using version 3.

3. Don’t fear to read the API

The ExtJS API documentation come with the bundle when you’re downloading ExtJS. So how this gonna be useful ? well for me it provide very useful information about the Ext core and default config options, properties, events, method for each component, it’s a good reference when you are trying to manipulating the component. Some component given the basic example of usage. Just download the ExtJS bundle and you can find it in examples folder or you can view it online

4. Consult the spesific question to the forum

When I get some trouble I always use Google first, type your spesific question on Google and most of the solution found in the ExtJS official forum and i always found the solution is very handy and easy to understand. Even some of the expert member provide advance source about ExtJS like quick search plugin, grid paging row numberer and custom themes and you can download it for free.

5. Use the good IDE

Since you use ExtJS in javascript language, the you must code all the ExtJS component by hand, and you need the good IDE to help you browse the all avaliable API. I’m personally using Netbeans PHP IDE for my project, you can set the project and include the ExtJS style, ExtJS basic and ExtJS all. The IDE will scan all the project including the ExtJS file and when you code the ExtJS component or ExtJS core, you can type shift + space on your keyboard and the IDE will give an autocomplete feature, and it helping me a lot, maybe not all the method shown in the autocomplete feature but you still can browse on the API documentation. If your not the fan of Netbeans, you can use other great IDE like Eclipse or Aptana.

6. You may need to know a bit about Javascript Language

My experience is when i code the event handler of the component, sometimes need like client side validation, like is defined object, sel length etc. When you found this trouble just googling about spesific javascript question and it’is not really hard.

more ExtJS Resource and tutorial

Video tutorial from EXTJS.TV bunch of ExtJS Tutorial

http://defafe.com a blog about ExtJS tutorial

Example ExtJS in Action some of link not working but the ExtPlorer is good.

TuturTinular a blog who have some ExtJS tutorial

ExtJS and WordPress wordpress themes usign extjs and it’s free to download

Using ExtJS grid in WordPress Admin

Integrating CakePHP and ExtJS

http://blog.extjs.eu/