Sorting in V2 Beta 4 - not working for custom control

I've got a custom control made up of a grid with an input box underneath. After installed V2 Beta 4, when the header on the grid is clicked, the processing seems to go into some kind of infinite loop.

Any suggestions?
Thanks in advance

simplegrid.js:

MyControl = AW.System.Control.subclass();

MyControl.create = function(){
    var headers = [
        "ID", 
        "Surname, which is a really, really, really much longer header", 
        "Forename", 
        "Balance",
        "Anniversary",
        "Type"
    ];
    
    var myData = [
        [2292, "Baxter",		"Craig",	123.45,			"20/10/2006",	"A"],
   	    [234,  "Fergus",		"Shevaun",	678.90,			"13/02/2004",	"B"],
        [6823, "Harris",		"Simon",	1111.11,		"04/12/2002",	"A"],
        [9692, "Stewart",		"Caroline",	234.69,			"10/05/2004",	"C"],
        [2963, "Calow",			"Rosamund",	2344.520,		"18/01/2006",	"C"],
        [7834, "Spratt",		"Benjamin",	234.69,			"20/01/2006",	"F"],
        [9739, "Martindale",	"Alistair",	346262634.16,	"15/07/2003",	"A"],
        [783,  "Tattershall",	"Richard",	334.32,			"30/01/2004",	"D"],
        [1245, "Porter",		"Luke",		5872.3,			"05/07/2005",	"B"],
        [7923, "Inness",		"Ione",		782.689,		"01/01/2000",	"A"]
    ];
    
    var obj = this.prototype;
    obj.setTag("DIV"); 

    var grid = new AW.UI.Grid;
    var footer = new AW.UI.Input;
    obj.defineTemplate("grid", grid); 
    obj.defineTemplate("footer", footer); 
    
//    obj.setClass("cells", "selected");
    grid.setColumnCount(headers.length);
    grid.setRowCount(myData.length);
    grid.getHeadersTemplate().setClass("text", "wrap"); 
    grid.setHeaderText(headers);
    grid.setHeaderTooltip(headers);
    grid.setHeaderHeight(44);
    
    // Shows and sets rows numbers
    grid.setSelectorVisible(true);
    grid.setSelectorText(function(i){return i});

    var indices = [];	
    for (var i=0; i<myData.length; i++) {
 		indices[i] = i;
 	}
 	
 	grid.setRowIndices(indices);

    grid.setCellText(myData);
    grid.setCellEditable(true);
    grid.setSize(650, 300);
    
    
    with (obj.getTemplate("grid")) {
        // Allows multiple rows to be selected
        setSelectionMode("single-cell");
    
        // Pre selected rows
        //grid.setSelectedRows([1]);
        
        onSelectorClicked = function(event, index) {
            this.setSelectedRows([]);
            this.setSelectedColumns([]);
            this.setSelectionMode("multi-row");
            this.setSelectionMultiple(true);
            alert("In selectedClicked");
        };
        
        onCellClicked = function(event, column, row){
            this.setSelectedRows([]);
            this.setSelectedColumns([]);
        
            this.setSelectionMode("single-cell");
            this.setCurrentColumn(column);
            this.setCurrentRow(row);
            alert("In cellClicked");
            
            this.setSelectedRows([row]);
            this.setSelectedColumns([column]);
        };
        
        onHeaderClicked = function(event,index){
            this.sort(index, "")
            updateFooter();
        };
    }
    
    var height = grid.getStyle("height");
    var width = grid.getStyle("width");
    var yPosition = parseInt(height.replace(/px/, ""));
    width = parseInt(width.replace(/px/, ""));
   
    footer.setSize(width, 25);
    
    footer.setPosition(0, yPosition);
    footer.getContent('box/text').setAttribute('readonly', true);  
    footer.setControlText("Sort order: %s");
    updateFooter();

    
    function updateFooter() {
        //var footer = obj.getFooterTemplate();
        //var grid = obj.getGridTemplate();
        var updatedFooter = "Sort order: %s";
        alert(updatedFooter);
        
        // Search for %t
        updatedFooter = updatedFooter.replace(/%t/g, grid.getRowCount());
        
        
        
        // Search for %s
        var sortColumn = grid.getSortColumn();
        sortColumn = grid.getHeaderText(sortColumn);
        if (sortColumn == "")
            sortColumn = "N/A";
        updatedFooter = updatedFooter.replace(/%s/g, sortColumn);
        
        footer.setControlText(updatedFooter);
        //footer.refresh();
    }
    
    obj.setContent("html", function() {
        return this.getGridTemplate() + this.getFooterTemplate();
    });
    
    obj.setSize(650, 380);
};

This is called from a htm page with:

var obj = new MyControl();
document.write(obj);