Combobox in Adobe AIR [Archive]

szotyi

16 Feb 2008, 2:24 PM

I'm trying out Adobe AIR, but I'm stuck in the beginning and it looks like an ext issue. I made a simple example to show the problem. It prints out a window with a form in it. When the combobox get focus (tab into, select with mouse), I get an Unsafe JavaScript error. But if I comment out, the starred line everything is fine.

<html lang="hu">
<head>
<title>Model</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="ext-2.0/resources/css/ext-all.css">
<script type="text/javascript" src="AIRAliases.js"></script>
<script type="text/javascript" src="AIRIntrospector.js"></script>
<script type="text/javascript" src="ext-2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-2.0/ext-all-debug.js"></script>
<script type="text/javascript">
var application = air.NativeApplication.nativeApplication;
</script>
<script type="text/javascript" src="ext-air/ext-air-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = "images/default/s.gif";
var data = [
['text','text'],
['parameter','parameter'],
['dblink','dblink'],
['undefined','undefined']
];
var store = new Ext.data.SimpleStore({
fields: ['name','value'],
data : data
});
Ext.form.Field.prototype.msgTarget = 'side';
var w = new Ext.Window({
width: 400,
height: 250,
layout: 'fit',
title: 'Set',
modal: true,
focus: function(){
//w.getEl().child("input[type!=hidden]").focus(); ****************
},
items: [{
xtype: 'form',
frame: true,
labelWidth: 120,
items: [
{
xtype: 'combo',
fieldLabel: 'Data type',
width: 230,
name: 'datatype',
store: store,
mode: 'local',
selectOnFocus: true,
forceSelection: true,
displayField: 'name',
valueField: 'value',
value: "text",
triggerAction: 'all',
tabIndex: 1
}
]
}],
buttons: [
{
text: 'Ok',
tabIndex: 2,
handler: function () {
w.close();
}
},
{
text: 'Cancel',
tabIndex: 3,
handler: function () {
w.close();
}
}
]
});
w.show();
air.Introspector.Console.log(w);
});
</script>
</head>
<body style="height: 100%" id="model"><div style="height: 100%" id="form-div"></div></body></html>

Here is the error trace:

Error: Unsafe JavaScript
at app:/ext-2.0/ext-all-debug.js : 6862
at app:/ext-2.0/ext-all-debug.js : 6862
at app:/ext-2.0/ext-all-debug.js : 17335
at app:/ext-2.0/ext-all-debug.js : 17335
at app:/ext-2.0/ext-all-debug.js : 12164
at app:/ext-2.0/adapter/ext/ext-base.js : 132
at app:/ext-2.0/adapter/ext/ext-base.js : 132
at app:/ext-2.0/ext-all-debug.js : 26727
at app:/ext-2.0/ext-all-debug.js : 26721
at app:/ext-2.0/ext-all-debug.js : 1413
at app:/ext-2.0/ext-all-debug.js : 1504
at app:/ext-2.0/ext-all-debug.js : 1504
at app:/ext-2.0/ext-all-debug.js : 1201
at app:/ext-2.0/ext-all-debug.js : 25508
at app:/ext-2.0/ext-all-debug.js : 26038
at app:/ext-2.0/ext-all-debug.js : 1629
at app:/ext-2.0/adapter/ext/ext-base.js : 785
undefined at undefined : undefined

Tried to look at the source, it could be some eval() thing, but couldn't figure it out. Too bad, that there is no breakpoint in AIR. Somebody any idea?

llin96

17 Feb 2008, 11:33 PM

In AIR application sandbox, it's not allow to use eval function, this is the security model of AIR, so you should make your Ext code run in non-application sandbox. check out the AIR sample application Signet and AIR offical book <<Developing AIR Applications with HTML and Ajax>>

szotyi

18 Feb 2008, 1:47 AM

Thanks for the reply. I know this, but a combobox shouldn't create a security whole (it's a basic element). I think it's ext's design fault. There is probably a way to avoid evals, but it's always easier to use it.

madrabaz

20 Feb 2008, 1:30 AM

Hi,
Any solution about this issue?
I tried so many combination to use combobox but there is no solution.
But I found some things that may be helps others to solve the problem.
(I am using Tasks aplication which is written by Jack Slocum. I just update it to Air Beta3)
1. using 'lazyInit : false' conf option solve the problem on the new category combo,
combos of the grid still do not work despite of the same conf options.
(Error occurs both focus on and click trigger events)
2. using Ext.ux.SelectBox (from ext docs) instead of the combobox also works as a new category and doesn't work as a grid cell editor

(may be everyone does not know Tasks app so I added a screen shot to show the interface)

szotyi

25 Feb 2008, 10:47 AM

I think it has to do with this (ext-2.0.2/air/README.txt):
"XTemplates must be loaded inline while the js file loads (not in an onready block) when used in the application sandbox. Take a look at samples/tasks/js/Templates.js for an example."
I didn't have time to check it out, but ComboBox uses templates too.

llin96

25 Feb 2008, 12:26 PM

I think it has to do with this (ext-2.0.2/air/README.txt):
"XTemplates must be loaded inline while the js file loads (not in an onready block) when used in the application sandbox. Take a look at samples/tasks/js/Templates.js for an example."
I didn't have time to check it out, but ComboBox uses templates too.

seems in 2.0.2, there is adapter to make ext run in air application sandbox, so most things will be fine;), I don't have time to check it out, too

mfoley

27 Feb 2008, 8:15 PM

Hey guys, you just have to create your combobox XTemplate(s) before your Ext.onReady would fire. Note what Jack does on js/Templates.js in the Simple Tasks 2 application. I created the XTemplate right before the Ext.onReady just like this:

var loginComboTpl = new Ext.XTemplate(
'<tpl for="."><div class="x-combo-list-item">{project}</div></tpl>'
);
Ext.onReady(function(){...
var combo = new Ext.form.ComboBox({
store:store,
tpl:loginComboTpl,
id:'login'
...
});
});

dolfelt

5 Mar 2008, 7:02 AM

I tried using this with the timefield, but when it tries to load the field, I still get an Unsafe Javascript error. I used the TPL and everything, so I don't know what is going wrong.

Daniel

sven

6 Mar 2008, 6:09 AM

Try to post some code...

mfoley

6 Mar 2008, 9:02 AM

You have to precompile the date/time formats. See the "Date.precompileFormats" function in ext-air.js on the simple tasks application. I ran into this because I wanted my Ext.sql.Proxy to use "Y-m-d H:i:sO" instead of "Y-m-d H:i:s" to preserve timezones. But the format I wanted was not precompiled, and setting Ext.sql.Proxy.DATE_FORMAT to what I wanted did *not* precompile it. Essentially the precompileFormats function calls Date.createFormat and Date.createParser before the page renders.

dewie

6 Mar 2008, 12:52 PM

You can easily bypass the safe javascript :

<body onload="">

<frameset>
<frame allowCrossDomainXHR=true id="signetFrame" src="http://certair.dev.itxl.nl" sandboxRoot="http://aircert.dev.itxl.nl/" documentRoot="app:/" />
</frameset>

</body>

This is a remote example but it can also be a local file

MuratCorlu

19 Jan 2009, 5:21 AM

I used this:

<iframe allowCrossDomainXHR=true id="signetFrame" src="app:/application.html" sandboxRoot="app:/" documentRoot="app:/" style="width:100%;height:100%;border:none;"></iframe>

But I'm still getting security errors. I didn't understand this "non-application sandbox" issue... :-?