Air DateField (AIR runtime security violation for JavaScript code in sandbox)

**courtneyt** · 14 Sep 2009 8:46 PM

I am developing an Air application using ExtJS and have a datefield on a form. The form displays fine but when I click on the calendar dropdown I get the following error:

Error: Adobe AIR runtime security violation for JavaScript code in the application security sandbox (Function constructor)

I've read other posts that say to put the templates outside of the onReady() function but don't know how to do this. Here is a simple example of a form with a datefield. Can you send me an example of what I need to do to fix it. Like I've said, I don't understand the posts that are already in the forum.

Here is the code:

Code:

<html>
<head>
<title>Test</title>
    <link rel="stylesheet" type="text/css" href="./ext-3.0.0/resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="./ext-3.0.0/air/resources/ext-air.css" />
    <script type="text/javascript" src="./ext-3.0.0/air/AIRIntrospector.js"></script>
    <script type="text/javascript" src="./ext-3.0.0/air/AIRAliases.js"></script>
  <script type="text/javascript" src="./ext-3.0.0/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="./ext-3.0.0/ext-all-debug.js"></script>
    <script type="text/javascript" src="./ext-3.0.0/air/ext-air-debug.js"></script>
    <script>
Ext.BLANK_IMAGE_URL = './ext-3.0.0/resources/images/default/s.gif';
Ext.ns('Application');
Ext.onReady(function() {
    var form01 = new Ext.FormPanel({
  border: true,
  height: 500,
  width: 500,
  items: [new Ext.form.DateField({
      fieldLabel: 'Date',
      name: 'lastsyncdate',
      id: 'lastsyncdate',
      value: Ext.util.Format.date("Wed Jan 1 00:00:00 GMT-0600 1997",'m/d/Y') 
      })
    ],
        renderTo:'here'
    });

});
</script>
</head>
<body>
    <div id="here">
    </div>
</body>
</html>

**courtneyt** · 15 Sep 2009 2:08 PM

I tested the example using Ext 2.3.0 and it works fine. When I use Ext 3.0.0 or Ext 3.0.2 it does not work.

**wmazza** · 15 Sep 2009 4:36 PM

I don't recall ext-3.0.0 being bundled with and ext-air.js file...then again, I don't have my premium member account yet and I don't know if maybe it's bundled with the new 3.0.1 build?

Anywho, basically AIR doesn't really allow most eval functions to run after the page header's have been loaded. This means many XTemplates, eval, string.format calls have to be "pre-rendered" (which is usually addressed by the ext-air file)

So in summary, I would first check your ext-air file.

If that doesn't work, I heard that you can also use the ext-2.3.0 ext-air.js file but I have not verified this since I put my AIR project on hold for the time being.

EDIT: after some looking into this (because I remember having this issue with 2.3.0 and I just had to look for it :P), I found this thread:http://www.extjs.com/forum/showthread.php?t=79029

Basically, just place this before your Ext.onReady

Code:


Date.createFormat('m/d/y');

Let me/us know how this works!

**courtneyt** · 15 Sep 2009 7:07 PM

I changed the Ext libraries for ExtJS from ext-3.0.0 to ExtJS ext-2.3.0 and left the Air libraries at Ext-air-0.30. Using ext-3.0.0 and Ext-air-0.30 I get the error but using ext-2.3.0 and Ext-air-0.30 everything works.

**courtneyt** · 18 Sep 2009 1:16 PM

There stack trace of the error shows line 50170 right before the error on line 12226. It clearly shows that a template is involved. The datefield must use some type of menu layout to drop down the date picker. Has anyone come up with a solution to this problem. Is there a way to put the template for this before the onready function like we do with combo boxes?

Code:

    renderItem : function(c, position, target){
        if (!this.itemTpl) {
            this.itemTpl = Ext.layout.MenuLayout.prototype.itemTpl = new Ext.XTemplate(
                '<li id="{itemId}" class="{itemCls}">',
                    '<tpl if="needsIcon">',
                        '<img src="{icon}" class="{iconCls}"/>',
                    '</tpl>',
                '</li>'
            );
        }

**courtneyt** · 18 Sep 2009 2:35 PM

The datefield and menu items use XTemplates, so these too must be pre-compiled.

Place the following code before the onReady to fix the problem.

Code:

Ext.layout.MenuLayout.itemTpl=Ext.layout.MenuLayout.prototype.itemTpl=new Ext.XTemplate
(
    '<li id="{itemId}" class="{itemCls}">',
        '<tpl if="needsIcon">',
            '<img src="{icon}" class="{iconCls}">',
        '</tpl>',
    '</li>'
);

**piroman** · 29 Sep 2009 12:50 AM

if u want to use xtemplates in adobe air u just create a js file that includes all templates that u want

for example

Code:

MyApp.Templates = {
    timeField: new Ext.XTemplate('<tpl for="."><div class="x-combo-list-item">{text}</div></tpl>')
}

this file needs to be included in ur main html and u can safe use it into ur application that starts in domready event

**mitchellsimoens** · 30 Dec 2009 6:19 PM

In the new air-3.1.0, the datefield displays correctly but the timefield does not.

Air DateField (AIR runtime security violation for JavaScript code in sandbox)

Thread Tools

Search Thread

Display

Air DateField (AIR runtime security violation for JavaScript code in sandbox)

Air DateField (AIR runtime security violation for JavaScript code in sandbox)