AJAX with ExtJS JavaScript Framework

Ext JS, the JavaScript framework with Ajax and UI Components

Ext JS, the JavaScript framework with Ajax and UI Components

Ext JS is a JavaScript Library/Framework which works in conjunction with Prototype, YahooUI and jQuery. It’s probably the most exciting toolkit available for building web 2.0 websites right now. It’s jam packed with features, and is designed to make life much easier for building great UI in JavaScript.

I’ll not dig to deep right now, I suggest you check out the example and demos first to see what you think.

Below is a the script used to grab XML data via Ajax and populate a grid (sortable table like object):

/*
 * Ext JS Library 1.0.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();
});

Take a look at the JavaScript generated grid here.

Hopefully this short intro will wet your appetite, more to come soon.

Great work Jack (and the rest of the Ext JS team) for this superb library, can’t wait to see more!!

JavaScript Form Validator number two

That’s nice, but what does it do?

Well it validates your form stupid!! as with most (if not all?) posts on this website, the script is simple, easy to follow and not jam packed with to many features. Basically this script will look for required fields (which you specify in your form.. I’ll come to this later) and if a required field is empty, it will through up a JavaScript alert box telling the user (and prevent the form from being submitted).

Before I present to you the Code Example, I’ll explain a little about how to configure your form and make certain fields required.

For simplicity, I’ve chosen to make use of the fields ‘Title’ tag. This is where you make fields required.

For example: < input type="text" name="FirstName" title=”required” >

Note: The script will support the following form field types:

• Text


• Textarea


• Password


• Select

Just to recap. To make any of the supported fields required, just add title=”required”!

Triggering the form to call the JavaScript Validation Script:

In order for the form to call the JavaScript and check all the required fields, we need to prevent the form from submitting. In order to achieve this, we will use the onSubmit event on the form tag. Example:

< form name="myForm" method="post" action="process.php" onSubmit=”return myForm.check(this)” >

We must use return before the function call, this tells to form ‘do not submit the form unless the function returns true’.

The JavaScript form Validator Script

var myForm = {
  fTitle : "",
  fValue : "",
  fName : "",
  fField : "",

  check : function(fObject) {
    for(var i = 0;i < fObject.elements.length;i++) {
    fField = fObject.elements[i];
    fTitle = fField.title;
    fValue = myString.trim(fField.value);
    fName = fField.name;
    fType = fField.type;
    switch(fType) {
      case "text":
      case "password":
      case "textarea":
        if(fTitle == "required" && encodeURI(fValue).length < 1) {
        alert(fName+': is required, please complete.');
        fField.focus();
        return false;
      } // if
      break;
      case "select-one":
        if(fTitle == "required" &&
        fField.options[fField.selectedIndex].value.length < 1) {
        alert(fName+': is required, please select one.');
        fField.focus();
        return false;
        } // if
      break;
    } // switch
    } // for
  } // method
} // object

var myString = {
  trim : function(s) {
  return s.replace(/^\s+/, '').replace(/\s+$/, '');
  }, // method
  noTags : function(s) {
    return s.replace(/<\/?[^>]+>/gi, '');
  },
  strip : function(s) {
    return this.noTags(this.trim(s));
  }
}

As you can see, this is nice and easy to follow. Nothing to fancy, but believe me this wee function can save a lot of time, especially if you build a lot of forms.

Why does it not do more complex validation?

Simple, because I like to keep things nice and easy (and I don’t do complex)…. The last thing I want to do is give you a headache. Like everything on this site, this is just an example. Please feel free to use and enhance it to fit better with your own needs.

Before I go, I’d better mention that the JavaScript function will strip out any leading and trailing whitespace before the validation is done. There is also a little function to strip out HTML tags (it’s not being used in the above example, but you can make use of this on a field basis by using the onFocus event!!), Just a little bonus!!