Ext version tested:

  • Ext 4.1.3

Browser versions tested against:
  • Chrome
  • IE9

DOCTYPE tested against:
  • <!DOCTYPE html>

  • 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:

<!DOCTYPE html>
    <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"



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.