Ext JS Tip Of The Day: XTemplate Exceptions

If you ever worked with the Ext JS grid panel and put custom renderers on your columns, you may have fought this issue before. Deep in the XTemplate class (which powers most visual components in Ext JS), there is an evil try/catch statement that silently catches all exceptions in the template apply phase. If you use ext-all-debug.js you do get a console.log statement, which is slightly better. But when using a non-debug version of Ext JS you get a silently broken grid. This is very bad as it completely hides errors from us developers, and tests won’t easily detect this.

“Fixing” the grid rendering#

To be notified when a crash happens inside a custom renderer method, you can override the ‘strict’ property globally which skips the try/catch when templates are applying their data. Now you can catch grid rendering errors regardless of which version of Ext JS you use.

Ext.define("CZ.override.XTemplate", {
    override : "Ext.XTemplate",
    strict   : true
});

Overriding the console.log method#

Another way to detect this issue is to override console.log in your test suite. We already do this internally for all our tests and it works great. Please note, Ext JS only uses console log in the debug version of the library – so make sure your tests use the debug version for this to work.

Harness.on('teststart', function (ev, test) {
    var console = test.global.console;

    if (console) {
        console.error = console.warn = function () {
            test.fail([].join.apply(arguments));
        };
    }
});

Hope one of the tricks above help you with your grids, happy hacking/testing!