Ext JS へようこそ
このガイドは Ext JS の基本的な紹介となります。まずは、とてもシンプルな “Hello World” のサンプルから始めましょう。その後は、Ext JS ではコードがどのような構造になっているかを説明します。このガイドは他の重要なリソースへのリンクも含まれていますので、それらも出来るだけ多く読んでください。そうすれば Ext JS の導入がポジティブで成功することになるでしょう。
Hello World
Ext JS 5 を使い始めるのはとても簡単です!
次の様に、我々の CDN から JavaScript と CSS ファイルを参照する index.html
ファイルを生成するだけです。
<!DOCTYPE html> <html> <head> <title>Editor Preview</title> <link rel="stylesheet" type="text/css" href="http://cdn.sencha.com/ext/beta/ext-5.0.0.736/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css"> <script type="text/javascript" src="http://cdn.sencha.com/ext/beta/ext-5.0.0.736/build/ext-all.js"></script> <script type ="text/javascript" src="app.js"></script> </head> <body></body> </html> |
jQuery や AngularJS のような、別のライブラリには HTML マークアップが含まれています。
Ext JS では別のアプローチをとります。ほぼ完全に JavaScript で作成し、我々の内部的なクラスシステムを利用します。次のサンプルは我々のコード構造を示します。
Ext.create('Ext.Panel', { renderTo : Ext.getBody(), width : 200, height : 150, bodyPadding : 5, title : 'Hello World', html : 'Hello <b>World</b>...' }); |
index.html
ファイルの head でインクルードした、空の app.js
ファイルに上記の Panel オブジェクトを書いてみましょう。
この状態では、上記のコードをただスクリプトタグに追加しているだけなので、フレームワークは完全に読み込まれていないため、たぶんうまく動作しません。そのため、アプリケーションクラスの launch()
関数を利用します。これは、フレームワークが使用可能になった瞬間に発火します。
やるべき事は、上記のコードを Ext.app の launch()
関数の中に配置するだけです。
最終的な app.js
ファイルは次のようになります。
Ext.application({ name : 'MyApp', launch : function() { Ext.create('Ext.Panel', { renderTo : Ext.getBody(), width : 200, height : 150, bodyPadding : 5, title : 'Hello World', html : 'Hello <b>World</b>...' }); } }); |
ページをリフレッシュすると、次のようなパネルがを表示されます。
このサンプルは Ext JS 5 を使い始めるのはどれだけ簡単かを示します。この先は限界がありません!我々の沢山の サンプル を見ながら、Ext JS 5 の多くの機能を検討できます。フレームワークのツールと可能性に関して、とてもいい紹介となります。
ext-all.js
上記の index.html
に入っている CDN の ext-all.js と ext-theme-neptune.css には、Ext JS フレームワークの全てが含まれています。
これは実験の時にはいいですが、プロダクションの公開の時には、フレームワークのサブセットをコンパイルするのをおすすめします。そうすると、アプリケーションが必要とするクラスだけを基にした最小化したファイルを生成します。
Ext JS 5 と Sencha Cmd を利用してアプリケーションを作成する事に対する詳しい説明は Getting Started guide をご覧ください。
次は、Ext JS 5 の核心について説明します。
Ext JS とは何か?
Ext JS 5 はマルチプラットフォームのアプリケーションを生成するための総合的なツールセットを提供する JavaScript アプリケーション フレームワークです。Ext JS 5 は、IE8 から Chrome の最新版までのモダンなブラウザを全てサポートしています。
Ext JS はオブジェクト指向、クラスベースのライブラリであるため、アプリケーションを、一人の開発者から複数のメンバーの仕組みまでスケールアップすることが可能となります。この専門用語に慣れてない人もおられるでしょうから、もう少し細かく説明します。
オブジェクト指向プログラミング
オブジェクト指向プログラミング(OOP)はモジュール式でコードの設定することになりますので、再利用できる部分が出てきます。また、他の JavaScript ライブラリでよく関係される “in-line” スクリプトコーディングよりも、よりメンテナンスしやすくなります。
一つの巨大なプログラムを作成するより、そのプログラムは連携している部分に分解できます。そうすると、より簡単にメンテナンスとスケールできるようになります。
こちらで OOP の基本的な部分をご覧ください。
クラスとオブジェクト
OOPのキーとなる概念にクラスとオブジェクトがあります。 クラスはアプリケーションの構成要素の抽象的定義です。 これはベースレベルの「もの “thing”」のシンプルな抽象化です。 クラスはそのクラスのオブジェクトとしてインスタンス化できます。 その時点で、あるオブジェクトは、他に拡張された部分とともに、抽象化からの全ての情報を含めています。
さて、Ext JS クラスシステムを表す、もう一つのサンプルを作成しましょう。上記で説明したベーシックな index.html
と app.js
から始めましょう。
オブジェクトを生成するのではなく、クラスを定義しましょう。
カスタムパネルは次のように定義できます。
Ext.define('MyApp.MyPanel', { extend : 'Ext.Panel', title : 'Hello World', html : 'Hello <b>World</b>...' }); |
ご覧の通り、Ext JS Panel のクラス
Ext.panel.Panel
を拡張する ‘MyPanel’ というものを定義しました。次は、MyApp.MyPanel
のインスタンスを生成するために、これをテンプレートとして利用できます。
パネルが2個必要で、その間の違いはテキストだけということがあるかもしれません。そんな場合は MyPanel のインスタンスを二つ生成して、text と html コンフィグに違うものを設定します。app.js
のコードは次のようになります。
Ext.define('MyApp.MyPanel', { extend : 'Ext.Panel', width : 200, height : 150, bodyPadding : 5 }); Ext.application({ name : 'MyApp', launch : function() { Ext.create('MyApp.MyPanel', { renderTo :Ext.getBody(), title : 'My First Panel', html : 'My First Panel' }); Ext.create('MyApp.MyPanel', { renderTo : Ext.getBody(), title : 'My Second Panel', html : 'My Second Panel' }); } }); |
ご覧のように、この機能性があると、同じコード「ベース」を利用して、必要な変更を行うことができます。これはシンプルな例ですが、Ext JS クラスの利用と拡張はとても強力なメカニズムで、整理された、メンテナンスしやすいコードを作成できるようになります。
クラスシステムの内部的な部分に関する説明はこちらへ
注:この「インライン」なやり方はサンプルの場合だけです。本当のアプリケーションを設計している場合、ビューは MyApp.view.MyPanel
という別のファイルに入れます。さらに、create ステートメントは controller または launch()
関数の中に記述します。
Application Architecture に関して、詳しくは こちら へ。
Hello World の次は
さて、Ext JS でシンプルな “Hello World” のサンプルの作成に必要なコードをご覧いただきました。
Sencha フレームワークが初めての方には、こんなにシンプルなものを生成するにしては、記述が多いなとと思っているかもしれません。次はその逆で、実際の状況でグリッドを利用しつつ、少ない記述で衝撃的な結果を出すサンプルを紹介します。
このサンプルでは、行編集プラグインといくつかのデータの行が表示される
Ext.grid.Panel
を生成します。このサンプルをご覧になるには、app.js
ファイルの内容を次のコードに置き換えてください。
Ext.application({ name : 'MyApp', launch : function() { Ext.widget({ renderTo : Ext.getBody(), xtype : 'grid', title : 'Grid', width : 650, height : 300, plugins : 'rowediting', store : { fields : [ 'name', 'age', 'votes', 'credits' ], data : [ [ 'Bill', 35, 10, 427 ], [ 'Fred', 22, 4, 42 ] ] }, columns: { defaults: { editor : 'numberfield', width : 120 }, items: [ { text: 'Name', dataIndex: 'name', flex: 1, editor: 'textfield' }, { text: 'Age', dataIndex: 'age' }, { text: 'Votes', dataIndex: 'votes' }, { text: 'Credits', dataIndex: 'credits' } ] } }) } }); |
ブラウザをリフレッシュすると、次のように表示されます。
ここでご覧になっているものは、完全に機能しているExt JS のグリッドです。 このグリッドは、ソート、ドラッグ、移動ができるカラムがあります。このカラムは、グリッドヘッダーのドロップダウンメニューのカラムオプションを使って、表示/非表示の切り替えができます。このグリッドは、どれかの行をダブルクリックすれば起動する、行エディタがあります。この行には、とても有用で魅力的なUI がある編集可能な数字とテキストのフィールドが含まれています。
最も驚くべきことは、約 30 行のコードでこれが可能となることです。この機能性はほとんどデフォルトでグリッドに含まれています。そのため、機能性を追加する時間は大きく節約できます。この例に追加するものは row editor だけで、これがグリッドに追加されるためには、一行の config を追加することだけが必要です。
これで、記法に慣れてくると、Ext JS を利用して、どれだけ時間を節約できるか、明らかになると思います。最終的に、あなたの時間を節約できますし、ユーザーもあなたのアプリケーションを使用して、機能豊な体験を得ることができます。
注: 実際に利用する場合には、グリッドにデータを提供するストアとモデルは区別します。
この点について詳しくは API ドキュメントの Ext.data.Store と Ext.data.Model の項目をご覧ください。
次の手順
さて、Ext JS をどれだけ簡単に使い始められるかを紹介しました。 次は Ext JS をより活用するために、他のガイドもご覧ください。
我々の全ての Ext JS 5 ドキュメントは ここ にあります。
次の手順に関するガイドは次をご覧ください。
他にもフォーラムにたくさんの情報があります。 Ext JSを使い始めるときには、たくさん質問もできます!