Ext Scheduler(スケジュール)2.0―4.0にアップグレード
原文:http://www.sencha.com/blog/ext-scheduler-2-0-upgrading-to-ext-js-4/
前回の記事「I introduced you to the Ext Scheduler」では、ExtJSのScheduler(スケジュール)コンポーネントとリソースを紹介しました.Brintumでは、ExtJS 4.0ベースのバージョンにアップグレードするのに忙しいです.これにより、アップグレード後のスケジュールとガントマップコンポーネントが再構築され、ExtJS 4と互換性が得られます.
前のバージョンでは、コンポーネントの合格キーコンポーネントは、LockingGridView、ColumnHeaderGroup、最大化TreeGrid、SakiのExt.uxに依存する.form.DateTimeなどいくつかの拡張.ExtJS 4には、これらの機能が含まれているので、コンポーネントが現在100%Senchaベースでサポートされているコードであることを確認できて嬉しいです.新しいTreePanelを使用して開発された2.0版スケジュールコンポーネントの外観を以下に示します.
ExtJS GridPanelとTreePanelについて
GridPanelはExtJS 4で多かれ少なかれ書き換えられている.ExtJS 3バージョンのGridは簡単な応用には効果的で、複数の機能が結合されていると、ロック列、グループ行、グループヘッダーなどの機能を結合しようとするなど、効果はあまりよくありません.前のバージョンでは、BrintumがGridViewでこれらの機能構成を実現するために苦労した結果、多くの重複コードが発生しました.スケジュール機能を実現するためにGridViewを拡張するには、ビュータイプのすべての組合せに対して1つのビュークラスを個別に定義しなければならず、Schのような混同しやすいクラス名をもたらす.LockingGroupingSchedulerView.また、Gridを使用して、EditorGridPanelでインラインセル編集を行う必要があります.
ExtJS 4では、GridViewとTreeViewに特定の機能を組み込むだけで、異なるビューを実現でき、簡単にスケジュールのAPIを実現できます.これにより、コードの重複が最小限に抑えられ、コードのメンテナンスがより楽しくなります.
もう1つは、Gridをロックする3つの独立したパネルで構成されています.2つのGridPanel(またはTreePanel)を含むGridPanelです.
これにより、ユーザは、左または右のGridを個別に定義することができるようになった.最初のスクリーンショットでは、ロックされたTreePanelは折りたたみ可能として定義され、内側のパネルは、デフォルトで使用されているHboxレイアウトの代わりにBorderレイアウトを使用しています.以下は簡単なサンプルコードです.
多くのユーザーがGridのロックを折り畳むことができることを要求しているので、小さな努力でこの機能を追加することができて嬉しいです.この機能は、ExtJS 3においてLockingGridViewを拡張することにより実現することが困難であり、大量のコードを記述し、コードメンテナンスの負担を増大させる必要がある.
もう1つの頻繁に要求される機能は、水平軸のリソースと垂直軸の時間を表示するために水平ビューを反転させることである.ExtJS 4では、この機能は簡単に2.0版に追加されました.
ExtJS 3からのアップグレード作業
コンポーネントをExtJS 4にアップグレードするには、ExtJSクラスに追加タグと機能を追加してカスタムコンポーネントを作成するのとは大きく異なります.内部メソッドの書き換えとドキュメントのないクラスメンバーの使用だけでは、大きな問題があります.そのため、アップグレードの旅はブロックコード、クラスから始まります.また,適切なテストがなく,アップグレード後のクラスが成功したかどうかを検証することも困難である.JavascriptユニットのテストとUI動作のデバッグは、特にクラスが他のクラスとアプリケーションの状態に依存している場合に非常に困難です.アップグレード作業が一般的に行われている間に、既存のAPIと機能が実装されているかどうかを検証するために、ユニットテストが必要であることに気づきました.そこで,過去2年間に作成し最適化したJSユニットテストツールNickolay Platonovを用いてExtJSアプリケーションをテストした.
テスト駆動開発方式で私たちのExtJSコードを開発して私たちの仕事の方式を変えて、私はあなたの新しい番号の“Siesta”のテストツールを買って私たちを助けて、それは未知の割り込みコードを確保しました.PhantomJSに感謝します.私たちのテストを持続的な統合プロセスの一部にすることができます.betaバージョンを試したい場合は、テキサス州オースティンで開かれるSenchaCon大会で私たちに連絡してください.
すべてのスケジュール部品の更新が完了したら、最後のレンダリングと交換を行います.ここでは、ExtJS 4でクラスの動的ロードがサポートされていることに注意します.これにより、クラス名とディレクトリの結果がいくつかの約束に従う必要があります.これにより、変換後のコードが動的なロードをサポートするために、クラスを明確な方法でアーキテクチャし、組み合わせる方法を再考する必要があります.各クラスについて,requires配列によりそれらのクラスに依存していることを明確に指摘せざるを得ない.しかし、はっきり表現すれば、これらの依存類を探すのも難しくありません.追加の利点は、デバッグ時にダイナミックロードを使用すると、単一のJSファイル内でコードを検索する必要がなくなるため、時間を節約することです.ダイナミックロードをまだ使用していない場合は、時間を大幅に節約できるため、このようにすることを強くお勧めします.
まとめ
ExtJS 4へのアップグレードは、GridがExtJS 4で書き換えられ、スケジュールがGridをベースクラスとして使用しているため、私たちにとって挑戦です.新しいツリー機能を使用すると、私たちもいくつかの小さなトラブルに遭遇します(主にCRUD操作の面).しかし、コードの一部を書き換えることで、これらの問題を整理しました.しかし、この面での改善は非常に人気があります.思い出すと、新しいExtJSバージョンにアップグレードする努力は価値があり、新しいプラットフォームでコードを再構築する基礎も成熟しています.次に、コンポーネントをSencha Touch 2.0にさらに移植し、彼のリリースを楽しみにしています.
追加リソース:
プレゼンテーションアドレス:Ext Scheduler 2.0
PhantomJSに関する情報
Sencha Forum
作者:Mats Brintse Mats has been active in the Ext JS community for the past four years and started two Ext JS user groups in both San Francisco and Malmé.Currently Mats is running his own company Bryntum, which creates advanced extensions for Ext JS and Sencha Touch. In his spare time Mats enjoys badminton and skiing.
前回の記事「I introduced you to the Ext Scheduler」では、ExtJSのScheduler(スケジュール)コンポーネントとリソースを紹介しました.Brintumでは、ExtJS 4.0ベースのバージョンにアップグレードするのに忙しいです.これにより、アップグレード後のスケジュールとガントマップコンポーネントが再構築され、ExtJS 4と互換性が得られます.
前のバージョンでは、コンポーネントの合格キーコンポーネントは、LockingGridView、ColumnHeaderGroup、最大化TreeGrid、SakiのExt.uxに依存する.form.DateTimeなどいくつかの拡張.ExtJS 4には、これらの機能が含まれているので、コンポーネントが現在100%Senchaベースでサポートされているコードであることを確認できて嬉しいです.新しいTreePanelを使用して開発された2.0版スケジュールコンポーネントの外観を以下に示します.
ExtJS GridPanelとTreePanelについて
GridPanelはExtJS 4で多かれ少なかれ書き換えられている.ExtJS 3バージョンのGridは簡単な応用には効果的で、複数の機能が結合されていると、ロック列、グループ行、グループヘッダーなどの機能を結合しようとするなど、効果はあまりよくありません.前のバージョンでは、BrintumがGridViewでこれらの機能構成を実現するために苦労した結果、多くの重複コードが発生しました.スケジュール機能を実現するためにGridViewを拡張するには、ビュータイプのすべての組合せに対して1つのビュークラスを個別に定義しなければならず、Schのような混同しやすいクラス名をもたらす.LockingGroupingSchedulerView.また、Gridを使用して、EditorGridPanelでインラインセル編集を行う必要があります.
ExtJS 4では、GridViewとTreeViewに特定の機能を組み込むだけで、異なるビューを実現でき、簡単にスケジュールのAPIを実現できます.これにより、コードの重複が最小限に抑えられ、コードのメンテナンスがより楽しくなります.
もう1つは、Gridをロックする3つの独立したパネルで構成されています.2つのGridPanel(またはTreePanel)を含むGridPanelです.
これにより、ユーザは、左または右のGridを個別に定義することができるようになった.最初のスクリーンショットでは、ロックされたTreePanelは折りたたみ可能として定義され、内側のパネルは、デフォルトで使用されているHboxレイアウトの代わりにBorderレイアウトを使用しています.以下は簡単なサンプルコードです.
- var tree = Ext.create('Sch.panel.SchedulerTree', {
- title : 'Airport departures',
- width : 900,
- height : 400,
-
- layout : 'border',
-
- schedulerConfig : {
- header : false,
- region : 'center'
- },
-
- lockedGridConfig : {
- header : false,
- split: true,
- width : 200,
- region : 'west',
- collapseDirection : 'left',
- collapsible : true
- },
- …
多くのユーザーがGridのロックを折り畳むことができることを要求しているので、小さな努力でこの機能を追加することができて嬉しいです.この機能は、ExtJS 3においてLockingGridViewを拡張することにより実現することが困難であり、大量のコードを記述し、コードメンテナンスの負担を増大させる必要がある.
もう1つの頻繁に要求される機能は、水平軸のリソースと垂直軸の時間を表示するために水平ビューを反転させることである.ExtJS 4では、この機能は簡単に2.0版に追加されました.
ExtJS 3からのアップグレード作業
コンポーネントをExtJS 4にアップグレードするには、ExtJSクラスに追加タグと機能を追加してカスタムコンポーネントを作成するのとは大きく異なります.内部メソッドの書き換えとドキュメントのないクラスメンバーの使用だけでは、大きな問題があります.そのため、アップグレードの旅はブロックコード、クラスから始まります.また,適切なテストがなく,アップグレード後のクラスが成功したかどうかを検証することも困難である.JavascriptユニットのテストとUI動作のデバッグは、特にクラスが他のクラスとアプリケーションの状態に依存している場合に非常に困難です.アップグレード作業が一般的に行われている間に、既存のAPIと機能が実装されているかどうかを検証するために、ユニットテストが必要であることに気づきました.そこで,過去2年間に作成し最適化したJSユニットテストツールNickolay Platonovを用いてExtJSアプリケーションをテストした.
テスト駆動開発方式で私たちのExtJSコードを開発して私たちの仕事の方式を変えて、私はあなたの新しい番号の“Siesta”のテストツールを買って私たちを助けて、それは未知の割り込みコードを確保しました.PhantomJSに感謝します.私たちのテストを持続的な統合プロセスの一部にすることができます.betaバージョンを試したい場合は、テキサス州オースティンで開かれるSenchaCon大会で私たちに連絡してください.
すべてのスケジュール部品の更新が完了したら、最後のレンダリングと交換を行います.ここでは、ExtJS 4でクラスの動的ロードがサポートされていることに注意します.これにより、クラス名とディレクトリの結果がいくつかの約束に従う必要があります.これにより、変換後のコードが動的なロードをサポートするために、クラスを明確な方法でアーキテクチャし、組み合わせる方法を再考する必要があります.各クラスについて,requires配列によりそれらのクラスに依存していることを明確に指摘せざるを得ない.しかし、はっきり表現すれば、これらの依存類を探すのも難しくありません.追加の利点は、デバッグ時にダイナミックロードを使用すると、単一のJSファイル内でコードを検索する必要がなくなるため、時間を節約することです.ダイナミックロードをまだ使用していない場合は、時間を大幅に節約できるため、このようにすることを強くお勧めします.
まとめ
ExtJS 4へのアップグレードは、GridがExtJS 4で書き換えられ、スケジュールがGridをベースクラスとして使用しているため、私たちにとって挑戦です.新しいツリー機能を使用すると、私たちもいくつかの小さなトラブルに遭遇します(主にCRUD操作の面).しかし、コードの一部を書き換えることで、これらの問題を整理しました.しかし、この面での改善は非常に人気があります.思い出すと、新しいExtJSバージョンにアップグレードする努力は価値があり、新しいプラットフォームでコードを再構築する基礎も成熟しています.次に、コンポーネントをSencha Touch 2.0にさらに移植し、彼のリリースを楽しみにしています.
追加リソース:
プレゼンテーションアドレス:Ext Scheduler 2.0
PhantomJSに関する情報
Sencha Forum
作者:Mats Brintse Mats has been active in the Ext JS community for the past four years and started two Ext JS user groups in both San Francisco and Malmé.Currently Mats is running his own company Bryntum, which creates advanced extensions for Ext JS and Sencha Touch. In his spare time Mats enjoys badminton and skiing.