Problem with Locking Grid

[jhoweaa]

REQUIRED INFORMATION

Ext version tested:

• Ext 4.1.1a (also 4.2.0 beta)

Browser versions tested against:

• Firefox 17.0.1 (Windows 7)

Description:

I'm trying to create a grid which is using a locked first column. I want to use grouped headings for my columns. Even though the first column doesn't need a grouped heading, I wanted the first column name to appear on the same line as the remaining column names. I gave the first column a grouped header and locked it. When the grid is displayed, the first column does not get the proper width. If you resize the column by just a couple of pixels, it will resize to the width defined in the code. I also noticed that if you use a double line header ('Company<br/>Name') the remaining columns do not render properly (see image below)

Steps to reproduce the problem:

• Create a grid with grouped column headers. Make the first grouped header a single column and lock the column. Set a width on the column to something moderately wide (200px, for example)

The result that was expected:

• The grid should display with a locked first column of 200 px (or whatever the width was that was set in the code)

The result that occurs instead:

• When the window is displayed, the locked column is very narrow. If you click on the column separator and drag it a couple of pixels and release, the column will resize the the proper width.

Test Case:

I modified the locking-grid.js file found in the examples. The key change occurs around line 86 where I changed the column definitions to use a grouping header. There is one grouping header for the first column, which is also the locked column, and a second grouping header for the remaining columns.

Ext.QuickTips.init();

        // sample static data for the store
        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'],
            ['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am'],
            ['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am'],
            ['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am'],
            ['Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am'],
            ['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am'],
            ['Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am'],
            ['General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am'],
            ['General Motors Corporation', 30.27, 1.09, 3.74, '9/1 12:00am'],
            ['Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am'],
            ['Honeywell Intl Inc', 38.77, 0.05, 0.13, '9/1 12:00am'],
            ['Intel Corporation', 19.88, 0.31, 1.58, '9/1 12:00am'],
            ['International Business Machines', 81.41, 0.44, 0.54, '9/1 12:00am'],
            ['Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am'],
            ['JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am'],
            ['McDonald\'s Corporation', 36.76, 0.86, 2.40, '9/1 12:00am'],
            ['Merck & Co., Inc.', 40.96, 0.41, 1.01, '9/1 12:00am'],
            ['Microsoft Corporation', 25.84, 0.14, 0.54, '9/1 12:00am'],
            ['Pfizer Inc', 27.96, 0.4, 1.45, '9/1 12:00am'],
            ['The Coca-Cola Company', 45.07, 0.26, 0.58, '9/1 12:00am'],
            ['The Home Depot, Inc.', 34.64, 0.35, 1.02, '9/1 12:00am'],
            ['The Procter & Gamble Company', 61.91, 0.01, 0.02, '9/1 12:00am'],
            ['United Technologies Corporation', 63.26, 0.55, 0.88, '9/1 12:00am'],
            ['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am'],
            ['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am']
        ];

        /**
         * Custom function used for column renderer
         * @param {Object} val
         */
        function change(val) {
            if (val > 0) {
                return '<span style="color:green;">' + val + '</span>';
            } else if (val < 0) {
                return '<span style="color:red;">' + val + '</span>';
            }
            return val;
        }

        /**
         * Custom function used for column renderer
         * @param {Object} val
         */
        function pctChange(val) {
            if (val > 0) {
                return '<span style="color:green;">' + val + '%</span>';
            } else if (val < 0) {
                return '<span style="color:red;">' + val + '%</span>';
            }
            return val;
        }

        // create the data store
        var store = Ext.create('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'}
            ],
            data   : myData
        });

        // create the Grid
        var grid = Ext.create('Ext.grid.Panel', {
            store       : store,
            columnLines : true,
            columns     : [
                // ***** Key Change Here, switched to using grouped headers, with the first header/column locked *****//
                {
                    text    : '&nbsp;',
                    locked  : true,
                    columns : [
                        {
                            text      : 'Company<br/>Name', // Two line header! Test header height synchronization!
                            locked    : true,
                            width     : 200,
                            sortable  : false,
                            dataIndex : 'company'
                        }
                    ]
                },
                {
                    text    : 'Statistics',
                    columns : [
                        {
                            text      : 'Price',
                            width     : 125,
                            sortable  : true,
                            renderer  : 'usMoney',
                            dataIndex : 'price'
                        },
                        {
                            text      : 'Change',
                            width     : 125,
                            sortable  : true,
                            renderer  : change,
                            dataIndex : 'change'
                        },
                        {
                            text      : '% Change',
                            width     : 125,
                            sortable  : true,
                            renderer  : pctChange,
                            dataIndex : 'pctChange'
                        },
                        {
                            text      : 'Last Updated',
                            width     : 135,
                            sortable  : true,
                            renderer  : Ext.util.Format.dateRenderer('m/d/Y'),
                            dataIndex : 'lastChange'
                        }
                    ]
                }
            ],
            height      : 350,
            width       : 600,
            title       : 'Locking Grid Column',
            renderTo    : document.body,
            viewConfig  : {
                stripeRows : true
            }
        });

HELPFUL INFORMATION

Screenshot - Note the first column is not 200 pixels as specified in the code. Also note that the column separators in the other columns do not go all the way down. This is an artifact of the <br/> used in the first column name.

locked.png
Operating System:

• Windows 7

[mitchellsimoens]

Thanks for the report! I have opened a bug in our bug tracker.