MuratCorlu
16 Jan 2009, 8:40 AM
Hi,
I'm trying to move my Ext JS project from browser(Firefox) platform to Adobe Air. But -of course- I'm getting tons of security sandbox error. I'm searching a good tutorial about this issue (using ext on adobe air without security sandbox problems) but -of course- I can't find anything.
Never mind... I started to trying understand everything from beginning. I simply create an HTML document like this:
<html>
<head>
<title>Air Grid</title>
<link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="lib/ext/air/resources/ext-air.css" />
<script type="text/javascript" src="lib/air/AIRAliases.js"></script>
<script type="text/javascript" src="lib/air/AIRIntrospector.js"></script>
<script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="lib/ext/ext-all-debug.js"></script>
<script type="text/javascript" src="lib/ext/air/ext-air-debug.js"></script>
<script type="text/javascript">
Ext.grid.GridView.prototype.templates = {
master: new Ext.Template(
'<div class="x-grid3" hidefocus="true">',
'<div class="x-grid3-viewport">',
'<div class="x-grid3-header"><div class="x-grid3-header-inner"><div class="x-grid3-header-offset">{header}</div></div><div class="x-clear"></div></div>',
'<div class="x-grid3-scroller"><div class="x-grid3-body">{body}</div><a href="#" class="x-grid3-focus" tabIndex="-1"></a></div>',
"</div>",
'<div class="x-grid3-resize-marker"></div>',
'<div class="x-grid3-resize-proxy"></div>',
"</div>"
),
header: new Ext.Template(
'<table border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',
'<thead><tr class="x-grid3-hd-row">{cells}</tr></thead>',
"</table>"
)
}
Ext.onReady(function(){
new Ext.Viewport({
layout: 'border',
items:[{
xtype:'grid',
region:'center',
store:new Ext.data.SimpleStore({
data:[[12,'Murat','Corlu']],
fields:['id','name','surname']
}),
columns:[{header:'Name',dataIndex:'name'},{header:'Surname',dataIndex:'surname'}],
forceFit:true,
viewConfig: {
forceFit: true
}
}]
});
});
</script>
</head>
<body>
</body>
</html>
Yes, I searched solution for security errors and I found that I must create my XTemplate templates before document onload event (http://extjs.com/forum/showthread.php?t=26593) (But I still can't use Ext.Ajax.request to get data from internet, this is another problem. I'll ask that later...). This seems solved a lot of problems but still having problems when mouseover header row's first column(name column). I'm getting this error:
line: 32935
message: Undefined value
name: Type error
sourceURL: app:/lib/ext/ext-all-debug.js
So, does anybody know what can I make to solve this problem?
I'm trying to move my Ext JS project from browser(Firefox) platform to Adobe Air. But -of course- I'm getting tons of security sandbox error. I'm searching a good tutorial about this issue (using ext on adobe air without security sandbox problems) but -of course- I can't find anything.
Never mind... I started to trying understand everything from beginning. I simply create an HTML document like this:
<html>
<head>
<title>Air Grid</title>
<link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="lib/ext/air/resources/ext-air.css" />
<script type="text/javascript" src="lib/air/AIRAliases.js"></script>
<script type="text/javascript" src="lib/air/AIRIntrospector.js"></script>
<script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="lib/ext/ext-all-debug.js"></script>
<script type="text/javascript" src="lib/ext/air/ext-air-debug.js"></script>
<script type="text/javascript">
Ext.grid.GridView.prototype.templates = {
master: new Ext.Template(
'<div class="x-grid3" hidefocus="true">',
'<div class="x-grid3-viewport">',
'<div class="x-grid3-header"><div class="x-grid3-header-inner"><div class="x-grid3-header-offset">{header}</div></div><div class="x-clear"></div></div>',
'<div class="x-grid3-scroller"><div class="x-grid3-body">{body}</div><a href="#" class="x-grid3-focus" tabIndex="-1"></a></div>',
"</div>",
'<div class="x-grid3-resize-marker"></div>',
'<div class="x-grid3-resize-proxy"></div>',
"</div>"
),
header: new Ext.Template(
'<table border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',
'<thead><tr class="x-grid3-hd-row">{cells}</tr></thead>',
"</table>"
)
}
Ext.onReady(function(){
new Ext.Viewport({
layout: 'border',
items:[{
xtype:'grid',
region:'center',
store:new Ext.data.SimpleStore({
data:[[12,'Murat','Corlu']],
fields:['id','name','surname']
}),
columns:[{header:'Name',dataIndex:'name'},{header:'Surname',dataIndex:'surname'}],
forceFit:true,
viewConfig: {
forceFit: true
}
}]
});
});
</script>
</head>
<body>
</body>
</html>
Yes, I searched solution for security errors and I found that I must create my XTemplate templates before document onload event (http://extjs.com/forum/showthread.php?t=26593) (But I still can't use Ext.Ajax.request to get data from internet, this is another problem. I'll ask that later...). This seems solved a lot of problems but still having problems when mouseover header row's first column(name column). I'm getting this error:
line: 32935
message: Undefined value
name: Type error
sourceURL: app:/lib/ext/ext-all-debug.js
So, does anybody know what can I make to solve this problem?