Adding columns dynamically to a GridPanel (Ext JS 4.x)

This was a little confusing to figure out because doing this is very different in the various versions of Ext JS. In this example there is a GridPanel with columns A,B,C,D and at some point within the application I want to be able to add column E.

As a guideline I  have read that you are not supposed to use headerCt objects, but I was unable to find a solution that didn’t use it that worked in 4.x.

Ext.define('MyApp.foo.MyGrid', {
     extend: 'Ext.grid.GridPanel',
 columns: [
           { header: 'A', dataIndex: 'alpha' },
           { header: 'B', dataIndex: 'bravo' },
           { header: 'C', dataIndex: 'charlie' },
           { header: 'D', dataIndex: 'delta' },
 ], 
 addStuff: function() {
   var eColumn = Ext.create('Ext.grid.column.Column', {
   header: 'E',
   dataIndex: 'echo',
   });
   this.headerCt.insert(this.columns.length, eColumn);
   this.getView().refresh();
 },
});