PeterKellner.net

As I’m learning ExtJS I plan on publishing the things I figure out.  For those that don’t know, ExtJS is a very rich JavaScript library that gives you all kinds of capabilities that work cross browsers.  Trees, Grid’s, Panels, Layouts and all kind of stuff.  For an idea of the kinds of things you can do, check out the demos at there site at this URL:  http://extjs.com/deploy/dev/examples/samples.html.

It’s pretty amazing the kinds of things that can be done with just client side JavaScript.  At the core of ExtJS are some very useful JavaScript methods.  In order to take advantage of the more sophisticated features, it’s helpful to know the basics first.  In this article, I plan on going through a simple example that will ultimately product html that looks like the following.

Notice that I’m showing this as a screen capture from firebug.  If I were to do a view/source, this is what it would show.

Welcome to JavaScript!  The colors div is generated on the fly.  I’m not 100% sure, but I think this has bad implications for SEO (Search Engine Optimization). More for another post later.  I need to do some experiments.

So, let’s dive into the code that is needed to generate this.  My plan here is to show the code, then explain it line by line.  ExtJS is very powerful and DomHelper is one of the cornerstone classes.

  1: Ext.onReady(function() {
  2: 
  3:   Ext.BLANK_IMAGE_URL = 'Images/s.gif';
  4: 
  5:   Ext.QuickTips.init();
  6: 
  7:   var colorArray = new Array('red', 'green', 'blue', 'orange');
  8: 
  9:   var colorObject = [{
 10:         id : 'pink',
 11:         html : 'pink-HTML',
 12:         tag : 'a',
 13:         href : 'http://www.mycolor.com/pink'
 14:       }];
 15: 
 16:   var myColor = new Object;
 17:   myColor.id = 'purple';
 18:   myColor.html = 'purple-HTML';
 19:   myColor.tag = 'a';
 20:   myColor.href = 'http://www.mycolor.com/purple'
 21:   colorObject.push(myColor);
 22: 
 23:   for (i = 0; i < colorArray.length; i++) {
 24:     var colorToAdd = new Object;
 25:     colorToAdd.id = colorArray[i];
 26:     colorToAdd.html = colorArray[i] + '-HTML';
 27:     colorToAdd.tag = 'a';
 28:     colorToAdd.href = 'http://www.mycolor.com/' + colorArray[i];
 29:     colorObject.push(colorToAdd);
 30:   }
 31: 
 32:   var colorsDivId = Ext.DomHelper.append(document.body, [{
 33:             id : 'colors'
 34:           }]);
 35: 
 36:   Ext.DomHelper.append(colorsDivId, colorObject);
 37: });

So, here is what is going on above.

Line 1 is the basic code that you use that tells the JavaScript to start executing after the browser DOM is completely constructed.  if you don’t do this, you will get errors when you try and access things like Document.body.

Line 3 does something important, but I don’t quite understand what. If you don’t do this, you’ll find your ExtJS boxes and other graphics look funny.  Hopefully, someone will put a comment on this blog post and then I’ll update this comment.

Line 7 is where the fun begins.  My plan is to add a bunch of color hyperlinks to the page using different methods.  Here, I’m simply initializing a JavaScript array of colors.

Line 9-15 initalizes a JavaScript array with one object that has multiple properties.  These will be all associated with one anchor tag.

Line 16-21 creates a simple JavaScript object and assigns the properties of the html anchor tag.

Lines 24-30 iterates through the colors array and builds and array of objects and adds them to the colorObject array.

Line 32 adds a div tag to the body of the page dynamically (id=’colors’)

line 36 adds the colection of hyperlinks to the just created tag (id=’colors’)

And, that’s it.  This created the html shown at the top.

Here’s the code:

ExtTutorial1.zip

Good luck!  I’ll try and keep publishing as I learn.  ExtJS is awesome!  The doc’s are just a little lacking IMHO.