Question

我正在使用EXT JS 2.3并查看Internet Explorer 8中出现的问题。如果您查看this page上的示例中的公司列，那么它也会切断很长，如E.I. 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在配置选项中没有提供的样式或DOM操作。您可以尝试使用渲染器函数并返回带有自定义样式的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;
}

其中“width”（在本例中为100px）是您在列中定义的宽度。

Answer 3

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

EXT JS 2.3; Internet Explorer 8; GridPanel记录Wrap，但不应该

3 个答案: