Javascript error while using teamplate in ExtJS combobox (IE only)

Question

I am using ExtJs 4.1.1 & my application is having a combobox. I have added TPL to the combobox. Everything works fine expect when the data have special characters like single quote (apostrophe). If I remove TPL application does not throw any JS error. The error occurs only in IE. I am using IE 10.

How can I ensure there is no java script error even when data is having special character.

Here is a fiddle

Answer 1

In your template you're using the record data in the javascript code in the onclick attribute:

onClick="Ext.PA.getController(\'MyController\').ShowSharedQueryWindow(\'{Name}\');"

When the record contains a single quote the template will produce a syntax error in that javascript code:

Ext.PA.getController('MyController').ShowSharedQueryWindow('query's');

You'll need to escape the record's attribute to prevent that:

onClick="Ext.PA.getController(\'MyController\').ShowSharedQueryWindow(\'{Name:htmlEncode:htmlEncode}\');"

The :htmlEncode is a shorthand which can be used in XTemplates to invoke functions of Ext.util.Format.

Edit: You will need to double encode it, once for the template and once again for the generated JavaScript code (see updated code above).

---

Fwiw, using an onclick listener in HTML generated by a XTemplate does not seem like the best approach to me. Generally I'd like to avoid adding listener via HTML when I'm working with ExtJS.

You could use an itemclick listener on the combobox's bound list instead which calls the corresponding function if the link was clicked:

combo.getPicker().on({
    'itemclick': function(view, record, node, index, e) {
        if (e.getTarget().tagName == 'a') {
            Ext.PA.getController('MyController').ShowSharedQueryWindow(record.get('Name'));
        }
    }
});

That way, you'll also avoid the escaping problem.