extjs チュートリアル
extjsの使い方

備考

バージョン

Hello Worldアプリケーションの作成 - Sencha Cmd経由

この例では、プロセスをブートストラップするためにSencha Cmdを使用してExtJSの基本アプリケーションを作成する方法を示します。このメソッドは、プロジェクトのコードとスケルトン構造を自動的に生成します。

コンソールウィンドウを開き、作業ディレクトリを作業に適したスペースに変更します。同じウィンドウとディレクトリで、次のコマンドを実行して新しいアプリケーションを生成します。

> sencha -sdk /path/to/ext-sdk generate app HelloWorld  ./HelloWorld 

注： -sdkフラグは、フレームワークアーカイブから抽出されたディレクトリの場所を指定します。

ExtJS 6+ Senchaでは、ExtJSとTouchの両方のフレームワークを、それぞれクラシックとモダンという用語で区別される単一のコードベースに統合しました。簡単にするために、モバイルデバイスをターゲットにしたくない場合は、コマンドに追加のフラグを指定して、ワークスペースの混乱を減らしてください。

> sencha -sdk /path/to/ext-sdk generate app -classic HelloWorld ./HelloWorld 

それ以上の設定がなければ、完全に機能するデモアプリケーションがローカルディレクトリに存在するはずです。次に、作業ディレクトリを新しいHelloWorldプロジェクトディレクトリに変更し、次のHelloWorldを実行します。

> sencha app watch

これにより、プロジェクトは既定のビルドプロファイルを使用してコンパイルされ、Webブラウザを使用してアプリケーションをローカルで表示できる単純なHTTPサーバーが開始されます。デフォルトではポート1841に設定されています。

インストールとセットアップ

ExtJSの一般的な使用法は、フレームワークを活用してシングルページリッチアプリケーション（RIA）を構築します。最も簡単な方法は、主に展開ライフサイクルにおける一般的な問題の大部分をカバーするCLIビルドツールであるSencha Cmdを使用することです。

• パッケージと依存関係管理
• コードのコンパイル/バンドルと縮小
• さまざまなターゲットとプラットフォームの構築戦略を管理する

» ダウンロードSencha Cmd

2番目のステップはSDKをダウンロードし、ExtJSは商用製品です - コピーを取得するには、次のいずれかを行います：

• Senchaへのログイン商用ライセンスバージョンのサポート （ 製品ページ ）
• 30日間有効となる評価コピーを申請する
• オープンソースプロジェクトで利用可能なGPL v3のバージョンをリクエストする
  （このオプションでは最新バージョンにアクセスできない場合があります）

SDKをダウンロードした後は、先に進む前にアーカイブを解凍してください。

注 ：ExtJSプロジェクトの包括的なガイドについては、 Getting Startedの公式マニュアルを参照してください。

Sencha Cmdをインストールした後、コンソールウィンドウを開いて実行することで、可用性を確認できます。

> sencha help

ExtJSアプリケーションを作成して配備するために必要なツールが用意されており、SDKが抽出されたディレクトリの場所を書き留めておきます。

Hello Worldアプリケーションの作成 - 手動

ExtJSを使って簡単なWebアプリケーションを構築しましょう。

1つの物理ページ（aspx / html）を持つシンプルなWebアプリケーションを作成します。最低限、すべてのExtJSアプリケーションにはHTMLとJavaScriptファイルが含まれます。通常はindex.htmlとapp.jsです。

ファイルindex.htmlまたはデフォルトのページには、アプリケーションのコード（基本的にWebアプリケーションの開始点）を含むapp.jsファイルとともに、ExtJSのCSSおよびJavaScriptコードへの参照が含まれます。

ExtJSライブラリコンポーネントを使用するシンプルなWebアプリケーションを作成しましょう：

ステップ1：空のWebアプリケーションを作成する

スクリーンショットに示すように、空のWebアプリケーションを作成しました。簡単にするには、任意のWebアプリケーションプロジェクトをエディタまたはIDEで使用できます。

ステップ2：デフォルトのWebページを追加する

空のWebアプリケーションを作成した場合は、アプリケーションの開始ページとなるWebページを含める必要があります。

手順3：Default.aspxにExt Jsの参照を追加する

このステップでは、extJSライブラリの使用方法を示します。 Default.aspxのスクリーンショットに示されているように、私は3つのファイルを参照しました：

• ext-all.js
• ext-all.css
• app.js

Senchaは、グローバルコンテンツネットワークであるCacheFlyと提携して、ExtJSフレームワークのために無料のCDNホスティングを提供しています。このサンプルではExtのCDNライブラリを使用しましたが、代わりにプロジェクトディレクトリの同じファイル（ext-all.jsとext-all.css）を使用することも、CDNが利用できなかった場合のバックアップとして使用することもできます。

app.jsを参照すると、ブラウザにロードされ、アプリケーションの開始点になります。

これらのファイルとは別に、UIがレンダリングされるプレースホルダがあります。このサンプルでは、​​後でUIをレンダリングするために使用するID「空白」のdivがあります。

<script type="text/javascript" src="http://cdn.sencha.com/ext/trial/5.0.0/build/ext-all.js"></script> 

<link rel="stylesheet" type="text/css" 

href="http://cdn.sencha.com/ext/trial/5.0.0/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css"/>

<script src="app/app.js"></script> 

ステップ4：あなたのウェブプロジェクトにappフォルダとapp.jsを追加する

ExtJSはMVCパターンでコードを管理する方法を私たちに提供します。スクリーンショットに示すように、ExtJSアプリケーション用のコンテナフォルダ（この場合は「app」）があります。このフォルダには、モデル、ビュー、コントローラ、ストアなどのさまざまなフォルダに分割されたアプリケーションコードがすべて含まれます。現在、app.jsファイルしかありません。

ステップ5：app.jsにコードを書く

App.jsはアプリケーションの出発点です。このサンプルでは、​​アプリケーションを起動するために必要な最小構成を使用しました。

Ext.applicationは、いくつかのことを行うExtJSアプリケーションを表します。これは、名前構成に提供されたグローバル変数 ' SenchaApp 'を作成し、すべてのアプリケーションクラス（モデル、ビュー、コントローラ、ストア）は単一の名前空間に存在します。 Launchは、すべてのアプリケーションが準備完了（すべてのクラスが正しくロードされている）したときに自動的に呼び出される関数です。

このサンプルでは、​​いくつかの設定でPanelを作成し、 Default.aspxで提供したプレースホルダにレンダリングします。

Ext.application({
    name: 'SenchaApp',
    launch: function () {
        Ext.create('Ext.panel.Panel', {
            title: 'Sencha App',
            width: 300,
            height: 300,
            bodyPadding:10,
            renderTo: 'whitespace',
            html:'Hello World'
        });
    }
});

出力スクリーンショット

このWebアプリケーションをDefault.aspxで起動ページとして実行すると、次のウィンドウがブラウザに表示されます。