本ガイドはExt JSの基本機能を紹介しています。非常にシンプルな「Hello World」の例で使い方を説明します。その後、Ext JSでのコードの構造について説明していきます。さらに、本ガイドにはその他多数の貴重なリソースへのリンクが含まれているので、Ext JSの導入が建設的で成功となるようにできるだけ多くご覧ください。
Hello World
Ext JS 5を使い始めるのは非常に簡単です。以下に示すように、JavaScriptやCSSファイルをCDNから参照するindex.htmlファイルを作成するだけです。
<!DOCTYPE html>
<html>
<head>
<title>Welcome to Ext JS!</title>
<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 type="text/javascript" src="http://cdn.sencha.com/ext/trial/5.0.0/build/ext-all.js"></script>
<script type="text/javascript" src="http://cdn.sencha.com/ext/trial/5.0.0/build/packages/ext-theme-neptune/build/ext-theme-neptune.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>...'
});上記のPanelオブジェクトをindex.htmlファイルのヘッダーに含めた空白のapp.jsファイルに組み込みます。これで、上記のコードを一連のスクリプトタグに追加すると、フレームワークが完全にはロードされていないのでおそらく失敗します。これがアプリケーションクラスの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のext-theme-neptune.cssとCDNのext-all.jsにはExt JSフレームワーク全体が含まれている点に注意してください。これは実験に適していますが、本番リリース用のフレームワークのサブセットをコンパイルしたいと考えるでしょう。これを行うと、アプリケーションのニーズのみに従った小型縮小ファイルが作成されます。
Ext JS 5およびSencha Cmdでアプリケーションを構築するための導入について詳しくは、はじめにを参照できます。
Ext JS 5の中心的機能の詳細については引き続きお読みください。
Ext JS とは
Ext JS 5はクロスプラットフォームアプリケーションを作成するためのツールのフルスイートを提供するJavaScriptアプリケーションフレームワークです。Ext JS 5はIE8から最新リリースのChromeに至るまで最新ブラウザをすべてサポートします。
Ext JSはオブジェクト指向のクラスベースのライブラリです。これは、単独の開発者から複数チームによる企業までアプリケーションを拡張できるように設計されていることを意味します。この用語に馴染みがない場合は、これらのコンセプトを分類してみましょう。
オブジェクト指向プログラミング
オブジェクト指向プログラミング（OOP）はコードを再利用できるように設定するためのモジュール構造です。さらに、多くの他のJavaScriptライブラリに関連付けられた一般的な「インライン」スクリプトコーディングよりもコードのメンテナンス性を高めています。
巨大な1つのプログラムを作成するよりも、プログラムをつながりのある部分に分類すると、最終的にメンテナンスと拡張が容易になります。
詳細はOOPの基本を参照してください。
クラスとオブジェクト
OOPの主なコンセプトにはクラスとオブジェクトが含まれます。クラスはアプリケーションのコンポーネントの抽象的な定義です。これはベースレベル“thing”のシンプルな抽象化です。このクラスはそのクラスのオブジェクトとしてインスタンス化されます。ここで、継承された他の部分に加えて、オブジェクトには抽象化からのすべての情報が含まれます。
Ext JSクラスシステムを示す別の例を作成してみましょう。上記と同じ基本的なindex.htmlとapp.jsファイルから始めます。
オブジェクトを作成する代わりに、これから作成するクラスを定義してみましょう。
このようなカスタムパネルを定義できます。
Ext.define('MyApp.MyPanel', {
extend : 'Ext.Panel',
title : 'Hello World',
html : 'Hello <b>World</b>...'
});ご覧のように、‘MyPanel’と呼ばれるものを定義しました。これはExt JS PanelクラスExt.Panelを継承します。次に、これをMyApp.MyPanelの新しいインスタンスを作成するための「テンプレート」として使用できます。
テキストだけが異なる2つのパネルが必要です。MyPanelのインスタンスを2つ作成し、別のテキストと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'
});
}
});
ご覧の通り、この機能を使用すると同じコード“base”を再利用できますが、必要に応じて変更することができます。これはシンプルな例ですが、Ext JSクラスの使用と継承は非常に強力なメカニズムであり、クリーンでメンテナンス可能なコードを作成できます。
クラスシステムの内部に関する詳細はここで参照できます。
注意：この「インライン」アプローチは例を示すだけです。実際のアプリケーションを構成している場合、別のファイルMyApp.view.MyPanelにビューがあります。さらに、create文はcontrollerまたはlaunch()関数の中にあります。
アプリケーションアーキテクチャの詳細はここで参照できます。
Hello Worldを超えて
シンプルな「Hello World」の例をExt JSで作成するために必要なコードを見てきました。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 gridです。このグリッドにはソート可能、ドラッグ可能、移動可能な列があります。これらの列はグリッドヘッダーのドロップダウンメニューの列オプションを利用して表示・非表示できます。また、このグリッドには行をダブルクリックして有効にできる行エディタが含まれます。 これらの行には、便利でデザイン性に優れたユーザーインターフェイスのある編集可能な数字とテキストフィールドが含まれます。
ここで驚きなのは、30行のコードで実現できることです。機能のほとんどはデフォルトでグリッドに搭載されているため、機能の追加にかける時間がかかりません。この例に追加したのは行エディタだけです。これをグリッドに追加するために必要なのは単一行のコンフィグだけです。
これで、構文に慣れればExt JSでどれだけ時間を節約できるかを示しました。最後に、時間を節約したので、ユーザーはアプリケーションで機能の豊富な操作性を得ることができます。
注意：実世界の例では、グリッドデータをフィードするために別のストアとモデルを使用します。
詳細は、アプリケーションアーキテクチャガイドのExt.data.StoreとExt.data.Modelを参照できます。
次のステップ
これで、どれほどシンプルに使い始めることができるか見たので、他のガイドを参照してExt JSについてさらに知ることができます。
Ext JS 5ドキュメントはここで参照できます。
次の手順となるガイド：
情報満載のフォーラムを確認してください。また、質問してExt JSを使い始めることもできます。