Search code examples
javascriptgoogle-chromeextjsextjs3

Ext JS Grid body width issue on Google Chrome

There is a table alignment problem on the grid in Google chrome(see the image). Its working fine in firefox. ie, The last column price values overflowing from the grid. It may due to the grid body width issue(which is lesser than that of grid header).

grid body width issue

I have used the below code.

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

Any help is must appreciated...Thankz

Solution

  • It's a CSS issue in Chrome. You can get rid of this by adding the code below in a CSS file.

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