From Learn About the Ext JavaScript Library

If you haven't read part 1, part 2, and part 3 I suggest to read them first.

So at this point, we have a datastore and a grid linked to it. Now we need to create a formfield.

Contents 1 Form 2 Nobody's listening? 3 Beam me up Scotty 4 That's a wrap

Form

Let's start with a form without any interaction.

var simple;
 
// ----------------
//	Create searchform
// ----------------	
function createSearchForm()
{
	simple = new Ext.FormPanel({
	    width:950,
        labelWidth: 75,
        frame:true,
        title: 'Live search',
        bodyStyle:'padding:5px 5px 0',
        defaults: {width: 230},
        defaultType: 'textfield',
 
        items: [{
                fieldLabel: 'Search',
                name: 'query',
                allowBlank:true  		                            
            }
        ]	
	});
 
	// render the form in the div #searchWrapper
    simple.render("searchWrapper");	
}

Nobody's listening?

Now we want to add listeners to the formfield, because we want to send the formfield value to the server-side script every time we press a key. There's only one problem: there are no listeners attached to a form field (why I don't know). So we need to add those listeners manually.

// ----------------
//	Set listeners on form fields
// ----------------	
Ext.override(Ext.form.Field, {
    fireKey : function(e) {
        if(((Ext.isIE && e.type == 'keydown') || e.type == 'keypress') && e.isSpecialKey()) {
            this.fireEvent('specialkey', this, e);
        }
        else {
            this.fireEvent(e.type, this, e);
        }
    }
  , initEvents : function() {
        this.el.on("focus", this.onFocus,  this);
        this.el.on("blur", this.onBlur,  this);
        this.el.on("keydown", this.fireKey, this);
        this.el.on("keypress", this.fireKey, this);
        this.el.on("keyup", this.fireKey, this);
        this.originalValue = this.getValue();
    }
});

So now that every formfield has listeners we can use:

function createSearchForm()
{
	simple = new Ext.FormPanel({
	    width:950,
        labelWidth: 75,
        frame:true,
        title: 'Live search',
        bodyStyle:'padding:5px 5px 0',
        defaults: {width: 230},
        defaultType: 'textfield',
 
        items: [{
                fieldLabel: 'Search',
                name: 'query',
                allowBlank:true,
 
                // now ad listener
				listeners: 
				{
					// call this function on event keyup
					keyup: function(el,type)
					{
						var theQuery=el.getValue();
					}				
				}
            }
        ]	
	});
 
    simple.render("searchWrapper");	
}

So every time we press something while the focus is on the formfield, the 'keyup' event is fired and our function has 2 arguments: el and type. The 'el' argument holds the object that fired the keyup event. So with el.getValue() we extract the current value in the formfield.

Beam me up Scotty

Now we need to pass that value to the Datastore so it can send it to the server-side script.

To make the datastore setup a HTTP request to the server-side script we need to fire the load() function with the right params for example:

ds.load(
{
	params: 
	{	
		key:value
	}
});

Now we implement it in the formfield:

function createSearchForm()
	{
    	simple = new Ext.FormPanel({
		    width:950,
	        labelWidth: 75,
	        frame:true,
	        title: 'Live search',
	        bodyStyle:'padding:5px 5px 0',
	        defaults: {width: 230},
	        defaultType: 'textfield',
 
	        items: [{
	                fieldLabel: 'Search',
	                name: 'query',
	                allowBlank:true,
 
					listeners: 
					{
						keyup: function(el,type)
						{
							var theQuery=el.getValue();
 
							// set up the datastore to make a request with the params
							ds.load(
							{
								params: 
								{	
									query: theQuery
								}
							});
 
						}				
					}
	            }
	        ]	
    	});
 
	    simple.render("searchWrapper");	
	}

That's a wrap

So there you have it, the formfield has a listener to pass the value to the Datastore. The Datastore will setup a HTTP request to the server-side script. The server-side script will handle the request and return a JSON string. The reader will extract the rows and convert them into objects. The grid will get the objects from the reader and display the rows. And a livesearch is born.

So in short this was my tutorial, I hope it was useful to you.

Here's my complete JS code again:

/*
 * Ext JS Library 2.0.1
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */
 
Ext.onReady(function()
{
 
	// ----------------
	//	Set listeners on form fields
	// ----------------	
    Ext.override(Ext.form.Field, {
        fireKey : function(e) {
            if(((Ext.isIE && e.type == 'keydown') || e.type == 'keypress') && e.isSpecialKey()) {
                this.fireEvent('specialkey', this, e);
            }
            else {
                this.fireEvent(e.type, this, e);
            }
        }
      , initEvents : function() {
            this.el.on("focus", this.onFocus,  this);
            this.el.on("blur", this.onBlur,  this);
            this.el.on("keydown", this.fireKey, this);
            this.el.on("keypress", this.fireKey, this);
            this.el.on("keyup", this.fireKey, this);
            this.originalValue = this.getValue();
        }
    });
 
 
	 Ext.QuickTips.init();
 
	// ----------------
	//	vars
	// ----------------
	var ds;	// datasource
	var grid; // grid component
	var xg = Ext.grid;
	var expander;
	var simple;
 
	// ----------------
	//	Create searchform
	// ----------------	
	function createSearchForm()
	{
    	simple = new Ext.FormPanel({
		    width:950,
	        labelWidth: 75,
	        frame:true,
	        title: 'Live search',
	        bodyStyle:'padding:5px 5px 0',
	        defaults: {width: 230},
	        defaultType: 'textfield',
 
	        items: [{
	                fieldLabel: 'Search',
	                name: 'query',
	                allowBlank:true,
 
					listeners: 
					{
						keyup: function(el,type)
						{
							var theQuery=el.getValue();
 
							ds.load(
							{
								params: 
								{	
									query: theQuery
								}
							});
 
						}				
					}
	            }
	        ]	
    	});
 
	    simple.render("searchWrapper");	
	}	
 
	// ----------------
	//	Create datasource
	// ----------------
	function createDS()
	{
		ds = new Ext.data.Store({
            proxy: new Ext.data.HttpProxy({
                url: 'search.php',
                method: 'POST'
            }),                        
 
            reader:  new Ext.data.JsonReader({
				totalProperty: 'total',
				root: 'results',
				id: 'id',
				fields: ['id','name','email','comments']
			})					    
 
		});				
	}
 
 
	// ----------------
	//	Create expander
	// ----------------	
    var expander = new xg.RowExpander({
        tpl : new Ext.Template(
            '<p>{comments}</p>'
        )
    });	
 
 
 
	// ----------------
	//	Create grid
	// ----------------	
	function createGrid()
	{
	    grid = new xg.GridPanel(
	    {
	        store: ds, // use the datasource
 
	        cm: new xg.ColumnModel(
		        [
		        	expander,
		            {id:'name',header: "Name",  sortable: true, dataIndex: 'name'},
		            {id:'email',header: "E-mail",  sortable: true, dataIndex: 'email'}
		        ]
	        ),        
 
	        viewConfig: 
	        {
	            forceFit:true
	        },
 
	        plugins: expander,
			collapsible: true,
			animCollapse: false,
 
			width:950,
	        stripeRows:true,
	        title:'Search results',
	        iconCls:'icon-grid',
	        renderTo: "gridWrapper",
	        autoHeight:true
 
	    });
	} 
 
 
	createDS();
	createSearchForm();
    createGrid();	
 
});