仕事の関係でExt JSを使うことになったので、お勉強しなきゃ。
ライセンス
ツールを使うときにはライセンスが重要。 後でやっぱり使えなかったということにならないように自分宛のメモ。
Open Source License
Sencha is an avid supporter of open source software. Our open source license is the
appropriate option if you are creating an open source application under a license
compatible with the GNU GPL license v3. Although the GPLv3 has many terms, the most
important is that you must provide the source code of your application to your users
so they can be free to modify your application for their own needs.
GPLv3ですね。 とりまダウンロードしたライブラリを解凍する。
$ unzip ext-4.1.1a-gpl.zip
SenchaCmdの導入
アプリケーションのひな形を作ったり、アプリケーションをコンパイルするなどに便利なツール郡が提供されている。
http://www.sencha.com/products/sencha-cmd/download
Mac版をダウンロードし、解凍して実行する。 下記の画面に従って、インストールを行う。
ユーザシェルにパスは記述されているが、パスは通っていない。
$ vi ~/.bashrc
export PATH=/Users/hermesian/sencha/bin/Sencha/Cmd/3.0.2.288:$PATH
export SENCHA_CMD_3_0_0="/Users/hermesian/sencha/bin/Sencha/Cmd/3.0.2.288"
$ sencha
-bash: sencha: command not found
$ source ~/.bashrc
$ sencha
Sencha Cmd v3.0.2.288
Options
* --debug, -d - Sets log level to higher verbosity
* --plain, -p - enables plain logging output (no highlighting)
* --quiet, -q - Sets log level to warnings and errors only
* --sdk-path, -s - sets the path to the target framework
Categories
* app - Perform various application build processes
* compile - Compile sources to produce concatenated output and metadata
* fs - A set of useful utility actions to work with files.
* generate - Generates models, controllers, etc. or an entire application
* manifest - Extract class metadata
* theme - Builds a set of theme images from a given html page
Commands
* ant - Invoke Ant with helpful properties back to Sencha Command
* build - Builds a project from a JSB3 file.
* config - Loads a config file or sets a configuration property
* help - Displays help for commands
* js - Executes arbitrary JavaScript file(s)
* which - Displays the path to the current version of Sencha Cmd
これで利用できるようになった。
Ext JSプロジェクトを作成
流れとしては、
- プロジェクトディレクトリ作成
- Ext JSディレクトリ一式コピー&リネーム
- senchaコマンドの実行
1.プロジェクトディレクトリを作成
$ mkdir FirstApp
$ cd FirstApp
2. Exp JSディレクトリ一式コピー&リネーム
$ cp -R ../ext-4.1.1a .
$ mv ext-4.1.1a ext
3. senchaコマンドの実行
$ sencha -sdk ./ext generate app FirstApp ./
プロジェクトの確認
appディレクトリは以下にMVCに対応するディレクトリが生成されている。 これでExt JSを用いた開発環境が整った。
$ ls -l
total 32
drwxr-xr-x 7 hermesian staff 238 2 20 23:22 app
-rw-r--r-- 1 hermesian staff 4553 2 20 23:22 bootstrap.js
-rw-r--r-- 1 hermesian staff 1236 2 20 23:22 build.xml
drwxr-xr-x 28 hermesian staff 952 2 20 23:20 ext
-rw-r--r-- 1 hermesian staff 431 2 20 23:22 index.html
drwxr-xr-x 3 hermesian staff 102 2 20 23:22 packages
drwxr-xr-x 3 hermesian staff 102 2 20 23:22 resources
