SenchaチームはExt JSバージョン7.3を提供開始いたしました。COVID-19のパンデミックは世界全体の「通常の」ワークフローに混乱をもたらしましたが、Senchaチームは強力であり、この四半期ごとのリリースを私たちのコミュニティの元に届けるために絶え間なく取り組んできました。 このリリースでは、主に、ModernツールキットとClassicツールキットの両方で、機能品質の向上、パフォーマンス、およびユーザビリティの強化にフォーカスしています。また多くのAPIのサンプルや容易に再利用可能なテンプレートを追加しました。各リリースを通じて、製品のエクスペリエンスを改善し、製品の品質と機能を強化するたびに、お客様のフィードバックに継続的に耳を傾けることをお約束します。 Ext JS 7.3のハイライト データグリッド、フィールド、チャート、ボタンウィジェットに対するいくつかの改善 Ext JSグリッドスクロールエクスペリエンスの強化 顧客から報告されたチケットに対処するための多くの品質改善（詳細については、リリースノートに掲載） 新しいKitchen Sink SampleとModern/Classicの両方のツールキットでそのまま使用できるテンプレート Ext JS APIドキュメントに30を超える新しいFiddle Sampleを追加 Froala WYSIWYG Editorを最新バージョン3.2.1にアップグレード Ext JS Kitchen Sink Sampleの追加 すぐに利用可能な「ログインフォーム」向けのテンプレートを追加しました。開発中のアプリケーションにそのままコピーして利用可能です。 レスポンシブログインフォームを作成する ユーザーパスワードをリセットするテンプレートを作成する レスポンシブなアカウント作成テンプレートを作成する ログイン画面の例 アカウント作成画面の例 Modernツールキット向けのKitchin Sink Sampleにコンポーネントを容易に検索できる機能を追加 「メニュー検索」オプションを使用して、サンプルをすばやく検索できます。また対応するコードを表示し、アプリケーションに直接利用できます。（Kitchin Sink Sample での TreeVIewナビゲーションは、Classicツールキットでは以前から提供していましたが、7.3よりModernツールキットにも追加しました。） APIコンポーネントの新しいサンプル…

Grid表示にカスタマイズしたCSSを適用する「Ext JSグリッドのカスタマイズ」に関する全6回構成のブログシリーズの最後の記事では、カスタムCSSクラスをグリッドで利用する方法を説明します。カスタムCSSクラスを追加する方法はいろいろありますが、この記事で紹介するのはその一例です。 なお、第１回〜第５回の記事をまだ読んでいない場合は下記のリンクより記事をお読みいただけます。 第１回：GridとColumnのプロパティをカスタマイズする 第２回：グループ化されたグリッド 第３回：編集機能の追加や行の折りたたみ表示 第４回：データ表示形式を柔軟にカスタマイズする 第５回：ウィジェットカラムでグリッドをカスタマイズする 組み込みプロパティを使用する グリッドとカラムは次の組み込みプロパティを備えており、スタイルのカスタマイズに利用できます。 グリッドのコンフィグ baseCls cls componentCls bodyStyle style ui カラムのコンフィグ tdCls それでは、一連のブログシリーズと同様にNBA2020プレイヤーのレーティング情報を使用し、選手名、レーティング、チーム名を表示するGridを作成します。まず、選手名を表示する列にCSSを適用して文字を bold に設定してみます。 1. ‘player’ のデータを表示するカラムのコンフィグに tdCls を設定します。 { dataIndex: 'player', flex: 1, text: 'Name', //CSS class to add tdCls: 'player'…

Ext JS 7 入門講座の第1回です。Web アプリフレームワーク Ext JS の特徴と、エンタープライズ Web アプリ開発で Ext JS が長年採用されている理由を解説します。 Ext JS は、米国 Sencha 社の JavaScript アプリケーションフレームワークです。「オールインワン」「高性能」「分業対応」「長期サポート」といった特徴が、長期的な拡張性・保守性・安定性を重視するエンタープライズ Web アプリの開発に適しています。実際、Fortune 100（全米上位 100 社）の 6 割が Ext JS を採用しています。Ext JS により、厳しい長期的な保守要件を満たし、開発・保守に必要な時間と費用を大幅に削減することができます。 オールインワン Ext JS では、エンタープライズ Web アプリのフロントエンド開発に必要な機能やコンポーネント、ツール等が一通りそろっており、すぐに開発を始めることができます。特定のバックエンド環境には依存しません。一方、他のフレームワークでは、プロジェクトの仕様に合わせて異なるベンダーの小規模フレームワークやツールを組み合わせ、性能・相性の検証や個別のバージョン・ライセンス管理が必要になり、開発自体に集中することが難しくなります。 Ext JS には、そういった組み合わせの影響を受けない一貫性があり、プロジェクトごとに開発環境やコーディングスタイルについてチームメンバーをトレーニングする必要がありません。一度の短期集中トレーニングにより、プロジェクト間で開発・人的リソースを共有できるようになります。JavaScript…

ウィジェットはとてもクールです。堅牢で直感的なデータグリッドに機能的かつビジュアルな表示を追加できます。 Ext JSでウィジェットをグリッドに追加するのはすばやく簡単に行えます。 Ext JSコンポーネントのウィジェットは相互運用性があるので（他のオープンソースコンポーネントとは異なり）、互換性やパフォーマンス、その他の問題に直面することはありません。 では早速ウィジェットカラムのメソッドを使用してグリッドの表示をカスタマイズする方法を見てみましょう。 今回の記事でも一連のブログシリーズで紹介したグリッドと同様に NBA 2020プレーヤーのレーティングに関する情報を用います。 なお、第１回〜第４回の記事をまだ読んでいない場合は下記のリンクより記事をお読みいただけます。 第１回：GridとColumnのプロパティをカスタマイズする 第２回：グループ化されたグリッド 第３回：編集機能の追加や行の折りたたみ表示 第４回：データ表示形式を柔軟にカスタマイズする Widgetcolumn [classic] ウィジェットカラムには次のようなコンポーネントを設定でき、グリッドの表示をカスタマイズできます。 Button Progress Bar (Ext.Progress or "progressbarwidget") Slider (Ext.slider.Widget or "sliderwidget") Sparklines (Ext.sparkline.*) Line ("sparklineline") Bar ("sparklinebar") Discrete ("sparklinediscrete") Bullet ("sparklinebullet") Pie ("sparklinepie") Box…

全6回構成の「Ext JSグリッドのカスタマイズ」ブログシリーズの4回目の記事では、柔軟にデータグリッドをカスタマイズすることにフォーカスします。 第1回〜第3回の記事は次のリンクよりお読みいただけます。 第１回：GridとColumnのプロパティをカスタマイズする 第２回：グループ化されたグリッド 第３回：編集機能の追加や行の折りたたみ表示 Ext JSのGridではデータ表示のカスタマイズが容易に行えます。 この記事ではNBA 2020プレーヤーのレーティング情報を表示するグリッドをサンプルとして使用します。 最初の例では、プレーヤーの身長をフィートやインチにして表示したり、年俸の金額を3桁区切りで表示するために、rendererメソッドやformatterプロパティを使用します。 まず、今回の表示で用いるデータは次のように作成しており、身長(ht) や年俸(Salary)は数値がそのまま用いられています。桁区切りの記号は含みません。     "data": [         {             "player": "Kemba Walker",             "team": "Boston Celtics",             "rating": 88,             "dunkRating": 30,             "threePointRating": 83,             "position": "PG",             "ht": 60,             "salary": 32742000         },         {             "player": "Jayson Tatum",             "team": "Boston Celtics",             "rating": 86,             "dunkRating": 83,             "threePointRating": 90,             "position": "SF",             "ht": 68,             "salary": 7830000         },         {             "player": "Jaylen Brown",             "team": "Boston Celtics",             "rating": 85,             "dunkRating": 82,             "threePointRating": 85,…

この記事は Ron Bailey による The How and Why of the MVVM Pattern in Ext JS の抄訳です。 アプリケーションの構造とコードは、上手くまとめることで意図を伝えることができます。 コードを書くことはターゲットデバイスと効率的に通信を行う手段ではありますが、デザインパターンを適切に選択して適用することが不可欠です。それにより、開発者はプロジェクトに適した技術的なフレームワークと効果的に連携・通信ができるようになります。 これらのニーズを満たす十分に試行されたパターンの一つは、業界標準である MVC（モデル・ビュー・コントローラ）パターンです。MVC パターンは、ユーザーが触れるアプリケーションの主な懸念事項を抽象化する目的を果たします。つまり、アプリケーションのデータ（モデル）、表示（ビュー）、そしてそれら二つを接続する処理（コントローラ）を分離し、個別に取り組めるようにします。ただし、それらは緩やかに結合しており、相互に依存する関係を保っています。このようにすることで、一つに変更を加えても、他に過度の影響をもたらしたり、アプリケーション全体を危うくしたりすることがなくなります。 最初の MVC パターンが登場して以来、多様な実装と環境に合わせて多くの派生が作られました。Ext JS バージョン 5 以降の Web アプリケーションに最適なものは MVVM（モデル・ビュー・ビューモデル）パターンで、それ以前の Ext JS バージョンで使用していた既成の MVC パターンに代わるものとして採用されました。 Ext JS の MVVM パターンでは、元の MVC が持つ利点に加え、ビューパッケージという個別の MVC…

過去20年間、医療データ管理は革新的な進化を遂げてきました。モバイルテクノロジーの出現によって、医師による患者の診察記録のほぼすべてが、詳細にデジタル化されるようになっているのです。 アルゼンチンの最大級の民間医療機関アレマン病院（オスピタル・アレマン）は、医学の3本の柱、「診療」「教育」「研究」に注力し、患者にファーストクラスのケアを提供することを目指しています。その中で、医師や病院管理者、医療スタッフにとって患者データの収集と評価を簡便化するためのモダンなアプリケーションやオートメーションといった技術的側面の強化を推進しています。 (more…)

全6回構成の「Ext JSグリッドのカスタマイズ」ブログシリーズの3回目の記事では、Row Editingを使用してデータグリッドをカスタマイズすることにフォーカスします。 シリーズの第1回と第2回は次のリンクよりお読みいただけます。 第１回：GridとColumnのプロパティをカスタマイズする 第２回：グループ化されたグリッド ここで用いるグリッドのサンプルではNBA 2020プレーヤーのレーティング情報をサンプルデータとして使用します。 Cell Editing/Row Editing 1. Gridのコンフィグでcelleditingのプラグインをアクティブにする plugins: { cellediting: { clicksToEdit: 1 } } 2. カラムのコンフィグでエディタを定義する（エディタは、テキストフィールド、日付フィールド、または数値フィールドを指定可能） { dataIndex: 'position', text: 'Position', flex: 1, editor: { xtype: 'combo', typeAhead: true, triggerAction: 'all', selectOnFocus: false,…

Ext JS、ExtAngular、ExtReact、ExtWebComponentsおよびツールのバージョン7.2を提供開始いたしました。このリリースでは、コンポーネントの品質とパフォーマンスに関連する製品機能の強化にフォーカスしています。この記事ではExt JS 7.2のアップデート内容を説明します。 Ext JS 7.2のハイライト Ext JS ModernおよびClassicツールキットの大幅な改善 Senchaは、マーケットをリードするグリッド、ピボットグリッド、およびロックグリッドコンポーネントに多くの改善を行うことに特に重点を置いています。 グリッドについて次の機能を改善 Grouping Grid Cell editor Grid view Grid Drag and Drop Stateful Grid Summary section grid editor の Tagfield コンポーネントとフィールドの次の機能を改善 General field Tag field Date field Data binding Combobox…