Google Chrome 上的 Ext JS Grid 正文宽度问题答案

【问题标题】：Ext JS Grid body width issue on Google ChromeGoogle Chrome 上的 Ext JS Grid 正文宽度问题
【发布时间】：2013-09-26 12:53:12
【问题描述】：

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

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

【问题讨论】：

图片在哪里或者你的代码是你的图片？

标签： javascript google-chrome extjs extjs3

【解决方案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;
    }
}

【讨论】：