strange behavior of tap event applied to html table headers

[Cesium]

Hi Sencha forums,

I have an HTML table in one of my views that I wanted to make sortable, so I assigned tap event handlers to the table's headers like so:

var heads = document.getElementsByTagName('th')
for(header_index in heads) {
    var header =  heads[header_index];
    if(!Ext.get(header).hasListener('tap')){
        Ext.get(header).on(
            'tap',
            sort_table
        );
    }
}

where sort_table is the function:

function sort_table() {
    alert(this.dom.innerHTML); // for debugging
    var header = this;
    var table = document.getElementById('sorttable');
    var rows = Array.prototype.slice.call(table.rows);
    var rows_sorted;


    if (/\u2193/.test(header.dom.innerHTML)) {
        rows_sorted = rows.slice(1).sort(function(a,b) {
            var atext = a.cells[header.dom.cellIndex].outerText.toLowerCase();
            var btext = b.cells[header.dom.cellIndex].outerText.toLowerCase();
            if      (atext<btext) {return -1;}
            else if (atext>btext) {return 1;}
        });
        header.dom.innerHTML = header.dom.innerHTML.slice(0,-1)+'\u2191'
    }
    
    else { 
        rows_sorted = rows.slice(1).sort(function(a,b) {
            var atext = a.cells[header.dom.cellIndex].outerText.toLowerCase();
            var btext = b.cells[header.dom.cellIndex].outerText.toLowerCase();
            if      (atext<btext) {return 1;}
            else if (atext>btext) {return -1;}
        });
             
        for(head_index in table.rows[0].cells) {
            if (/^[\d]+$/.test(head_index)) {
                var head = table.rows[0].cells[head_index];
                if (/\u2193/.test(head.innerHTML) || /\u2191/.test(head.innerHTML)) {
                    head.innerHTML = head.innerHTML.slice(0,-1);
                }
            }
        }
        header.dom.innerHTML += '\u2193';
    }




    for (rowindex in rows_sorted) {
        table.rows[1].parentNode.insertBefore(rows_sorted[rowindex].parentNode.removeChild(rows_sorted[rowindex]), table.rows[1]);
    }
}

On a desktop browser this works spiffingly well, but on an ipad I'm getting strange behavior. Let me describe:

the first two times I tap a header, it sorts the table accordingly.
The third time, the tap event is fired for the second header I tapped, and then fired for the third header I tapped.
The fourth time the tap event is fired for the proper header.
the fifth time it fires for the fourth header I tapped, then it fires for the fifth header.
the sixth time the tap event is fired for the proper header
the seventh time it fires for the sixth header I tapped, and then for the seventh header.
[etc]

[EDIT] - I found out that the extra tap event doesn't just happen when you tap another header, it happens the next time you tap anywhere on the screen.

I don't know what to make of this. Your wisdom is appreciated.

Thanks,
Cesium

[scottmartin]

Are you using ExtJS or Touch? I suspect you are using ExtJS. If this is the case, please note that although applications may work on mobile devices, they are not supported.

Regards,
Scott.

[Cesium]

Aww, crap, I meant to post this in the Touch forums, sorry : /
Should I delete this and repost or can I get a transfer?

[scottmartin]

Moved

Scott.