ExtJS 4 Grid Panel列宽在IE 11中渲染异常求助

Problem Details #

I'm working on an ExtJS 4 project with a Grid Panel that displays perfectly in Chrome, but has abnormal column rendering behavior in IE 11.

Normal Rendering (Chrome) #

Abnormal Rendering (IE 11) #

Relevant Grid Code #

GRID = Ext.create('Ext.grid.Panel', { 
    title: 'Popup', 
    frame: true, 
    selModel: checkboxselection, 
    store: Ext.data.StoreManager.lookup('popupStore'), 
    scrollable: true, 
    columns: _COLS, 
    features: [groupingFeature], 
    flex: 90, 
    autoHeight:true, 
    autoWidth:true, 
    renderTo: 'details', 
    scroll: true, 
    viewConfig: { 
        style: { overflowX: 'hidden' } 
    }, 
    listeners: { 
        itemclick: function(dv, record, item, index, e) { 
            SELECTED_GROUP_VALUE = record.get('GROUP_FIELD'); 
            if(selectionType =='SINGLE'){
                setValue(getProdId(), record); 
            } 
        }, 
        beforeselect: function(grid, record, index, eOpts) { }, 
        groupclick: function (view, node, group, e, eOpts) { }, 
        headerclick: function(){ } 
    }, 
    onSelectChange: function(record, isSelected, suppressEvent, commitFn) { 
        grid = Ext.ComponentQuery.query('#grid-item-id')[0]; 
        grid.suspendLayout = true; 
        this.callParent(arguments); 
    } 
}); 

I’ve already tried wrapping the grid in a Viewport and other containers, but the issue persists. Any help would be greatly appreciated!

Fixes to Try for IE 11 Compatibility #

ExtJS 4 was released before IE 11, so it has some known layout quirks with this browser. Here are targeted fixes that usually resolve these column rendering issues:

1. Clean Up Conflicting Layout Properties #

You’ve got overlapping settings that IE 11’s layout engine struggles with:

• Both scrollable: true (modern) and the deprecated scroll: true are enabled
• autoHeight: true, autoWidth: true, and flex: 90 can clash when calculating sizing

Try simplifying these configs:

GRID = Ext.create('Ext.grid.Panel', { 
    title: 'Popup', 
    frame: true, 
    selModel: checkboxselection, 
    store: Ext.data.StoreManager.lookup('popupStore'), 
    scrollable: 'y', // Restrict to vertical scrolling to avoid horizontal overflow issues
    columns: _COLS, 
    features: [groupingFeature], 
    flex: 90, 
    // Remove autoHeight/autoWidth - let your parent container handle sizing
    renderTo: 'details', 
    viewConfig: { 
        // Remove overflowX: 'hidden' - this can clip columns in IE
    }, 
    // Keep your existing listeners and other configs
}); 

2. Force IE 10 Emulation Mode #

Add this meta tag to your HTML <head> to make IE 11 behave like IE 10, which ExtJS 4 supports much better:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10">

This is often the quickest fix for ExtJS 4 + IE 11 layout problems.

3. Explicitly Define Column Widths #

IE 11 struggles with auto-sized columns, especially in grouped grids. Double-check your _COLS array to ensure every column has a defined width (fixed pixels or flex):

var _COLS = [
    { text: 'ID', dataIndex: 'id', width: 80 }, // Fixed pixel width
    { text: 'Product Name', dataIndex: 'name', flex: 1 }, // Responsive flex width
    // Add explicit widths for all remaining columns
];

4. Fix Layout Suspension in onSelectChange #

Your current code sets grid.suspendLayout = true directly, but you should use ExtJS’s official methods to avoid rendering glitches:

onSelectChange: function(record, isSelected, suppressEvent, commitFn) { 
    var grid = Ext.ComponentQuery.query('#grid-item-id')[0]; 
    if (grid) {
        grid.suspendLayout(); // Properly suspend layout updates
        this.callParent(arguments);
        grid.resumeLayout(true); // Resume and force a full layout refresh
    } else {
        this.callParent(arguments);
    }
} 

Leaving layout suspended can cause columns to render incorrectly in IE.

5. Apply ExtJS 4 IE 11 Patches #

Sencha released official patches for ExtJS 4 to add IE 11 support after the browser launched. If you have a Sencha license, grab the latest patches from their support portal. Community-maintained patches are also available if you search online.

内容的提问来源于stack exchange，提问作者Tilak Patil