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

Question

I'm using EXT JS 2.3 and looking at an issue that occurs with Internet Explorer 8. If you take a look at the company column in an example on this page , It is cutting off the lines that are too long such as EI du Pont de Nemours and Co... (just an example, not using a simple array grid; just a normal GridPanel)

That is the correct behavior I would like, which is what happens in Firefox, and later versions of Internet Explorer.

However, in Internet Explorer 8 the row is actually wrapping to take up two rows, with the last bit in the second row.

I looked in documentation for 2.3, but not finding any config options that seem to help. I tried setting autoHeight to false, but no effect. Most other questions I find are the reverse, where they want it to wrap but it doesn't.

How can I keep Internet Explorer 8 from wrapping?

Here is the javascript...

Column Model

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

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

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

Field Set

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

Try to use 2.2.1 ExtJs version, or 3.x. The problem I think lays in the Ext.js module in the Ext distribution, where browser versions are detected.

Answer 2

Ext.grid.ColumnModel has a config option called "renderer." I have used this function often for styling or DOM manipulation that Ext did not provide in the config options. You might try using the renderer function and returning an HTML string with custom styling that forces no wrapping on the data.

For instance,

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

Where "width" (100px in this case) is the width you defined in your column.

Answer 3

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