EXT JS 2.3; Internet Explorer 8； GridPanel记录换行，但不应该

Question

我正在使用EXT JS 2.3，并查看Internet Explorer 8出现的问题。如果您查看此页面上的示例中的company列，它将切断太长的行，例如EI du Pont de Nemours and Co... （仅作为示例，不使用简单的数组网格；仅使用普通的GridPanel）

这是我想要的正确行为，在Firefox和更高版本的Internet Explorer中会发生这种情况。

但是，在Internet Explorer 8中，该行实际上包装成两行，最后一位在第二行。

我在文档中查看了2.3，但没有找到似乎有帮助的任何配置选项。 我尝试将autoHeight设置为false，但是没有效果。 我发现的大多数其他问题都是相反的，他们希望在其中包装，但不是。

如何防止Internet Explorer 8包装？

这是JavaScript ...

列模型

var columnModel = new Ext.grid.ColumnModel([
    {
        dataIndex: 'Name',
        id: 'fieldLabel',
        width: parseInt(width)/4
    },
    {
        dataIndex: 'Description',
        id: 'fieldDataGrey',
        width: parseInt(width)/4
    }
]);

网格面板1

var Grid1 = new Ext.grid.GridPanel({
    id: 'Grid1',
    name: 'Grid1',
    store: DataStore1,
    cm: columnModel,
    width: parseInt(width)/2,
    autoHeight: false,
    collapsible: false,
    frame: false,
    stripeRows: false,
    columnLines: true,
    hideHeaders: true,
    enableColumnHide: false,
    disableSelection: true,
    overCls: '',
    loadMask: true
});

网格面板2

var Grid2 = new Ext.grid.GridPanel({
    id: 'Grid2',
    name: 'Grid2',
    store: DataStore2,
    cm: columnModel,
    width: parseInt(width)/2,
    autoHeight: false,
    collapsible: false,
    frame: false,
    stripeRows: false,
    columnLines: true,
    hideHeaders: true,
    enableColumnHide: false,
    disableSelection: true,
    overCls: '',
    loadMask: true
});

字段集

var FieldSet = new Ext.form.FieldSet({
    id: 'FieldSet',
    name: 'FieldSet',
    title: 'Title',
    border: true,
    width: width,
    autoHeight: false,
    labelWidth: 125,
    bodyStyle: 'padding:2px; margin:0px',
    style: 'padding:2px; margin:0px',
    layout: 'tableform',
    layoutConfig: {
        columns: 2,
        columnWidths:[.5, .5]
    },
    items: [
        Grid1,
        Grid2,
        {
            labelWidth: 125,
            layout: 'form',
            bodyStyle:'padding:2px 0px 0',
            items: Label,//Didn't include label with posted code
            colspan: 2
        }
    ]
});

Answer 1

尝试使用2.2.1 ExtJs版本或3.x。 我认为问题出在检测到浏览器版本的Ext发行版的Ext.js模块中。

Answer 2

Ext.grid.ColumnModel有一个名为“ renderer”的配置选项。 我经常将此功能用于Ext并未在config选项中提供的样式或DOM操作。 您可以尝试使用renderer函数并返回带有自定义样式的HTML字符串，该样式不会强制对数据进行换行。

例如，

renderer: function(value, metadata, record, rowIndex, colIndex, store) {
    var style = 'overflow:hidden; white-space: nowrap; width: 100px;',
        html = '<span style="' + style + '">' + value + '</span>';

    return html;
}

其中“宽度”（在这种情况下为100px）是您在列中定义的宽度。

Answer 3

经过进一步的测试后，我没有找到想要的解决方案，但是我通过使用渲染器而不是fieldDataGrey id并使用列布局而不是fieldDataGrey布局来部分修复了它。