AIRでExt JSを使ってUIを作成する

Ext JSで作成したグリッド表示をAIRで表示してみます。

Ext JSを使ってUIを作成したイメージ

Ext JS 2.2.1を使ってサンプルを作成してみたところ、次のようなエラーが発生しました。

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

アプリケーションサンドボックスでは、evalが使えないため発生しているのだと思います。

しかし、Ext JS 2.2.1に付属するサンプル(Simple Tasks V2)では正常に動作しているようなので ソースを確認したところ、サンプルではExt JS 2.0を参照するよう設定されており、私が作成した サンプルでもExt JS 2.0を参照するように変更すると、エラーが発生しなくなりました。

ここでは、Ext JS 2.0を使用して実装してみます。

HTMLの作成例

基本となるHTMLを次のように作成します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <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="adobe/AIRAliases.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" src="main.js"></script>
        <title>New Web Project</title>
    </head>
    <body>
    </body>
</html>

Ext JS 2.0を使用するよう指定しています。

JavaScriptの作成

main.jsにViewportとグリッド表示部を作成します。

Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
 
Ext.onReady(function() {

  // 時系列の緯度経度データ
  var gpxTrack = [
      ['2008-10-04 09:54:06',35.371586,136.643680],
      ['2008-10-04 09:54:09',35.371583,136.643082],
      ['2008-10-04 00:54:12',35.371700,136.642497]
  ];
  // Storeの作成 Ext.data.Record.createやArrayReaderの部分が省略される
  var store = new Ext.data.SimpleStore({
      fields: [
        {name: 'time', type: 'date', dateFormat: 'Y-m-d H:i:s'},
        {name: 'lat', type: 'float'},
        {name: 'lon', type: 'float'}
      ],
      data: gpxTrack
  });
  // 項目の作成
  var colModel = new Ext.grid.ColumnModel([
      {id:'time',header: 'time', width: 140, sortable: true
          , renderer: Ext.util.Format.dateRenderer('Y/m/d H:i:s')
          , dataIndex: 'time'},
      {header: 'lat', align: 'right', width: 80, sortable: true, dataIndex: 'lat'},
      {header: 'lon', align: 'right', width: 80, sortable: true, dataIndex: 'lon'}
  ]);

  var grid = new Ext.grid.GridPanel({
      store: store,
      cm: colModel,
      stripeRows: true,
      title: 'GPX Data',
      region: 'center'
  });

  // パネルを作成
  var panel = new Ext.Panel({
      title : 'panel_sample',
      width: 200,
      region: 'west'
  });

  // Vewportを作成しパネルとグリッドをレイアウトします
  new Ext.Viewport({
      layout:'border',
      items:[
          panel,
          grid
      ]
  });
});

アプリケーション記述ファイルを作成し、adlで実行すると2分割された画面が確認できます。