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'…

Efficiently managing real-time threats has been a concern for researchers for decades. The threats to humans life expands across the entire gamut from cyber-security, piracy, retail fraud, luring hackers, threats on the streets, school violence, narcotics and everything in between…

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,…

Pivot Grids are powerful tools to represent data and extract valuable insights from it. In the last post we looked at the 5 powerful features of the Ext JS Pivot Grid. In this blog post we demonstrate Pivot Grid Configuration…

The Ext JS Pivot Grid provides a simple way to condense many data points into a format to quickly draw insights and trends from data. In this post we cover 5 powerful Ext JS Pivot Grid features. 1. Axis and…

It was great "seeing" everyone at the webinar last week! I’ve been building Ext JS applications for a long long time and while debugging can be fun, it can be quite challenging at the same time!  I really enjoyed sharing…

Mission: Open Architect has officially begun! We are releasing an Open Source version of Sencha Architect and need your help bringing it to life—don’t miss your chance to take part in this industry-changing hackathon! With this mission we strive to…