読者です 読者をやめる 読者になる 読者になる

GIG

赴くままに技術を。

Ext JS事始め

仕事の関係でExt JSを使うことになったので、お勉強しなきゃ。

ライセンス

ツールを使うときにはライセンスが重要。 後でやっぱり使えなかったということにならないように自分宛のメモ。

Ext JS Licencing Option

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版をダウンロードし、解凍して実行する。 下記の画面に従って、インストールを行う。

f:id:hermesian:20130220230248p:plain

f:id:hermesian:20130220230255p:plain

f:id:hermesian:20130220230259p:plain

f:id:hermesian:20130220230303p:plain

ユーザシェルにパスは記述されているが、パスは通っていない。

$ 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プロジェクトを作成

流れとしては、

  1. プロジェクトディレクトリ作成
  2. Ext JSディレクトリ一式コピー&リネーム
  3. 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
広告を非表示にする