I’ve been busy on a SP1 release for the my day job and haven’t spent much time on figuring out ExtJS. I’ve blogged before about how I am having difficulty coming up to speed on this product. I have been trying for weeks to use the pre-configured concept of ExtJS without success. ExtJS’s examples show very simple usages and I’m trying to make use more complex usages. So it has been a lot of trial and run. I’ve finally got the accordion panel to work outside of my Genealogist layout and I’m going to try and incorporate it. Here is how it looks:

Wizard1

This has the accordion panel on the left and the right panel can be used for multiple purposes. The goal is to have the accordion panel expose the various functions of the Genealogist project and the right panel will provide the implementation of the functions. I’m going to incorporate this into the Genealogist layout:

Wizard2

I’m using the pre-configured classes that are talked about here. The general pattern is:

   1: MyScope = Ext.extend(Ext.form.ComboBox, {
   2:     // configurables
   3:     // anything what is here can be configured from outside
   4:      border:false
   5:  
   6:     // {{{
   7:     ,initComponent:function() {
   8:         // {{{
   9:         Ext.apply(this, {
  10:             // anything here, e.g. items, tools or buttons arrays,
  11:             // cannot be changed from outside
  12:         }); // e/o apply
  13:         // }}}
  14:  
  15:         // call parent
  16:         MyScope.superclass.initComponent.apply(this, arguments);
  17:  
  18:         // after parent code here, e.g. install event handlers
  19:  
  20:     } // e/o function initComponent
  21:     // }}}
  22:     // {{{
  23:     ,onRender:function() {
  24:  
  25:         // before parent code
  26:  
  27:         // call parent
  28:         MyScope.superclass.onRender.apply(this, arguments);
  29:  
  30:         // after parent code, e.g. install event handlers on rendered components
  31:         
  32:     } // e/o function onRender
  33:     // }}}
  34:     
  35:     // any other added/overrided methods
  36:  
  37: }); // e/o extend
  38:  
  39: // register xtype
  40: Ext.reg(‘mycomponentxtype’, MyScope);

I’m using a single file for the AccordionPanel class and the code is:

   1: Ext.ux.AccordionPanel = Ext.extend(Ext.Panel, {
   2:     region:‘west’,       
   3:     margins:‘5 0 5 5′,
   4:     split:true,
   5:     width: 210,
   6:     layout:‘accordion’,
   7:         
   8:     initComponent: function(){
   9:         Ext.apply(this, {
  10:             items:[{
  11:                 title: ‘Accordion Item 1′,
  12:                 html: ‘<empty panel>’,
  13:                 xtype: ‘panel’
  14:             },{
  15:                 title: ‘Accordion Item 2′,
  16:                 html: ‘<empty panel>’,
  17:                 xtype: ‘panel’
  18:             },{
  19:                 title: ‘Accordion Item 3′,
  20:                 html: ‘<empty panel>’,
  21:                 xtype: ‘panel’
  22:             },{
  23:                 title: ‘Accordion Item 4′,
  24:                 html: ‘<empty panel>’,
  25:                 xtype: ‘panel’
  26:             },{
  27:                 title: ‘Accordion Item 5′,
  28:                 html: ‘<empty panel>’,
  29:                 xtype: ‘panel’
  30:             }]
  31:         });
  32:         
  33:         Ext.ux.AccordionPanel.superclass.initComponent.apply(this, arguments);
  34:     },
  35:     
  36:     onRender:function(){
  37:         Ext.ux.AccordionPanel.superclass.onRender.apply(this, arguments);
  38:     }
  39:  
  40: });
  41:  
  42: Ext.reg(‘accordionPanel’, Ext.ux.AccordionPanel);

The .brail page looks like this:

   1: <html>
   2: <head>
   3:     <title>Accordion Layout</title>
   4:     <link rel=”stylesheet” type=”text/css” href=”../../Content/ExtJS/resources/css/ext-all.css”/>
   5:  
   6:     <!– GC –>
   7:     <!– LIBS –>
   8:     <script type=”text/javascript” src=”../../Content/ExtJS/adapter/ext/ext-base.js”></script>

   1:  


   2:     <!– ENDLIBS –>


   3:  


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


   1: </script>


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


   1: </script>


   2:  


   3:     <style type=“text/css”>


   4:         html, body {


   5:             font: normal 12px verdana;


   6:             margin: 0;


   7:             padding: 0;


   8:             border: 0 none;


   9:             overflow: hidden;


  10:             height: 100%;


  11:         }


  12:         .empty .x-panel-body {


  13:             padding-top:20px;


  14:             text-align:center;


  15:             font-style:italic;


  16:             color: gray;


  17:             font-size:11px;


  18:         }


  19:     </style>


  20:     <script type=“text/javascript”>


  21:         Ext.onReady(function() {


  22:                         


  23:             var viewport = new Ext.Viewport({


  24:                 layout:‘border’,


  25:                 renderTo:Ext.getBody(),


  26:                 items:[{


  27:                     xtype:‘accordionPanel’


  28:                 },{


  29:                     region:‘center’,


  30:                     margins:‘5 5 5 0′,


  31:                     cls:‘empty’,


  32:                     bodyStyle:‘background:#f1f1f1′,


  33:                     html:‘<br/><br/>&lt;empty center panel&gt;’


  34:                 }]


  35:             });


  36:             


  37:         });


  38:     


</script>
   9: </head>
  10: <body>
  11:  
  12: </body>
  13: </html>

I can’t believe it has taken me this long to do this. I still don’t understand ExtJS very well but I’m slowly picking up pieces. My hope is that starting this week I will be able to spend my day job increasing my understanding of ExtJS.