Resize the "Part Number" column (or any other column), make it narrower and notice how the column header text changes if the text no longer fits.
Click on "Show/Hide Details" to dynamically add/remove columns (implemented as a test for plugin to check if it handles column modifications correctly).
Plugin: VarHeaders.js, example grid: PartGrid.js
Ext.create('Ext.grid.Panel', { plugins: [ 'varheaders' ], // Can be "plugins: 'varheaders'" if this is the only plugin columns: [ { text : 'Part No', shortText: 'P/N', // <--- Config options evaluated longText : 'Part Number', // by VarHeaders plugin dataIndex: 'partNo' }, // more columns ], // other grid config options });
Tested on