In a grid with a fixed-width col and forceFit: true, hiding columns breaks rendering

**minneyar** · 11 Mar 2011 3:21 PM

Ext version tested:

Ext 3.3.1

Adapter used:

prototype

css used:

ext-all.css

Browser versions tested against:

Chromium 12.0.700.0
FF3.6.15 (firebug 1.6.2 installed)

Operating System:

Ubuntu Linux 10.10

Description:

If you have a GridPanel whose viewConfig contains "forceFit: true" and it has a column width "fixed: true", if you hide all of the columns but the one with the fixed with, when you then un-hide any other column, the grid rendering breaks horribly.

Test Case:

This example is based on the official Array Grid example. The code has been modified to show off this particular bug.

Code:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Grid Example</title>

    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />


    <style type=text/css>
        /* style rows on mouseover */
        .x-grid3-row-over .x-grid3-cell-inner {
            font-weight: bold;
        }

        /* style for the "buy" ActionColumn icon */
        .x-action-col-cell img.buy-col {
            height: 16px;
            width: 16px;
            background-image: url(../shared/icons/fam/accept.png);
        }

        /* style for the "alert" ActionColumn icon */
        .x-action-col-cell img.alert-col {
            height: 16px;
            width: 16px;
            background-image: url(../shared/icons/fam/error.png);
        }

    </style>

    <!-- ** Javascript ** -->
    <!-- ExtJS library: base/adapter -->
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>

    <!-- ExtJS library: all widgets -->
    <script type="text/javascript" src="../../ext-all.js"></script>

    <!-- overrides to base library -->

    <script type="text/javascript">Ext.onReady(function(){
    Ext.QuickTips.init();

    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

    // 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'],
    ];

    /**
     * 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 = 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   : 'Price', 
                width    : 75, 
                sortable : true, 
                renderer : 'usMoney', 
                dataIndex: 'price'
            },
            {
                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'
            },
            {
                xtype: 'actioncolumn',
                fixed: true,
                width: 50,
                items: [{
                    icon   : '../shared/icons/fam/delete.gif',  // Use a URL in the icon config
                    tooltip: 'Sell stock',
                    handler: function(grid, rowIndex, colIndex) {
                        var rec = store.getAt(rowIndex);
                        alert("Sell " + rec.get('company'));
                    }
                }, {
                    getClass: function(v, meta, rec) {          // Or return a class from a function
                        if (rec.get('change') < 0) {
                            this.items[1].tooltip = 'Do not buy!';
                            return 'alert-col';
                        } else {
                            this.items[1].tooltip = 'Buy stock';
                            return 'buy-col';
                        }
                    },
                    handler: function(grid, rowIndex, colIndex) {
                        var rec = store.getAt(rowIndex);
                        alert("Buy " + rec.get('company'));
                    }
                }]
            }
        ],
        stripeRows: true,
        //autoExpandColumn: 'company',
        height: 350,
        width: 600,
        title: 'Array Grid',
        // config options for stateful behavior
        stateful: true,
        stateId: 'grid',
        viewConfig: {
            forceFit: true
        }
    });

    // render the grid to the specified div in the page
    grid.render('grid-example');
});
</script>
</head>
<body>
    <h1>Grid Example</h1>
    <div id="grid-example"></div>
</body>
</html>

Steps to reproduce the problem:

Click on the menu for the "Company" column header.
Hide every column except the last one (which has no header text).
Show any other column.
At this point, the grid rendering should be obviously broken.
Not only is it broken now, but the broken state persists through the cookie that saves the grid state, and it will continue to be broken after the page is reloaded, until the cookie is removed.

The result that was expected:

The hidden columns should reappear and the grid should render normally.

The result that occurs instead:

The space between grid columns is far too large. After reloading the page, there is no space at all, and grid column contents all run together.

Screenshot or Video:

Attached; brokengrid1.jpg: The appearance of the grid after showing one of the previously hidden columns.
Attached; brokengrid2.jpg: The appearance of the grid after showing all columns and reloading the page.

Debugging already done:

none

Possible fix:

not provided

**minneyar** · 11 Mar 2011 3:23 PM

Oops, I forgot to attach the screenshots...

**ramana_l_v** · 22 Aug 2011 2:04 PM

I am facing similar problem, Is there a solution found for this ?

Thanks in advance...

In a grid with a fixed-width col and forceFit: true, hiding columns breaks rendering

Thread Tools

Search Thread

Display

In a grid with a fixed-width col and forceFit: true, hiding columns breaks rendering

In a grid with a fixed-width col and forceFit: true, hiding columns breaks rendering

Similar Threads

Editorgrid, width of columns and fixed:true

[FIXED-958][2.2.1 - 3.0] Grid forceFit hide/show width problem

Grid forceFit and fixed column width

Grid 100% width with some columns with fixed width

Tags for this Thread