Search code examples
javascriptextjsgoogle-apps-scriptgoogle-caja

Google Apps Script with ExtJS 4.1


Q: Is it possible to add ExtJS 4 in Caja templates in any way?

For example, when writing load instructions to the HTML header:

 <link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/ext-4.1.1a-commercial/resources/css/ext-all.css"/>
 <script type="text/javascript">
   document.write("\x3Cscript type='text/javascript' src='http://cdn.sencha.io/ext-4.1.1a-commercial/ext-all.js'>\x3C/script>");
 </script>

Results in something like this:

Invalid script or HTML content: http://cdn.sencha.io/ext-4.1.1a-commercial/resources/css/ext-all.css:18+6635 - 6636: Expected <Identifier> not : http://cdn.sencha.io/ext-4.1.1a-commercial/resources/css/ext-all.css:18+6621 - 6652: Skipping malformed content http://cdn.sencha.io/ext-4.1.1a-commercial/resources/css/ext-all.css:18+6621 - 6672: Skipping malformed content http://cdn.sencha.io/ext-4.1.1a-commercial/resources/css/ext-all.css:18+82707 - 82708: Expected <Identifier> not : http://cdn.sencha.io/ext-4.1.1a-commercial/resources/css/ext-all.css:18+82677 - 82724: Skipping malformed content http://cdn.sencha.io/ext-4.1.1a-commercial/resources/css/ext-all.css:18+82677 - 82744: Skipping malformed content http://cdn.sencha.io/ext-4.1.1a-commercial/resources/css/ext-all.css:18+111019 - 111020: Expected <Identifier> not : http://cdn.sencha.io/ext-4.1.1a-commercial/resources/css/ext-all.css:18+111002 - 111036: Skipping malformed content http://cdn.sencha.io/ext-4.1.1a-commercial/resources/css/ext-all.css:18+111051 - 111052: Expected <Identifier> not : http://cdn.sencha.io/ext-4.1.1a-commercial/resources/css/ext-all.css:18+111037 - 111068: Skipping malformed content http://cdn.sencha.io/ext-4.1.1a-commercial/resources/css/ext-all.css:18+111002 - 111088: Skipping malformed content http://cdn.sencha.io/ext-4.1.1a-commercial/resources/css/ext-all.css:18+200996 - 200997: Expected <Identifier> not : http://cdn.sencha.io/ext-4.1.1a-commercial/resources/css/ext-all.css:18+200982 - 201013: Skipping malformed content http://cdn.sencha.io/ext-4.1.1a-commercial/resources/css/ext-all.css:18+200982 - 201033: Skipping malformed content http://cdn.sencha.io/ext-4.1.1a-commercial/resources/css/ext-all.css:18+217948 - 217949: Expected <Identifier> not : http://cdn.sencha.io/ext-4.1.1a-commercial/resources/css/ext-all.css:18+217931 - 217965: Skipping malformed content http://cdn.sencha.io/ext-4.1.1a-commercial/resources/css/ext-all.css:18+217931 - 217985: Skipping malformed content http://cdn.sencha.io/ext-4.1.1a-commercial/resources/css/ext-all.css:18+219058 - 219075: Not a valid uri: 'url(#default#VML)' http://cdn.sencha.io/ext-4.1.1a-commercial/resources/css/ext-all.css:18+219049 - 219075: Skipping malformed content HtmlOutput:11+132 - 12+1: Unclosed string.

Just noticed the Caja validation-errors are related to the CSS, but while the Ext object can't be constructed - this makes no difference. As it seems only jQuery and jQueryUI available as precajoles: Google Code. If jqGrid would at least work, this might be an alternative (but since I intend to use ExtJS, I'd rather just switch the environment to something a little more compatible).

That Maestro HTML-app just says: 'Failed to load ext-all.js'. Haven't tried to include the lib "locally" on the Drive - but I'd guess like this the same castration of JS might be applied.

Security for embedding 3rd party scripts is no bad idea in general -

But if security features cannot be overridden - it's hindering innovation.

Probably should just assume it's not supported and move on; just have nothing left for such proprietary solutions - they might build their very own internet, but without me.


Solution

  • I work on Caja. I haven't looked at ExtJS in particular, but the usual cause of trouble for a new JS framework is that there's some little feature or corner case that Caja doesn't accurately implement. The web platform is massive, and we must prioritize functionality which people expect to use, as saying “implement everything before you continue” is impractical.

    I recommend that you file an enhancement request to support ExtJS. It would be especially helpful would be if you were to examine ExtJS's CSS and determine what part of it Caja is rejecting (e.g. by comparing the error to line numbers in an unminified version, or if necessary, deleting parts until it is not rejected) so that we can focus on adding the necessary features.


    Note that you should not expect document.writeing a <script> element to work; dynamically defined scripts are in general not available in the current deployment of Caja in Google Apps Script. Use a literal <script> element in the HTML instead. This is likely why you see only errors related to the CSS and neither success nor an error on ExtJS itself. (I've just recorded that we ought to give an error message in this case.)