すずけんメモ

技術メモです

Getting Started with Ext JS 4.0を実際に試してみた

久々に触ってみたら3->4でかなり変更点があるので、メモしておく。まずは以下のチュートリアルを確認する。

Getting Started with Ext JS 4.0
http://www.sencha.com/learn/getting-started-with-ext-js-4/

ちなみに開発環境は、Ubuntu 11.10 + Apache 2.2.20である。 まずはExt JS 4 SDK(http://www.sencha.com/products/extjs/)をダウンロードする。/var/www/extjsに格納した。僕の開発環境上ではすべての/var/www以下のディレクトリをバーチャルホストで管理しているので、http://extjs.localhostにバーチャルホスト設定をして/var/www/extjsを閲覧できるようにした。 次にアプリケーション試用のためのディレクトリを作成する。ここではhttp://misc.localhostに設定してある/var/www/misc以下に作成していく。/var/www/misc/helloextにサンプルアプリケーションを作成していく。以下のように配置した。

$ ls -la
合計 8.0K 
-rw-r--r-- 1 suzuken developers 335 2012-01-10 11:18 app.js 
-rw-r--r-- 1 suzuken developers 322 2012-01-10 11:22 index.html

app.js

index.html

これでhttp://misc.localhost/helloext/index.htmlにアクセスするとサンプルアプリケーションが表示される。 次にデプロイを行う。Ext JSは全体のライブラリが大きいので読み込みに長い時間がかかってしまう。そこでExt JS 4からビルドのためのコマンドが用意された。Senchaコマンドである。 Senchaコマンドは以下でダウンロードできるSencha SDK Toolsに含まれている。Ext JS 4本体に含まれているsencha.shなどとは別にダウンロードする必要があるようだ。

Sencha SDK Tools | Products | Sencha
http://www.sencha.com/products/sdk-tools

installerに実行権限を与えて実行すると、インストーラが開く。

$ chmod +x ~/Downloads/SenchaSDKTools-1.2.3-linux-x64-installer.run
$ ~/Downloads/SenchaSDKTools-1.2.3-linux-x64-installer.run

/usr/local/lib/sencha にインストールした。senchaコマンドが使えるように.bashrcや.zshrcなどにPATHも通しておく。 先ほどのサンプルアプリケーションをデプロイしてみる。

$ cd /var/www/misc/helloext
$ sencha create jsb -a index.html -p app.jsb3
$ ls -la
合計 12K
-rw-r--r-- 1 suzuken developers 335 2012-01-10 11:18 app.js
-rw-r--r-- 1 suzuken developers 714 2012-01-10 11:40 app.jsb3
-rw-r--r-- 1 suzuken developers 322 2012-01-10 11:22 index.html    

app.jsb3というファイルが生成された。以下のような内容になっている。 次にアプリケーションをビルドする。

$ sencha build -p app.jsb3 -d .

Loading the Project Name Project
Loaded 0 Packages
Loaded 2 Builds
* Parse all-classes.js with options:
- debug: true
- debugLevel: 1
* Parse app-all.js with options:
- debug: false
- debugLevel: 1
* Compress and obfuscate app-all.js...
Copy resources...
Done building!

$ ls -la
合計 2.2M
-rw-r--r-- 1 suzuken developers 1.8M 2012-01-10 11:43 all-classes.js
-rw-r--r-- 1 suzuken developers 403K 2012-01-10 11:43 app-all.js
-rw-r--r-- 1 suzuken developers 335 2012-01-10 11:18 app.js
-rw-r--r-- 1 suzuken developers 20K 2012-01-10 11:42 app.jsb3
-rw-r--r-- 1 suzuken developers 324 2012-01-10 11:41 index.html

ビルドすることによってapp-all.jsとall-classes.jsが生成された。all-classes.jsはアプリケーションで利用しているクラスをすべて含んでいる。最小化されていないため、デバッグ時に利用するようだ。app-all.jsはアプリケーションを動作させるために必要なクラスすべてを含んだJavaScriptファイルだ。app.jsとall-classes.jsを組み合わせて最小化したものである。 なので、app-all.jsと、最小限のExt Jsのコアクラスを読みこめばいいことになる。production時のindex.htmlは以下のようになる。

index.html

senchaコマンドはなかなか使い勝手が良さそうだ。