REQUIRED INFORMATION

Ext version tested:
  • Ext 4.1.3
Browser versions tested against:
  • Chrome
  • IE9
DOCTYPE tested against:
  • <!DOCTYPE html>
Description:
  • A renderer of a hidden column can cause some undesired effect. I think nothing stops me to return "<div style='height: 50px;'></div>" from a renderer. But this cause increasing of rows height. I would expect that hidden column should not affect on rendering process this way.
  • I understand it can be hard to fix. Maybe an option like "renderHiddenColumns: true|false"? By the way, it could be good in the performance aspect as well.
Steps to reproduce the problem:
  • Just run the sample
The result that was expected:
  • Default row height
The result that occurs instead:
  • Row height is increased because of the renderer oh the hidden column
Test Case:

Code:
<!DOCTYPE html>
<html>
<head>
    <title>Grid hidden column renderer</title>

    <link type="text/css" rel="stylesheet" href="../resources/css/ext-all.css" />
    
    <script type="text/javascript" src="../ext-all-debug.js"></script>

    <script type="text/javascript">
        Ext.onReady(function () {
            Ext.create("Ext.grid.Panel", {
                renderTo: Ext.getBody(),
                store: {
                    autoLoad: true,
                    fields: [{
                        name: "test1"
                    }, {
                        name: "test2"
                    }],
                    proxy : {
                        type: "memory",
                        reader: {
                            type: "array"
                        },
                        data: [
                            ["test1", "test2", "test3"],
                            ["test4", "test5", "test6"],
                            ["test7", "test8", "test9"]
                        ]
                    }
                },
                columns: {
                    items: [{
                        dataIndex: "test1",
                        text: "Test"
                    }, {
                        hidden: true,
                        dataIndex: "test2",
                        renderer: function () { 
                            return "<div style='height: 50px;'></div>" 
                        },
                        text: "Hidden column"
                    }]
                }
            });
        });
    </script>
</head>
<body>

</body>
</html>


HELPFUL INFORMATION


Possible workaround:
  • Check the column's hidden property with the renderer. Return nothing if it is hidden.
  • Refresh the view if the column is shown. It can be done in a column's show listener.