Latest Ext JS 7.8 is now available. Learn more

Ext JS Data Gridをすばやくカスタマイズする方法 (Part 5/6) – ウィジェットカラムでグリッドをカスタマイズする

July 20, 2020 170 Views
Show

ウィジェットはとてもクールです。堅牢で直感的なデータグリッドに機能的かつビジュアルな表示を追加できます。 Ext JSでウィジェットをグリッドに追加するのはすばやく簡単に行えます。 Ext JSコンポーネントのウィジェットは相互運用性があるので(他のオープンソースコンポーネントとは異なり)、互換性やパフォーマンス、その他の問題に直面することはありません。
では早速ウィジェットカラムのメソッドを使用してグリッドの表示をカスタマイズする方法を見てみましょう。

今回の記事でも一連のブログシリーズで紹介したグリッドと同様に NBA 2020プレーヤーのレーティングに関する情報を用います。

なお、第1回〜第4回の記事をまだ読んでいない場合は下記のリンクより記事をお読みいただけます。

第1回:GridとColumnのプロパティをカスタマイズする
第2回:グループ化されたグリッド
第3回:編集機能の追加や行の折りたたみ表示
第4回:データ表示形式を柔軟にカスタマイズする

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 (“sparklinebox”)
    • TriState (“sparklinetristate”)

次のスクリーンショットはProgressBar, Slider, Sparkline を使用した例です。

この例では次の形式のデータを使用しています。


{
    "player": "Kemba Walker",
    "team": "Boston Celtics",
    "rating": 88,
    "dunkRating": 30,
    "threePointRating": 83,
    "position": "PG",
    "ht": 60,
    "salary" : 32742000,
    "twoPointPercent": 0.48,
    "threePointPercent": 0.38,
    "scoringEvolution": [12,17,17,17,21,23,22,25,22],
    "plusMinusEvolution2020": [-16,7,13,8,4,0,20,21,18,-4,2,0,22,-8,-9,4,-10,7,16]
},
{
    "player": "Jayson Tatum",
    "team": "Boston Celtics",
    "rating": 86,
    "dunkRating": 83,
    "threePointRating": 90,
    "position": "SF",
    "ht": 68,
    "salary":7830000,
    "twoPointPercent": 0.47,
    "threePointPercent": 0.37,
    "scoringEvolution": [14,15,22],
    "plusMinusEvolution2020": [-4,9,20,16,12,9,13,23,16,14,6,12,8,-6,-23,4,11,13,11,31]
}
                            

 

グリッド側の実装では columns に xtype: ‘widgetcolumn’ を使用するカラムを作成します。以下の実装例ではウィジェットに Progressbar, Slider, Sparkline を設定しています。


{
    text: '2PT%',
    xtype: 'widgetcolumn',
    width: 120,
    widget: {
        bind: '{record.twoPointPercent}',
        xtype: 'progressbarwidget',
        textTpl: ['{percent:number("0")}%']
    }
},
{
    text: '2PT%',
    xtype: 'widgetcolumn',
    width: 120,
    widget: {
        xtype: 'sliderwidget',
        minValue: 0,
        maxValue: 1,
        bind: '{record.twoPointPercent}',
        publishOnComplete: false,
        decimalPrecision: 2
    }
},
{
    text: 'Scoring evolution',
    flex: 1,
    xtype: 'widgetcolumn',
    widget: {
        xtype: 'sparklineline',
        bind: '{record.scoringEvolution}',
        tipTpl: 'Value: {y:number("0.00"}'
    }
}
                            

 

最初の2つのカラムはウィジェットで Progressbar, Slider を表示していますが、いずれも、{record.twoPointPercent} をバインドしており、同じ値が表示されます。また Progressbar では textTpl を設定して Progressbar に数値をテキストで重ねて表示しています。このため Slider の操作に伴って Progressbar の表示も変わります。

Sparkline は {record.scoringEvolution} をバインドしています。また tipTpl を設定しているのでマウスを Sparkline のグラフに重ねると tooltip に値が表示されます。

このコードをFiddle Toolで確認して実行する

Ext JSコンポーネントライブラリには、アプリケーションに統合できる100を超えるコンポーネントが含まれますが、グリッドにウィジェットセルを設定すれば視覚的に優れたUIを容易に実現できます。この記事で例示したサンプルよりも更に多くのウィジェットをグリッドで使用する例はウィジェットのサンプルでご確認いただけます。

またライブの株価情報更新画面に折れ線グラフやスライダーを使用するサンプルStock Tickerもございます。

次回の記事では「Grid表示にカスタマイズしたCSSを適用する方法」を解説します。

Ext JS 7.2 でデータグリッドを作成する

Ext JS 7.2の30日間無料トライアルは、製品の全ての機能にアクセスできます、アプリケーションに高性能なデータグリッドを作成する方法をお読みいただき、Get Started のドキュメントから始めましょう!

Recommended Articles

Decoding the Divide: Enterprise Software Development vs. Standard Software Development

There are two main ways to develop software. These two ways include enterprise software application development and standard software development. Here, enterprise applications development customizes…

Web Application Development | Top 10 Frameworks in 2024

If you are a developer, you must know the role of frameworks in creating amazing applications. Web application development frameworks come with pre-built tools to…

Ext JS ClassicとModernツールキットの違いを理解する

Ext JSは、強力なWebアプリケーション/モバイルアプリケーションを構築するためのJavaScriptフレームワークです。フレームワークには、140を超える高性能でフルテスト済のカスタマイズ可能な UIウィジェット/コンポーネントが搭載されています。さらに、すべての最新ブラウザに対応し、クロスプラットフォーム開発をサポートしています。Ext JSは、アプリを構築するための2つのツールキット(Classic ToolkitとModern Toolkit)を提供しています。それぞれのツールキットは、異なるユースケースに対応するように設計されており、独自の機能と利点を提供します。

Understanding the Difference: When to Use Ext JS Classic vs. Modern Toolkit

Ext JS is a JavaScript framework for building powerful web and mobile applications. The framework features over 140+ high-performance, fully tested, and customizable UI widgets/components.…

Ext JS 7.8リリース

このたび、Senchaチームは、Sencha Ext JS 7.8のリリースを発表しました。このリリースでは、7.7リリースに続き、Grid、Timefield、Chart、TreePanelなどユーザーの皆さんからの要望に応え、ModernおよびClassicツールキットに数多くの品質強化を行っています。また、Ext JS 7.8には、Classicツールキットの新機能Froalaに加え、CheckBox、Grid、DataViewの改善、Grid、Combo、CheckBox、Chart、Date Field、TreePanel、Storeなどに対する要望の多かった機能、双方のツールキットに対する品質改善が含まれます。

React Apps Development Using ReExt with Ext JS Components

The world is moving fast towards online businesses. Businesses are established online via social media, mobile apps, and websites. In other words, an online presence…

View More