Ext JS 5.0.1 は、Ext JS 5.0.0 のテスト中にコミュニティが発見した多数のバグや機能制限への対処を行ったメンテナンスリリースです。これにより、Ext JS 5 シリーズは大幅に強化されたと確信しており、皆様のフィードバックをお待ちしています。本ガイドに見つからない事項があれば、Ext JS 5 フォーラムにてご連絡ください。
では、改善点をいくつかご紹介しましょう。
アクセシビリティ
Ext JS 4.2.2 では、WAI-ARIA 1.0 基準に記載されているアクセシビリティへのサポートを強化するため、「ext-aria」パッケージを新たに導入しました。アクセシブルなアプリケーションの開発におけるこの重要な段階で、テストパートナーや初期利用者から多くの有益なフィードバックを得ました。Ext JS 5.0.1 にはその多くを取り入れ、より優れたソリューションの提供に役立てています。
Ext JS 5.0.1 では、多数の素晴らしい機能強化に加えて、再び「ext-aria」のコンセプトを採用しています。さらに、フォーカスとキーボードナビゲーションのサポートを「ext-aria」からフレームワークの中核へと移行しました。
フォーカス
Ext JS 5.0.1 では、フォーカスの内部処理に対する戦略を強化しました。この内部処理化により、アクセシビリティ標準により的確に準拠できるようになりました。ボタン、タブ、フォームフィールド、グリッドといった中核的なコンポーネントでは明確に視覚に訴えるフォーカスを提供します。これは、アクセシブルなアプリケーションに対する重要な要件です。ユーザーは、複数の SASS 変数とミックスインのパラメータを変更でき、この新しい視覚的様相をより詳細にコントロールできるようになりました。
キーボードナビゲーション
Ext JS ではこれまで、フォーカスの管理支援を Ext.FocusManager に依存していました。このクラスは残っていますが、使用することは推奨しません。Ext.FocusManager は廃止される場合があり、将来的な存続が保証されていないことに注意してください。これに代わり、コンポーネントに「focusable」プロパティを追加しました。このプロパティは、tabIndex DOM 属性の管理に使用します。このプロパティに true をセットしているコンポーネントには、クリックまたはキーボード入力によりフォーカスを当てることができます。
このフォーカス可能なコンポーネントを特定のコンテナ（たとえばツールバー）に配置すると、コンテナで矢印キーによるナビゲーションが提供され、コンテナへのエントリ時にどのアイテムにフォーカスを当てるかを管理します。
アクセシビリティ、フォーカス、キーボードナビゲーションの強化に関する詳細は、Accessibility Guide を参照してください。
ViewModels
viewModels に関連する多数のバグ対応を行いましたが、バインドに関連する特筆すべき改良点もありました。
セレクションバインド
開発者は、特定のコンポーネントにおいて「selection」をバインド可能なプロパティとして使用できるようになりました。対象のコンポーネントには ComboBox、Grid、Tree、Breadcrumb などがあります。セレクションバインドを行うことにより、コンポーネントのセレクションの同期を維持できます。
詳細は、キッチンシンクの例を参照してください。
モデルとフィールドのバリデーション
フォームフィールドに対する重要な改善点の 1 つとして、双方向バインドにおいて、値が有効かどうかをバインドプロパティの更新前に確認できるようになりました。フォームフィールドで、モデルのバリデータを取得してこれを自身のバリデーションに含めることができるようになりました。
Ext JS 5.0.1 以降、無効な値がレコードに戻されることはなくなります。
データ
Ext.data も、Ext JS 5.0.1 において重要な修正をいくつか行った領域です。
ツリーストアとノードイベント
ツリーストアクラスは、Ext.data.Store を拡張するために Ext JS 5.0.0 においてリファクタリングが行われました。この変更により、ツリーストアでルートノードからイベントをリレーするようになりました（Ext.data.NodeInterface）。残念ながら、特定のノードイベントがストアイベントと衝突してしまい、リスナに問題を引き起こしてしまいました。その一例として、「remove」イベントが挙げられます。
Ext JS 5.0.1 ではツリーストアの戦略を変更し、ツリーストアとして発火する前にノードイベントすべてに「node」というプレフィックスを付加することにしました。これにより、ノードの「remove」イベントはツリーストアから「noderemove」イベントとして発火されるようになりました。
このような変更をメンテナンスリリースでは行わないように努力しておりますが、ノードリスナやストアリスナを損なわずに問題を解決するには、この修正が不可欠でした。
アソシエーション
Ext JS 5.0.0 では、アソシエーションに関して多数の素晴らしい変更を新たに行いました。しかしながら 1 点だけ、新しいレコードを作成した後にそのレコードをドロップする際、その子レコードに対処するクリーンアップロジックがないということが発見されました。これにより、この子レコードに対する作成や更新の操作がセッションによって生成されてしまう可能性が生じました。親レコードが保存されていない以上、このような操作はサーバーで処理できません。
Ext JS 5.0.1 では、モデル間の親子オーナーシップを宣言する参照フィールドを提供しています。この参照フィールドは、レコードのドロップ時に問い合わせを受けます。このようなアソシエーションを通知すると、ドロップされたレコードにより自動的にその子レコードの削除が行われます。
例：
Ext.define('App.model.Order', {
extend: 'Ext.data.Model',
// ...
});
Ext.define('App.model.OrderItem', {
extend: 'Ext.data.Model',
fields: [{
name: 'orderId',
// Indicates that the referenced Model (Order) owns these
// records:
reference: { parent: 'Order' }
}]
});これにより、Order がドロップされる（削除とマークされる）と、その子である OrderItems も同様にドロップされます。
order.drop();さらに、親の参照に null が設定され（たとえば、親のアソシエーションストアから削除される）、そのレコードのクリーンアップがスケジュールされます。
order.orderItems().removeAt(0); // removed orderItem is dropped
order.orderItems().getAt(0).setOrder(null); // also drops this item完全なカスケード削除はサーバーが専ら行いますが、上記のような操作により、保存処理においてクライアントからドロップされたレコードへの参照が起きることがなくなります。
応答性の高いコンフィグ
Ext.mixin.Responsive および Ext.plugin.Responsive で新たに提供される responsiveConfig により、動的な条件のクリーンな管理に柔軟性が加わります。
新しい responsiveFormulas を使用すると、responsiveConfig 規則にプロパティを追加できます。たとえば、新しいプロパティを発行するために、主コントローラで次のようなことを行えます。
Ext.define('MyApp.view.main.Main', {
extend: 'Ext.container.Container',
mixins: [
'Ext.mixin.Responsive'
],
responsiveFormulas: {
small: 'width < 600',
medium: 'width >= 600 && width < 800',
large: 'width >= 800',
tuesday: function (context) {
return (new Date()).getDay() === 2;
}
}
});続いて、これらの responsiveForumulas により、どの responsiveConfig でも使用できる新しい値が生成されます。これにより、アプリケーションの responsiveConfigs が合理化され、このような選択を１ヶ所で集中管理できます。
チャート
「sencha-charts」パッケージにもさまざまな改善が行われています（たとえば、矢印、ダイヤモンドといったストックマーカースプライト）。また、パッケージ版の sencha-charts パッケージを含めるためのビルドプロセスを変更し、ユーザーが Sencha Cmd を使用せずに済むようにしました。しかし、記録して発表したもので最も重要なものは、カスタムテーマの作成です。
チャートのテーマ
Ext JS 5.0.0 では、選択可能な組み込みのテーマを指定できるチャートをいくつか搭載しています。しかし、カスタムテーマの作成方法については触れていませんでした。このリリースではこの機能をオープンにし、独自のカラーパレットなどを作成できるようにしました。
チャートのテーマは Ext.chart.theme.Base から派生するクラスであり、次で始まるエイリアスが付与されます。
"chart.theme."基本的なテーマは次に示すようにシンプルなものにできます。
Ext.define('App.chart.theme.Awesome', {
extend: 'Ext.chart.theme.Base',
alias: 'chart.theme.awesome',
singleton: true,
config: {
baseColor: '#4d7fe6'
}
});これを基に、さまざまなコンフィグを追加して、データ系列や軸、マーカーをスタイリングします。すべてのオプションを見るには、Ext.chart.theme.Base で使用可能なコンフィグを参照してください。
上記を使用するには、チャートで「テーマ」コンフィグを設定します。
theme: 'awesome'Sencha Cmd
最後になりましたが、重要な点として、Sencha Cmd 5.0.1 では app.json で使用できるオプションを拡張しました。これにより、ビルドスクリプトを詳しく調べることなくアプリケーションをより詳細にコントロールできます。
出力
このような新しいコントロールの最も便利なものの例として、「output」オブジェクトをご紹介しましょう。一部の環境における一般的な要件として、Sencha アプリケーションがあるフォルダとは異なるフォルダに「マークアップ」ファイルを保持することが挙げられます。例：
foo.php
foo/
app.json
app.jsこのモデルとの差異は、マークアップファイル（上記では「foo.php」ですが、何でも構いません）が親フォルダにあります。以前のリリースでは、このようにするためには複数のビルドプロパティを設定することが必要でした。Sencha Cmd 5.0.1 では、これを app.json で行えるようになりました。
{
...
"output": {
"page": {
"path": "../foo.php",
"enable": false
}
}
}この設定 1 つのみで、すべてのパスが親フォルダに相対して計算され、マークアップファイルを書き換えるビルドステップが無効化されます。「output」オブジェクトでは、たとえばコンパイラの最適化からマイクロローダーの調整まで、ビルドの出力に関するさまざまな側面をコントロールできます。
新たに使用できるようになったオプションの詳細については、app.json を開いて、詳細なコメントを参照してください。
Packager
Cordova および PhoneGap が、新しい「packager」プロパティの使用により、さらに柔軟で使いやすいものとなりました。この新しい設定では、ビルドでパッケージャ（「cordova」または「phonegap」）を app.json で直接指定できます。「builds」オブジェクトと組み合わせることで、ウェブ、iOS、Android 用のアプリケーションをビルドできます。さらに、Android 用 にはローカルの Cordova ビルドを指定し、Mac が必要となる iOS には PhoneGap Cloud Build を使用できます。
例：
{
...
"builds": {
"web": {
"default": true // picked by "sencha app build"
},
"ios": {
"packager": "phonegap",
"phonegap": {
"config": {
"platform": "ios",
"remote": true // use PhoneGap Build
}
}
},
"android": {
"packager": "phonegap" // Any OS can build Android
"phonegap": {
"config": {
"platform": "android" // use Local Phonegap
}
}
}
}
}従来と同じく、ビルドを次のように実行できます。
sencha app build上記では、「ウェブ」ビルド設定を使用します。しかし現在は、次のようにすることも可能となりました。
sencha app build ios
sencha app build android言うまでもなく、Cordova および PhoneGap をインストールすること、使用する PhoneGap Build アカウントを設定することが必要です。手続き以外にも、このプロパティによっていかにビルドプロセスがすっきりするかが良くわかると思います。このアプローチを使用すると、これらのビルドに「テスト」を追加しデバッグ用の無圧縮 JavaScript コードを取得する必要性から開放されます。
まとめ
Ext JS 5.0.1 の新機能とバグ修正をお届けできたことを、嬉しく思います。このリリースは最も優れたものであると確信しており、皆様にもそのように感じていただけるよう願っています。
ご質問がありましたら、Ext JS 5 Forums にてスレッドを立ててください。サポート対象メンバーである場合、Support Portal でチケットをオープンしてください。