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