Impressum

fit4dev - Plugins for ExtJ JS 4

VarHeaders: Different column headers depending on column width

Demo

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

Usage

 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
});

Compatibility

Tested on

Blog

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

Brought to you by

Stephen Friedrich Fabian Urban
Impressum