My last post was about using Ext.extend to render my web pages. Now I’ll show how I use pre-configured classes to render my Genealogist application. This is the default.brail file I’m using for my default layout page. 

   1: <html>
   2: <head>
   3:     <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
   4:     <link rel=”stylesheet” type=”text/css” href=”../../Content/extJS/resources/css/ext-all.css” />
   5:     <link rel=”stylesheet” type=”text/css” href=”../../Content/extJS/resources/css/genealogist.css” />
   6:     <script type=”text/javascript” src=”../../Content/extJS/adapter/ext/ext-base.js”></script>

   1:  


   2:     <script type=“text/javascript” src=“../../Content/extJS/ext-all-debug.js”>


   1: </script>


   2:     <script type=“text/javascript” src=“../../Content/js/layout/GenealogistFunctions.js”>


   1: </script>


   2:     <script type=“text/javascript” src=“../../Content/js/layout/GenealogistTab.js”>


   1: </script>


   2:     <script type=“text/javascript” src=“../../Content/js/default.js”>


</script>
   7:     
   8:     <title>CrawBuck Genealogist</title>
   9: </head>
  10: <body>
  11:     <div id=”west”></div>
  12:     <div id=”north”>Genealogist</div>
  13:     <div id=”center2″></div>
  14:     <div id=”center1″></div>
  15:     <div id=”south”>Copyright 2008 CrawBuck</div>
  16: </body>
  17: </html>

I start by setting up the necessary ExtJS files: ext-all.css, genealogist.css, ext-base.js and ext-all-debug.js. These are the normal files that are required by ExtJS. The next file, GenealogistFunctions.js is the first pre-configured class. In this file I’m using an Ext.Panel to create my pre-configured class. This panel is going to be an accordion panel that is located in the ‘west’ region of the Ext.Viewport. The code looks like this:

   1: Ext.ns(‘Ext.ux.Genealogist’);
   2:  
   3: Ext.ux.Genealogist.GenealogistFunctions = Ext.extend(Ext.Panel, {
   4:     region:‘west’,
   5:     id:‘west-panel’,
   6:     title:‘Genealogist Functions’,
   7:     split:true,
   8:     width: 200,
   9:     minSize: 175,
  10:     maxSize: 400,
  11:     collapsible: true,
  12:     margins:‘0 0 0 5′,
  13:     layout:‘accordion’,
  14:     layoutConfig:{animate:true},
  15:     
  16:     initComponent: function(){
  17:         Ext.apply(this, { 
  18:             items:[{
  19:                 title:‘Person’,
  20:                 html:‘<p>Manages person in here.</p>’,
  21:                 border:false,
  22:                 iconCls:‘nav’
  23:             },{
  24:                 title:‘Life Events’,
  25:                 html:‘<p>Manages life events in here.</p>’,
  26:                 border:false,
  27:                 iconCls:’settings’
  28:             },{
  29:                 title:‘Family’,
  30:                 html:‘<p>Manages family in here.</p>’,
  31:                 border:false,
  32:                 iconCls:’settings’
  33:             },{
  34:                 title:‘Search’,
  35:                 html:‘<p>Searching in here.</p>’,
  36:                 border:false,
  37:                 iconCls:’settings’
  38:             },{
  39:                 title:‘Reports’,
  40:                 html:‘<p>Reporting in here.</p>’,
  41:                 border:false,
  42:                 iconCls:’settings’
  43:             },{
  44:                 title:‘Lists’,
  45:                 html:‘<p>Listing in here.</p>’,
  46:                 border:false,
  47:                 iconCls:’settings’
  48:             }]
  49:         });
  50:         
  51:         Ext.ux.Genealogist.GenealogistFunctions.superclass.initComponent.apply(this, arguments);
  52:     },
  53:     
  54:     onRender:function() {
  55:         Ext.ux.Genealogist.GenealogistFunctions.superclass.onRender.apply(this, arguments);
  56:     }
  57:     
  58: }); // eo GenealogistFunctions
  59:  
  60: Ext.reg(‘genealogistFunctions’, Ext.ux.Genealogist.GenealogistFunctions);

The next file in the web page is GenealogistTab.js. This is an Ext.TabPanel that is located in the ‘center’ region of the Ext.Viewport. The code looks like this:

   1: Ext.ns(‘Ext.ux.Genealogist’);
   2:  
   3: Ext.ux.Genealogist.GenealogistTab = Ext.extend(Ext.TabPanel,{
   4:     region:‘center’,
   5:     deferredRender:false,
   6:     activeTab:0,
   7:     
   8:     initComponent: function(){
   9:         Ext.apply(this, {
  10:             items:[{
  11:                 contentEl:‘center1′,
  12:                 title: ‘Add Person’,
  13:                 closable:true,
  14:                 autoScroll:true
  15:             },{
  16:                 contentEl:‘center2′,
  17:                 title: ‘Edit Person’,
  18:                 autoScroll:true
  19:             }]
  20:         });
  21:         
  22:         Ext.ux.Genealogist.GenealogistTab.superclass.initComponent.apply(this, arguments);
  23:     },
  24:     
  25:     onRender: function() {
  26:         Ext.ux.Genealogist.GenealogistTab.superclass.onRender.apply(this, arguments);
  27:     }
  28:     
  29: }); // eo Ext.Genealogist.genealogistTab
  30:  
  31: Ext.reg(‘genealogistTab’, Ext.ux.Genealogist.GenealogistTab);

The HomeController class for Monorail is brain dead at this time. All it does is pair the default layout with the Genealogist view. The code looks like this:

   1: using Castle.MonoRail.Framework;
   2:  
   3: namespace Genealogist.Controllers {
   4:     public class HomeController : SmartDispatcherController {
   5:         public void Index() {}
   6:  
   7:         [Layout(“default”)]
   8:         public void Genealogist() {}
   9:     }
  10: }

The one file that ties them all together is the default.js file that contains the Ext.onReady function. Also notice that the default.js file comes after the GenealogistFunctions.js and GenealogistTab.js. The ordering is important because the default.js file uses the two pre-configured classes, genealogistFunctions and genealogistTab. The code looks like this:

   1: Ext.BLANK_IMAGE_URL = ‘../../Content/images/s.gif’;
   2: Ext.namespace(‘Ext.ux.Genealogist’)
   3:  
   4: Ext.onReady(function() {
   5:     var viewPort = new Ext.Viewport({
   6:         layout:‘border’,
   7:         items:[
   8:             new Ext.BoxComponent({ // raw
   9:                 region:‘north’,
  10:                 el: ‘north’,
  11:                 height:100,
  12:                 style:‘background-image:url(../Content/images/BannerBackground.png);background-repeat:repeat-x;border:solid 1px #1D6241;text-align:right;vertical-align:middle;padding-right:10px;font-family:Georgia;font-size:75px;color:#ED7014;’
  13:             }),
  14:             new Ext.BoxComponent({ 
  15:                 region:’south’,
  16:                 el: ’south’,
  17:                 height:25,
  18:                 style:‘background-image:url(../Content/images/FooterBackground.png);background-repeat:repeat-x;border:solid 1px #1D6241;text-align:center;font-family:Verdana;font-weight:bold;color:#ED7014;padding-top:5px;’
  19:             }),{xtype:‘genealogistFunctions’},
  20:                {xtype:‘genealogistTab’} // end of TabPanel
  21:         ] // end of items
  22:     }); // end of Viewport
  23: }); // eo function onReady

What I like about this is that the default.js file is small and easy to understand. Leveraging the two pre-configured classes in the Ext.Viewport are a matter of using xtype and placing the two in {xtype:’genealogistFunctions’} and {xtype:’genealogistTab’}. Now that is a lot easier to read then having all the ExtJS code in one monolithic file.