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布局來部分修復了它。