IE: "Stop running this script?" when loading large store?

**cgi-bin** · 17 May 2012, 10:57 AM

Internet explorer is throwing a pop-up warning:

Stop running this script?
A script on this page is causing your web browser to run slowly.
If it continues to run, your computer might become unresponsive.
[Yes] [No]

I am trying to load a JsonStore with about 6000 records. The store is configured with 20 fields (but the JSON data contains 40 fields).

Clicking the No button allows the load to complete just fine.

Some research shows that IE will throw this warning if a script executes more than 5,000,000 statements. Yes, there is a registry entry to increase this vale, but we don't want our users to have to do this.
HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Styles -> MaxScriptStatements (REG_DWORD)

Sorting/filtering locally will also usually cause the same message to appear.

I was able to tweak my store a bit to alleviate the problem temporarily by not using custom sortTypes, but I know it will come back as we add more records.

We want to do local sorting/filtering and was using the PagingJsonStore to do pagination (but it is not caused by that, I have created a stripped down test case that only uses the base JsonStore).

With everything stripped out, it's still executing at least 2,000,000 statements (I used the registry entry to lower the threshold to 1,000,000 for testing).

Is there any to optimize this further? I don't know if its a bug in the JsonStore/Reader code (I doubt it). We would prefer to not change the data model on the back end that returns fields not used by the store. We'd also prefer to keep the sorting/filtering local in the browser. However, I'm starting to think that we're going to have to do sorting/filtering server-side. Because, even if we only return the 20 fields the store uses, we're only looking at about a 4x increase in records before the problem comes back.

Test Case:

Code:

<html>
<head>
<title>IE Store Test</title>
<!-- Style Sheets -->
<link rel="stylesheet" type="text/css" href="/css/base.css" />

<!-- JavaScript Libraries -->
<script type="text/javascript" src="/js/ExtJS/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/js/ExtJS/ext-all.js"></script>

<!-- Main Code -->
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '/img/ExtJS/default/s.gif';

var storeExceptionHandler = function(prox, type, act, opts, resp, args)
{
	var loc = '';
	if (prox.url)
	{
		loc = ' : ' + prox.url;
	}
	else if (prox.api && prox.api[act] && prox.api[act].url)
	{
		loc = ' : ' + prox.api[act].url;
	}
	var title = 'Failed ('+ act + loc +')';

	if (type == 'response')
	{
		if (resp.message)
		{
			Ext.Msg.alert(title, resp.message);
		}
		else if (resp.responseText)
		{
			Ext.Msg.alert(title, resp.responseText);
		}
		else
		{
			Ext.Msg.alert(title, 'An invalid response was received from the server');
		}
	}
	else if ( (type == 'remote') && resp.message )
	{
		Ext.Msg.alert(title, resp.message);
	}
	else
	{
		Ext.Msg.alert(title, 'Unknown Error');
	}
};

var myStore = new Ext.data.JsonStore
({
    autoDestroy:true
    ,autoLoad:false
    ,url:'/test/_testData.json'
    ,root:'data'
    ,successProperty:'success'
    ,messageProperty:'message'
    ,totalProperty:'total'
    ,idProperty:'field_01'
    ,sortInfo:
    {
        field:'field_34'
        ,direction:'ASC'
    }
    ,fields:
    [
        {
            name:'field_01'
            ,type:'int'
        }
        ,{
            name:'field_32'
            ,type:'string'
        }
        ,{
            name:'field_33'
            ,type:'string'
        }
        ,{
            name:'field_34'
            ,type:'string'
        }
        ,{
            name:'field_05'
            ,type:'string'
        }
        ,{
            name:'field_07'
            ,type:'string'
        }
        ,{
            name:'field_09'
            ,type:'string'
        }
        ,{
            name:'field_08'
            ,type:'string'
        }
        ,{
            name:'field_35'
            ,type:'string'
        }
        ,{
            name:'field_36'
            ,type:'string'
        }
        ,{
            name:'field_38'
            ,type:'string'
        }
        ,{
            name:'field_39'
            ,type:'string'
        }
        ,{
            name:'field_19'
            ,type:'string'
        }
        ,{
            name:'field_21'
            ,type:'string'
        }
        ,{
            name:'field_23'
            ,type:'date'
            ,dateFormat:'Y-m-d'
        }
        ,{
            name:'field_25'
            ,type:'date'
            ,dateFormat:'Y-m-d'
        }
        ,{
            name:'field_26'
            ,type:'string'
        }
        ,{
            name:'field_27'
            ,type:'string'
        }
        ,{
            name:'field_30'
            ,type:'date'
            ,dateFormat:'Y-m-d'
        }
        ,{
            name:'field_40'
            ,type:'string'
        }
    ]
    ,listeners:
    {
        exception:storeExceptionHandler
        ,load:function()
        {
           alert('loaded');
        }
    }
});

Ext.onReady
(
    function()
    {
        myStore.load();
    }
);
</script>
</head>
<body>
Should see an alert when store is loaded.
</body>
</html>

test data attached.