Engineering Blog

A couple of weeks ago, many of the engineers had a four-day ExtJS 4 training. For me, a big takeaway from the training was the power of ExtJS’ xtype. I thought I’d share a small example of xtype’s awesomeness from a few days ago.

I had been doing some refactoring on a page that contained an Ext.grid.Panel.  After the refactoring, everything looked fine when I went to the page directly, but when I clicked on a link on the page and then hit the back button to go back to the page, I’d get this strange JS error:

Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMHTMLDivElement.insertBefore]
target.insertBefore(item.el.dom, position || null);

The refactoring I’d done involved moving the columns config for the grid from being created inline:

drawGrid: function(){
  this.grid = Ext4.create('Ext4.grid.Panel', {
    columns: [
      Ext4.create('Rally.components.ui.grid.RowActionColumn'),
      'FormattedID',
      'Name',
      'Owner'
    ]
  });
}

…into the config object for the page that contained the grid:

config: {
  gridColumns: [
    Ext4.create('Rally.components.ui.grid.RowActionColumn'),
    'FormattedID',
    'Name',
    'Owner'
  ]
},

drawGrid: function(){
  this.grid = Ext4.create('Ext4.grid.Panel', {
    columns: this.gridColumns
  });
}

This caused the RowActionColumn to be created earlier since it was now being specified in the config, which caused the weird JS error.

The fix was to use xtype:

config: {
  gridColumns: [
    {
      xtype: 'Rally.components.ui.grid.RowActionColumn'
    },
    'FormattedID',
    'Name',
    'Owner'
  ]
},

drawGrid: function(){
  this.grid = Ext4.create('Ext4.grid.Panel', {
    columns: this.gridColumns
  });
}

What I learned:
Use xtypes whenever possible so that components can be lazily created