クラスシステムは、Ext JS と Sencha Touch も最も強力な機能の１つです。それは JavaScript アプリケーションに古典的な継承の構造、柔軟性、再利用性をもたらします。このクラスシステムはすべてのExt JSとSencha Touchの基本となるものです。
詳細な背景情報については、次のガイドを参照してください。
Architect では、標準の Ext JS と Sencha Touch のコードを生成し、クラスシステムもサポートします。また、作成したアプリケーションでクラスを再利用するための機能を多数提供しています。
本ドキュメントでは次のことについて説明します。
- 生成したコードにおける Architect のクラス操作方法。
- カスタムクラスの作成方法。
- リンクされたインスタンスを使って、カスタムコンポーネントを作成したアプリケーション全体で再利用する方法。リンクされたインスタンスを変更すると、変更がアプリケーション全体に適用されます。
- クラス化を使って、子コンポーネントを元の子コンポーネントにリンクされたクラスに昇格させる方法。
- createAlias と createClass を使って、コードを上書きすることなくカスタムコードをコンポーネントに挿入する方法。
- コンポーネントをツールボックスのコンフィグと一緒に保存して、Architect で作成する任意のアプリケーションの別セクションにドラッグできるようにする方法。
- コンフィグすべてを保持したままコンポーネントをファイルに保存する方法と、保存したコンポーネントを別のプロジェクトにインポートする方法 。
コードが再利用することができるような方法でアプリケーションを構築することは、保守が容易なソフトウェアを作成するための基本的な要素です。Sencha Architectはアプリケーションを再利用可能なクラスに分割するのを手助けします。
Architectのインスペクタのすべての最上位インスタンスはクラスを表します。
Architect を使うと、アプリケーションをトップダウンで構築することも、ボトムアップで構築することもできます。単体のビューコンテナから始めた場合、後でアプリケーションの一部を（クラス化により）外に出したくなるでしょう。個々の特定の画面を構築することに重点を置いてアプリケーションの設計を開始し、後でそれをまとめる場合、リンクされたインスタンスを使用して行えます。
Sencha Architect 3.0 を使用して開始する場合は、1 つ以上のクラスを保持するユーザーエクステンションパッケージも作成できます。これは、単独で公開して別のプロジェクトにインポートできます。インストールされたユーザーエクステンションコンポーネントは、ツールボックスから互換性のある任意のプロジェクトへとドラッグできます。ユーザーエクステンションパッケージの作成に関する詳細は、ユーザーエクステンションの作成を参照してください。
最上位アイテムはクラス
ツールボックスからプロジェクトにアイテムを追加するときに、Controllers、Views、Stores、Models のインスペクタノードの最上位の項目として追加したアイテムは、生成されたアプリケーションコードの中ではクラスとなります。たとえば、ツールボックスから、キャンバス内の何もない領域、もしくは、インスペクタ内の View ノードに、Panel をドラッグすると、次のようなパネルのコードが生成されます。
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.panel.Panel',
height: 250,
width: 400,
title: 'My Panel',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'button',
text: 'MyButton'
}
]
});
me.callParent(arguments);
}
});これはクラスシステムのdefine APIを使用した、標準的なクラスです。プロジェクトの保存時には、Architectはこのクラス専用のファイルapp/view/MyPanel.jsを生成します。
生成されたコードをより細かく分けてみましょう。
Ext.define('MyApp.view.MyPanel', {この行ではクラス名 MyPanel を名前空間 MyApp.view に定義します。ビューコンポーネントはすべて、Sencha の model-view-controller (MVC) パッケージの規則によって自動的にこの名前空間に配置されます。MyPanel という名前は Architect で自動生成されたものですが、[Config（コンフィグ）] パネルの userClassName プロパティを変更することで、カスタムのクラス名を選択できます。アプリケーションのクラスには適切なクラス名を選択することを推奨します。
extend: 'Ext.panel.Panel',これは、Ext JS標準のExt.panel.Panelクラスの基本構成と実装を継承することを指定しています。この値は、コンポーネントが作成されたツールボックスのタイプに基づいて、Architectによって生成されます。この値を変更する唯一の方法は、コンテキストメニューの Transform の一覧を介して、コンポーネントを別の型に変換することです。*（注意:ツールボックスに表示されていないクラスを拡張する方法は、下のカスタムクラスのセクションを参照してください。）*
height: 250,
width: 400,
title: 'My Panel',ここに表示されているのは、クラスの簡単な設定プロパティです。指定した値が親クラスから継承されたデフォルトの値と異なる場合のみ、ここに表示されます。
initComponent: function() {
var me = this;
Ext.applyIf(me, {
//...
});
me.callParent(arguments);
}ここに表示されているのは、インスタンス間で共有すべきではない、オブジェクトリテラルや子アイテムのコンフィグのような複雑な設定です。
注意：Sencha Touch で生成されるクラスのコードは、これとは若干異なっています。設定プロパティは、単純か複雑かにかかわらず、すべてコンフィグオブジェクト内にラップされます。Ext JS の将来のバージョンでも、同様の処理が行われる可能性があります。
メソッド
ツールボックスから Basic Function をクラスにドラッグするか、または、Config パネル内の Functions 項目の横にある追加ボタン (“+”) をクリックすれば、設定プロパティに加えて、クラスにインスタンスメソッドを追加することができます。関数の名前と、省略可能なパラメータを与えてから、ダブルクリックでArchitectのコードエディタを開き、実装コードを編集します。
同様に、静的なメソッドをツールボックスアイテムのStatic Functionから追加できます。
高度なクラス設定
次のクラスの設定プロパティは、任意の最上位クラスの項目を設定することができます。 これらはArchitectとフレームワークの高度な知識を持っている場合のみ変更するべきである高度な設定です。
クラスのロード
Senchaのクラスシステムのもう一つ不可欠な部分は動的なクラスローダです。Architectは作成したクラスを別々のJavaScriptファイルで生成するので、アプリケーションのそれぞれのクラスはフレームワークがそれらをロードすることを認識するように、宣言される必要があります。
このプロセスを簡略化するために、ArchitectはApplicationノードの設定でControllers、Views、Stores、Modelsの配列に、大部分の最上位のクラスを自動的に追加します。このリスト内のクラスはすべて、アプリ起動時にロードされます。代わりに個々のコントローラで、対応する配列に個々のクラスを追加することも可能です。ArchitectはApplicationノードからクラスを削除するオプションを提供します。
一部のクラスでは自動的にリストに追加されず、Applicationノード、または特定のコントローラ、ビュー、モデル、ストアのクラスにrequires設定を使用して手動で追加する必要があります。
カスタムクラス
ツールボックスでサポートされている項目からクラスを作成までを説明しましたが、ときどきツールボックスに表示されていない別のクラスを拡張、 またはプレーンな親クラスからクラスを作成する必要があります。これをArchitectの中で実現するには、ツールボックスのクラス項目を使用するか、[Project Inspector（プロジェクトインスペクタ）] の最上部にある「+」記号をクリックすると表示されるドロップダウンリストの「Class（クラス）」項目を使用します。
カスタムクラスは、Controllers、Views、Stores、Modelsのインスペクタのノードに追加することができます。カスタムクラスはExt.Class-cfg-extend設定で完全に制御でき、追加した他のクラスと同じように設定することができます。Configパネルの検索フィールドを使用して、独自の設定を追加し、追加ボタン、または上記の方法でメソッドを追加することができます。
カスタムクラスがアプリケーションに含まれるようにするには、Applicationのrequires設定、またはcontroller、view、model、storeのクラスでそれを使用することで追加することができます。
この方法で任意のカスタムクラスを作成する場合、いくつかの制限があることに注意してください。Architectはその基底クラスの実装について何も把握していないため、キャンバスにレンダリング、またはインスタンスのリンクの親として使用することはできません。これは将来のリリースで改善される予定です。カスタムクラスの extend コンフィグを Ext.button.Button のような既知のクラスに明示的に設定すると、Architect は、このクラスをボタンの完全なサブクラスに変換し、このボタンをツールボックスからドラッグした場合と同じようにキャンバスの中で使用できるオプションを提供します。
フレームワーククラスのオーバーライド
フレームワーククラスのオーバーライドは、ツールボックスでクラスを右クリックして [Create Override for the Class（クラスのオーバーライドを作成）] をクリックすると作成できます。
オーバーライドは[Project Inspector（プロジェクトインスペクタ）] パネルのリソースノードに Panel.js といった名前で表示されます。このコンポーネントを選択して [Code （コード）] パネルで開くと、編集できます。
この方法で作成したオーバーライドは、プロジェクト内のそのフレームワーククラスの全インスタンスに適用されます。これを利用すると、コンポーネントにある種の特殊な動作を実装したり、フレームワークの重要なバグを修正するためのホットフィックスを適用したりできます。
クラスのインスタンスのみに対するオーバーライドを作成することもできます。
ツールボックスへのコンポーネントの保存
[Save to Toolbox（ツールボックスへの保存）] を使用すると、あとで使用できるようにプロジェクトの最上位コンポーネントを直接ツールボックスに保存できます。この機能により、コンポーネントを保存して、複数のプロジェクトで再利用することができます。ビルド済みのコンポーネントを、全コンフィグオプションおよび子コンポーネントと一緒に保存するには、保存したい最上位のコンポーネントを選択し、[Actions（アクション）] –> [Save to Toolbox（ツールボックスへの保存）] を選択します。以下に示すようにArchitectは、コンポーネントをリネームし、ツールボックスのカテゴリを選択するよう指示します。
コンポーネント名を入力し、適当なカテゴリを選択して、OKをクリックすると、ツールボックス内にコンポーネントが保存されます。これでこのコンポーネントは、同一または別のプロジェクトで再利用できるようになります。保存されたコンポーネントは、指定したカテゴリに指定した名前で表示され、緑色のコンポーネントアイコンが付加されます。選択したカテゴリ下でそのコンポーネントを見つけるか、登録した名前をツールボックスの上部にあるFilterフィールドへ入力することで見つけることができます。
保存したコンポーネントを更新するには、プロジェクトで変更を加えてから、同じ名前でツールボックスに再保存します。そうすることにより、同じカテゴリ内の元のコンポーネントを上書きします。
コンポーネントをファイルにエクスポートする
ファイルにコンポーネントをエクスポートするのは非常に簡単です。インスペクタで対象コンポーネントを右クリックするだけです。以下に示す [Export to File（ファイルにエクスポート）] のオプションを参照します。
[Export to File（ファイルにエクスポート）] をクリックすると、ファイルをマシンに保存するように促されます。
コンポーネントのファイルからのインポート
ファイルへのエクスポート機能を使用してエクスポートされたコンポーネントは、他の開発者の Architect インスタンスにインポートして、開発を継続したり他のプロジェクトで再利用したりできます。Sencha Architect の Ext JS 環境下で作成されたコンポーネントのみが Ext JS プロジェクトにインポートでき、Sencha Architect で作成された Sencha Touch コンポーネントのみが Sencha Touch プロジェクトにインポートできるということに注意してください。
他の開発者がエクスポートされたコンポーネントに変更を加えても、元の開発者がそれを再びインポートし、プロジェクトで使用することも可能です。これは、一つのプロジェクトをチームの他のメンバーと協力して開発するための良い方法でしょう。エクスポートされたコンポーネントをインポートするには、エクスポートされたコンポーネントをデスクトップまたはサーバーのアクセス可能な場所に置いてください。Editメニューのimports Componentを選択します。コンポーネントのある場所まで進み、Openをクリックします。Architect は、コンポーネントをツールボックに保存したときと同じダイアログを表示し、コンポーネントの名前を変更して、コンポーネントを表示するツールボックスカテゴリを選択することをユーザーに求めてきます。上にある、「ツールボックスへ保存」の下にある画像を参照してください。
コンポーネント名を入力し適切なカテゴリを選択して [OK] をクリックすると、ツールボックスにコンポーネントが保存されます。これでコンポーネントは、他のコンポーネントと同様にツールボックスから使用し、プロジェクトへ追加することができます。
リンクされたインスタンス
リンクされたインスタンスは、アプリケーション内でのコンポーネントの作成と再利用を可能にします。多くのビューを持つ大規模なプロジェクトを構築する際、インスタンスのリンクを使用して簡略化することができます。Architect のリンクされたインスタンス機能の目的は再利用です。カスタムコンポーネント（xtype）をビルドして、そのリンクされたインスタンスを作成し、新たな xtype をアプリケーション内の必要な場所で再利用することです。
クラスは複数回インスタンス化できる再利用可能なユニットであることを意図しているので、Architect ではこれを可能にするためのリンクされたインスタンスの概念をサポートしています。任意の最上位のビュークラスは他のビュー内の１つ、または複数の場所にリンクすることができ、これらの結果としてインスタンスのリンクはuserAlias設定をセットすることで制御することができ、そのxtypeによってクラスを参照します。インスタンスのリンクは、任意の子ビューコンポーネントを選択し、そのコンテキストメニューからPromote to Classを選択して作成することができます。
リンクされた各インスタンスはすべての変更を継承するため、同じコンポーネントのインスタンスのリンクを複数作成すると、元のコンポーネントを編集することで、一度にそれらすべてを変更することできます。また、リンクされた各インスタンスを個別に編集することができます。この変更は、元のコンポーネントの属性を上書きします。インスペクタでコンポーネントを右クリックすることによって使用できる、Architectのもう１つの機能であるクラス化を使用するとき、これは特に役に立ちます。
インスタンスのリンク：例
インスタンスのリンクの使用方法についてより学習するために、以下に例を示します。
- 新しい Ext JS プロジェクトで、[Form Panel （フォームパネル）]（ツールボックスの [Containers（コンテナ）] グループにある [Forms（フォーム）] カテゴリ内）をキャンバスまたは [Project Inspector（プロジェクトインスペクタ）] に最上位レベルのコンポーネントとしてドラッグします。
- [FieldSet]（ [Containers（コンテナ）] グループの [Forms（フォーム）] カテゴリ内）を追加します。
- フォームにテキストフィールドを 2 つ追加します。
- フォームの userClassName を
SpecialFormに設定し、その userAlias をspecialformにセットします。インスペクタにはこのように表示されるでしょう。
- [Window]（ツールボックスの [Containers（コンテナ）] カテゴリ内）を 2 つ目の最上位コンポーネントとしてプロジェクトに追加します。
- [Project Inspector（プロジェクトインスペクタ）] で、今追加したウィンドウに SpecialForm をドラッグします。
- Architect から Copy(複製)、Move(移動)、Link(リンク)のいずれかを求められます。Linkを選択します。Architectは
MyWindowの中でSpecialFormのインスタンス (MyForm...と呼ばれる) のリンクを作成します。 また、アプリケーションの中で再利用することが可能なspecialformと呼ばれるxtypeを作成します。インスペクタは以下のように表示されているはずです。
ビューポートでspecialformを再利用しましょう。
- もうひとつの最上位コンポーネントとして、Viewportを追加します。インスペクタで、最上位の
SpecialFormをビューポートへドラッグします。 - ArchitectはCopy(複製)、Move(移動)、Link(リンク)を尋ねてきますのでLinkを選択します。Architectはビューポート下 で
SpecialFormの2つ目のインスタンス(MyForm...と呼ばれる) のリンクを作成します。
インスペクタにはこのように表示されるでしょう。
SpecialForm(WindowとViewport下のMyForm...の新しい各インスタンスを、表示されているキャンバスから選択します。それぞれは元となるSpecialFormのFieldSetに追加された2つのフィールドを持ちます。- ここで、元となる最上位の
SpecialFormを選択し、FieldSetに新たにText Fieldを追加します。インスペクタでもう一度WindowとViewportにリンクされたインスタンスを選択します。新しいフィールドを含んだフォームをキャンバスで見ることができます。
Architectはリンクされたインスタンスを個々に変更することができます。Viewport 内のフォームの名前を変更したい場合。これを行うには、[Viewport（ビューポート）] で [MyForm...] を選択し、[Config（コンフィグ）] パネルで title コンフィグを編集します。変化はSpecialFormのそのインスタンスのみに適用されます。
インスタンスのリンクをさらに活用するためのオーバーライド
いくつかのものに関しては、Architectのドラッグ＆ドロップ、視覚的インターフェイスの使用では達成できません。たとえば、Viewport 内のフォームのインスタンス（Window のバージョンではなく）に ComboBox のみを追加するとします。
これを行うには、ComboBoxを条件付きで含むオーバーライドを作成します。
- Viewportを選択し、キャンバスの左上にあるCodeボタンをクリックして、Create Overrideをクリックします。
- Architectのコードエディタを使用して付けたい名前、おそらくこのケースでは
showComboという名前でカスタム設定を作成して、initComponentをオーバーライドします。それから、フォームのViewportインスタンス上にカスタム設定をセットすることができます。Architectは上書きされたコードを探す方法を知らないので、キャンバスデザインビューにComboBoxを表示させることはできません。しかし、実行時にはしっかり動作し、ComboBoxは期待通りにブラウザに表示されます。
Architect の Kiva サンプルアプリケーションではリンクされたインスタンスとクラス化のプロセスを示しています。カスタムの外部ライブラリを Architect に追加し、このライブラリを Architect のコンポーネントに使用するには、オーバーライドを指定することが必要です。Kiva サンプルアプリケーションでは、Architect でネイティブ操作できるクエリを実行するために、YQL を通過する特別な JSONP Proxy ライブラリが提供されています。
これは、KivaProxy.js というライブラリをリソースとして追加することで実現しています。そして、JSONP ストアを追加する代わりにプレーンなストアを追加し、KivaProxy.js（このファイル内では「proxy.kiva」という別名が付けられています）のコードを使用するようにコードを手作業で上書きします。 Architect 2.1 のコードの抜粋を次に示します。
Ext.define(‘Kiva.store.override.Loans’, { override: ‘Kiva.store.Loans’,
requires: [
'Kiva.model.Loan'
],
config: {
autoLoad: true,
model: 'Kiva.model.Loan',
remoteFilter: true,
storeId: 'Loans',
proxy: {
type: 'kiva',
reader: {
type: 'json',
successProperty: 'success',
rootProperty: function(data) {
if (data.error || data.query.count === 0) {
return [];
} else {
return data.query.results.loans;
}
}
}
}
}
});この方法には重大な難点がいくつかあります。
- ExtJS オーバーライドに関する実際的な知識が必要であり、簡単な目的の達成にはややわずらわしい。
- 手作業で上書きする必要があるため、「reader」 のコード（関連するレコードを検索すべきデータ場所をストアに伝えるコード）も記述しなければならない。
- ストアの下にあるその他のプロパティはすべて、ユーザーによる変更が必要な場合は Architect GUI ではなくコードで調整することが必要。
このような理由から、createAlias が Architect 2.2 に追加されました。これらのオーバーライドは後続のリリースでも使用できますが、下記で説明する機能を使用するほうが、作成したプロジェクトの保守を簡単に行えます。
createAlias と createClass
Sencha Architect 2.2 以降には createAlias および createClass という機能が搭載されており、コードのオーバーライドを使用せずに開発者が外部ライブラリを取り込んだり、コンポーネントにカスタムのコードを挿入したりできます。多くのアプリケーションで Sencha フレームワークと共に別のライブラリを使用しており、**createAlias** および **createClass* コンフィグに外部コンポーネントの xtype またはクラス名をセットすることでこれらの外部 JavaScript ライブラリをより簡単に統合できます。
Architect の Kiva サンプルアプリケーションでは、オーバーライドを使用せず createAlias を使用して同じ効果を得る方法を示しています。代わりに、次によって同じ効果を得られます。
- JSONP ストアの追加
- createAlias コンフィグに「kiva」とセット
- リーダーの「root」プロパティに「query.results.loans」とセット
実装を迅速に行えるだけでなく、継続的にストア、プロキシ、リーダーのカスタマイズを行う上で、シンプルな GUI を使用することによる柔軟性と使いやすさを提供します。**createAlias** は子コンポーネントの参照に使用する名前を提供するもので、Architect 2.1 で行っていたようにストアをオーバーライドしなくてもこの名前を使用して簡単に子コンポーネントを参照できます。
子コンポーネントの保存とエクスポート
上に示した処理は最上位レベルのコンポーネントに対してのみ機能します。子コンポーネントの保存とエクスポートには、別の処理が必要です。たとえば、LoginScreen というコンテナがあり、作成済みの LoginForm コンポーネントをこれに追加する場合、LoginForm コンポーネントを LoginScreen コンテナにドラッグアンドドロップして、リンクされたインスタンスを確立できます。インスタンスのリンクは、オブジェクト指向プログラミングでいうオブジェクトのインスタンス化とよく似ています。従って、LoginForm コンポーネントに直接加えた変更は、リンクされたインスタンスへも反映されます。リンクされたインスタンスは、最上位コンポーネントをドラッグ＆ドロップするか、既存のリンクされたインスタンスをコピーすることによって、いくつでも作成できます。この方法により、プロジェクトの各部分を別々に作成し、それらを後でViewportなどのコンテナ内で、インスタンス化のリンクを行うことにより、ビュー全体を参照することができます。
リンクされたインスタンスとクラス化（Architect 2.1）
Architect 2.1 では、最上位レベルのコンポーネントのインスタンスを別の最上位レベルのコンポーネントの子アイテムとして作成できる、リンクされたインスタンス機能およびクラス化機能を提供していました。Architect 2.2 では、同じ目的をより簡単かつ優れた方法で達成できる createAlias 機能（後述します）を搭載しました。
リンクされたインスタンスは、複雑なプロジェクトのビルドに非常に役立ちます。同じコンポーネントへリンクしたインスタンス化を行えば、オリジナルのコンポーネントを変更すると、リンクされたコンポーネントもその変更を継承します。リンクされたコンポーネントを個々に編集することも可能です。 そのときの変更は、オリジナルのコンポーネントの属性を上書きします。これは、別の Archtitect の機能であるクラス化を使用する際に特に役立ちます。
コンポーネントのどんな子アイテムも、最上位コンポーネントに昇格し、Promote to Class機能を使用してArchitectプロジェクトディレクトリで独自のクラスになることができます。例えば、グリッドカラムは、作成当初にはそれ自体にいかなる目的もないため、グリッドパネルまたはツリーパネルのみに追加できます。
こうするために、インスペクタのViewsへGrid Panelをドラッグします。作成したグリッドパネルはデフォルトでいくつかのカラムを有しています。インスペクタでBoolean（カラムのヘッダー名）を右クリックし、Promote to Classをクリックします。
カラムは自身の最上位コンポーネントとなり、[Project Inspector（プロジェクトインスペクタ）] のリンクされたインスタンスにより置換されます。Architect でプロジェクトをエクスポートすると、コンポーネント/クラスに対して別々の .js ファイルを生成します。この機能は、Architect のほとんどのビューコンポーネントで機能します。
この機能を使用すると、チームで作業する場合に、プロジェクトの共有や管理を簡単に行えます。コードの管理を行うことに加えて、このように最上位のコンポーネントを管理してArchitectプロジェクトを組織することは、プロジェクトを拡大し続けることが容易になります。メインアプリケーションビューでリンクされたインスタンスを使用することにより、最上位コンポーネント全てをその関係性と共に表示することを簡単に行えます。インスタンスのリンクと共に、クラス化を行うことも推奨されています。 最上位のコンポーネントの入れ子になったコンポーネントを編集することができます。このために、プロジェクトを保存するときに、Architectは各コンポーネントにつき別々に.jsファイルを生成します。クラス化を行うとき、元のコンポーネントはインスタンスのリンクにより、新しい最上位のコンポーネントとして置き換わります。このことにより、大規模なコンポーネントを小さなコンポーネントへ細分化や、再利用、サブセットの管理が容易になります。このことにより、新しく作成されたコンポーネントクラスで、動作を実装することや、関数をオーバーライドすることなどを可能にします。