ExtJS Grid Auto Column Width Plugin

The Auto Width plugin when bound to a Ext.grid.Grid allows to automatically adjust the width of text columns based on it's header and cell content.

This plugin is only suited for text only cells!

Please note that this was only tested on ExtJS modern version 6.2.1.167. If you would like to use it on newer versions you may need to make changes to the plugin.

Setup

Enable the ExtJS charts module

The Auto Column Width Plugin makes use of the ExtJS charts module. If you don't have it already active in your project, then edit your app.json and add it:

/**
 * The list of required packages (with optional versions; default is "latest").
 * ...
 */
"requires": [
    "charts"
],

Grid Auto Column Width Plugin

Copy the grid directory into your app directory. Example: MYPROJ/app/grid.

Edit MYPROJ/app/grid/plugin/AutoWidth.js and replace MYPROJ in Ext.define('MYPROJ.grid.plugin.AutoWidth', { by your own project name.

Usage

To enable auto width, you must add the autoWidth: true property to the column.

Adding the autoWidthSame: true property to a column will specify that the content of all cells are expected to have the same width, this means that only the width of the title and the first cell will be used, increasing performance.

Example:

Ext.define('MyGrid', {
   extend  : 'Ext.grid.Grid',
   store   : 'my_store',
   plugins : [{ type: 'autowidth' }],
   columns: [{
      text          : 'Date',
      dataIndex     : 'date',
      xtype         : 'datecolumn',
      format        : 'Y-m-d H:i:s',
      autoWidth     : true,
      autoWidthSame : true,
   }, {
      text      : 'Text',
      autoWidth : true,
   }
});

Please check the plugin source comments and code for more details.

Anthony-Gaudino/extjs-grid-auto-column-width-plugin

ExtJS Grid Auto Column Width Plugin

Setup

Enable the ExtJS charts module

Grid Auto Column Width Plugin

Usage