Introducing React ReExt – Sencha Ext JS Components in React! LEARN MORE

How to Quickly Customize Ext JS Data Grid (Part 5/6) – Widget Column Methods

March 27, 2020 110 Views

Widgets are cool. They add a nice functional and visual cue to an already robust and intuitive data grid. With ExtJS, adding widgets to grids is quick and easy. The Ext JS component widgets are interoperable (unlike other open source components hand-picked from different sources), so you’ll never face any compatibility, performance or other issues adding them.

Let’s look into how widget column methods can be used to customize grid data.
The example grid used throughout the blog series displays NBA 2020 player ratings.

Widgetcolumn [classic]

With widget column, you can customize how to display data using the following components:

  • Button
  • Progress bar
  • Slider
  • Line
  • Bar

This is how the initial data is setup:

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

Define widget in column configuration ‘widgetcolumn’. Here we have a slider and a sparkline widget.

    	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")}'

Widget is bound to ‘record’ and it is possible to customize data display with ‘texTpl’ and ‘tipTpl’.

Sencha Fiddle:

The Ext JS component library contains over 100 components that can be integrated into your application. For example, you can use a slider, line, bar, bullet, pie, box chart and many more within the grid cell. To see what’s possible, check out some more widget examples.

The Stock Ticker is another example that shows how you can use a line chart and slider to provide live stock price updates.

Stay tuned for our next article covering ‘How to add Custom CSS to Grid Elements.’

Build Your Data Grid with Ext JS 7.1

The free 30-day trial of Ext JS 7.1 provides full access to the product features. Get started today and see how you can build a high-performing data grid for your application.

Start building with Ext JS today

Build 10x web apps faster with 140+ pre-build components and tools.

Latest Content
Discover the Top 07 Architecture Patterns used in Modern Enterprise Software Development
Discover the Top 07 Architecture Patterns used in Modern Enterprise Software Development

Developing software without an architecture pattern may have been an option back then. However, that’s…

JavaScript Design Patterns: A Hands-On Guide with Real-world Examples
JavaScript Design Patterns: A Hands-On Guide with Real-world Examples

As a web developer, you know how popular JavaScript is in the web app development…

Virtual JS Days 2024のハイライト
Virtual JS Days 2024のハイライト

2024年2月20日~22日、第3回目となる「Virtual JavaScript Days」が開催されました。JavaScript の幅広いトピックを採り上げた数多くのセッションを実施。その内容は、Senchaの最新製品、ReExt、Rapid Ext JSまで多岐にわたり、JavaScriptの最新のサンプルも含まれます。 このカンファレンスでは多くのトピックをカバーしています。Senchaでセールスエンジニアを務めるMarc Gusmano氏は、注目すべきセッションを主催しました。Marc は Sencha の最新製品「ReExt」について、詳細なプレゼンテーションを実施。その機能とメリットを、参加者に理解してもらうべく詳細に説明しました。 カンファレンスは、Senchaのジェネラルマネージャを務めるStephen Strake氏によるキーノートでスタートしました。キーノートでは、会社の将来のビジョンについての洞察を共有しています。世界中から JavaScript 開発者、エンジニア、愛好家が集まるとてもエキサイティングなイベントとなりました。これは、JavaScript…

See More