HOME > Learning Place >  No.1 Sencha Ext JSの利用

No.1 Sencha Ext JSの利用

これまで、JavaScript の基礎について学習してきましたが、 この回からSencha製品のお話に入っていきます。 いよいよですね！

まずはセットアップしましょう。

SDK

最初にダウンロードするのは、Sencha Ext JSの本体であるSDKです。

http://www.sencha.com/products/extjs/download/

こちらのページからダウンロードできます。

商用バージョンの場合はメールアドレスを入れてください。 GPLバージョンでは、その必要はありません。

ダウンロードしたSDKファイルは、ローカルマシン特定のフォルダを用意しておいて、そこに落とすようにします。 Ext JSはどんどんバージョンアップされますから、それらを同じ場所に溜めておくとよいでしょう。

ダウンロードしたSDKは、Sencha Cmdを使ってワークスペースやプロジェクトを生成する時に使います。

Sencha Cmd

では、そのSencha Cmdもダウンロードしましょう。

http://www.sencha.com/products/sencha-cmd/download/

こちらのページから、お使いのプラットフォーム対応のものをダウンロードします。 プラットフォームを判断してくれますので、通常は Recommended Download のところのボタンを押せば良いでしょう。

SenchaCmd自体は、インストーラーを実行するだけでOKです！ パスのセットアップもやってくれます。 パスは、.profileに書き込まれます。 Macでzshを使っている方で、パスが通らないと嘆いている方。

source ~/.profile

をあなたの、.zprofile に設定してあげるとうまくいくかもしれません。

セットアップが完了したら、実行してみます。

% sencha

実行したら、

Sencha Cmd v4.0.0.203
Sencha Cmd provides several categories of commands and some global switches. In
most cases, the first step is to generate an application based on a Sencha SDK
such as Ext JS or Sencha Touch:
 
    sencha -sdk /path/to/sdk generate app MyApp /path/to/myapp
 
Sencha Cmd supports Ext JS 4.1.1a and higher and Sencha Touch 2.1 and higher.
 
To get help on commands use the help command:
    :
    :

こんな風に表示されればSencha CmdのインストールはOKです。

ワークスペースの作成

アプリケーションを作り始めるときには、この Sencha Cmd を使います。 アプリケーションを作る環境として、Sencha Cmdには「ワークスペース」という考え方があります。

 ▾ workspace/
  ▸ firstApp/
  ▸ secondApp/
  ▸ ext/

たとえばこういう構成で、ワークスペースのディレクトリの中で、複数のアプリケーションを作るというものです。 下位にある複数のアプリケーションで、共通に使うものとかをワークスペースに置いておくことができます。 ワークスペースを作った場合は、Sencha Ext JS のSDKも共有されます。 共有部分を持たない単純なアプリケーションの場合は、ワークスペースとアプリケーションを同じディレクトリにすることもできます。

Sencha Cmd の実行の際には、カレントディレクトリがどこであるかが重要になります。 基本的には、最初にワークスペースやアプリケーションを作成する時には、SDKのあるディレクトリで実行し、それ以降はアプリケーションのルートディレクトリで実行することになります。

ワークスペースを作る場合には、

% cd /path/to/sdk
% sencha generate workspace /path/to/workspace

のようにします。 この場合、-sdkオプションを指定すると、

% cd /path/to/workspace
% sencha -sdk /path/to/sdk generate workspace .

のように、SDK以外のディレクトリで作成することもできます。

アプリケーションの生成

では次にアプリケーションを生成します。 作成したワークスペースの中にできている ext というディレクトリが、SDK がコピーされたものになります。（SDKの全てがはいっているわけではないのですが） その ext ディレクトリの中に入って、アプリケーションを作成します。

% cd /path/to/workspace % cd ext % sencha generate app FirstApp ../firstApp

ワークスペースにあるSDKの中からアプリケーションの生成コマンドを実行しました。 ワークスペースを使う場合は、ワークスペースとアプリケーションのバージョン違いが起きないように、このようにワークスペースのSDKから実行するのが安全です。 app の次に指定している FirstApp はアプリケーション名（あとで説明します）、その次がアプリケーションを生成する場所です。

ワークスペースを作成せずに、単独のアプリケーションを作る場合はこうです。

% cd /path/to/sdk
% sencha generate app FirstApp /path/to/firstApp

こうすると、アプリケーションとワークスペースが同じディレクトリになります。

では、出来上がったディレクトリをみてみましょう。 今回は、最初の方法で、ワークスペースを分けて生成した例をみてもらいます。

    ▾ workspace/                ワークスペースのディレクトリ
      ▸ build/
      ▸ ext/                    コピーされたSDK
      ▸ packages/
      ▾ firstApp/               アプリケーションのディレクトリ
        ▾ app/                  アプリケーションのソースを配置する
          ▸ controller/
          ▸ model/
          ▸ store/
          ▸ view/
            Application.js
            Readme.md
        ▸ overrides/
        ▸ resources/
        ▸ sass/
          app.js                アプリケーションのエントリーポイント
          app.json
          bootstrap.css
          bootstrap.js
          bootstrap.json
          build.xml
          index.html            アプリケーションを開始するHTMLファイル
          Readme.md

この中の app ディレクトリの下に、Sencha Cmdが生成したアプリケーションのスケルトンがあります。 それをこれからあなたのアプリケーションのソースコードを入れかえて開発していきます。 スケルトンですが、ブラウザで表示をするとちゃんと動作します。 一度表示をしてみてください。

リファレンス

Sencha 製品にはとても詳しいAPIドキュメンテーションが用意されています。

http://docs.sencha.com/extjs/

(1)の上の所にタブがあり5つのアイコンが並んでいます。

Home／APIドキュメント／ガイド／ビデオ／サンプル です。 と様々な情報が集まっています。 ガイドには、Ext JSを理解する上で必要な文書が沢山載っています。 始める前に、これらの文書をよく読むと、いいでしょう。 この図で表示されているのは、APIドキュメントの画面です。 APIドキュメントは、Sencha Ext JSフレームワークが提供する沢山の機能のリファレンスです。

(2)のことろで、API全体から検索をすることができます。

(3)の部分をクリックすると、そのクラスのコンフィグオプション／プロパティ／メソッド などの一覧を見ることができます。 その横の検索ボックスでは、クラス内のメンバーに関して検索できます。

ドキュメント内には(4)のようなサンプルコードがよく示されていますが、ここのようにLive Preview という記述があるところでは、そのコードを実際に実行して、表示をさせることができます。 Code Editor をクリックすると、コードを編集できるので、コードをいろいろ書きかえて動作を試すことが、このAPIドキュメントの中でもできるんですね。すばらしいです。

さて、Ext JSを始める準備が整いました。 次回は、Sencha Touchの導入について説明します。

Learning Placeトップに戻る

PAGETOP