fit4dev - Plugins for ExtJ JS 4

VarHeaders: Different column headers depending on column width


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


More plugins, notes and thoughts related to ExtJS, web apps, software development, IT projects: fit4dev

Brought to you by

Stephen Friedrich Fabian Urban