Ext Js Javascript execution

Question

I have a typical Ext Js style window with a left navigation, header and central region to display stuff.

The left navigation has a bunch of menu items that when clicked on load something via the Panel.Load() method from a specified url into the central panel.

My problem is that in IE if i click many menu items too fast i get various javascript errors, I believe dom elements are trying to be accessed that no longer exists as the updater is in the process updating the html.

Has anyone come across this or is there anyway to stop javascript executing once a new load request has started.

I have tried using this:

    if(Ext.isIE) {
        window.document.execCommand('Stop');
    }
    else {
        window.stop();
    }

Thanks in advance!

Answer 1

Simple solution comes to mind: you could create a global variable to indicate that loading is in progress, and check it immediately after menu item is clicked. And only continue execution if loading is not already in progress.

Answer 2

A common solution to handling overly-fast clicking is to buffer the click handling code that loads your panels so that it only runs if another click does not occur within a specified time period. Something like:

item.on('click', function(){ ... }, this, {buffer:50});