javascript - Google Chrome 上的 Ext JS Grid 主体宽度问题

Question

Google chrome 中的网格存在表格对齐问题(参见图片)。它在 Firefox 中运行良好。即，最后一列价格值从网格中溢出。可能是网格体宽度问题(小于网格头宽度)。

我使用了下面的代码。

var myData = [
    ['3m Co',                               71.72, 0.02,  0.03,  '9/1 12:00am'],
    ['Alcoa Inc',                           29.01, 0.42,  1.47,  '9/1 12:00am'],
    ['Altria Group Inc',                    83.81, 0.28,  0.34,  '9/1 12:00am'],
    ['American Express Company',            52.55, 0.01,  0.02,  '9/1 12:00am'],
    ['American International Group, Inc.',  64.13, 0.31,  0.49,  '9/1 12:00am']
];

// create the data store
var store = new Ext.data.ArrayStore({
    fields: [
       {name: 'company'},
       {name: 'price',      type: 'float'},
       {name: 'change',     type: 'float'},
       {name: 'pctChange',  type: 'float'},
       {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
    ]
});

// manually load local data
store.loadData(myData);

// create the Grid
var grid = new Ext.grid.GridPanel({
    store: store,
    columns: [
        {
            id       :'company',
            header   : 'Company', 
            width    : 160, 
            sortable : true, 
            dataIndex: 'company'
        },
        {
            header   : 'Change', 
            width    : 75, 
            sortable : true, 
            renderer : change, 
            dataIndex: 'change'
        },
        {
            header   : '% Change', 
            width    : 75, 
            sortable : true, 
            renderer : pctChange, 
            dataIndex: 'pctChange'
        },
        {
            header   : 'Last Updated', 
            width    : 85, 
            sortable : true, 

            renderer : Ext.util.Format.dateRenderer('m/d/Y'), 
            dataIndex: 'lastChange'
        },
        {
            header   : 'Price', 
            width    : 75, 
            sortable : true, 
            renderer : 'usMoney',
            align   : 'right', 
            dataIndex: 'price'
        }
    ],
    stripeRows: true,
    autoExpandColumn: 'company',
    title: 'Array Grid'
});

必须感谢任何帮助...谢谢

Answer 1

这是 Chrome 中的 CSS 问题。您可以通过在 CSS 文件中添加以下代码来摆脱这种情况。

@media screen and (-webkit-min-device-pixel-ratio: 0) { 
    .x-grid3-cell, /* Normal grid cell */
    .x-grid3-gcell { /* Grouped grid cell (esp. in head)*/
        box-sizing: border-box;
    }
}