{"id":42,"date":"2012-09-15T23:17:00","date_gmt":"2012-09-15T23:17:00","guid":{"rendered":"http:\/\/tpodolak.com.hostingasp.pl\/blog\/2012\/09\/15\/extjs-4-1-1-how-to-fix-row-resize-phenomena\/"},"modified":"2016-01-31T00:07:22","modified_gmt":"2016-01-31T00:07:22","slug":"extjs-4-1-1-how-to-fix-row-resize-phenomena","status":"publish","type":"post","link":"https:\/\/tpodolak.com\/blog\/2012\/09\/15\/extjs-4-1-1-how-to-fix-row-resize-phenomena\/","title":{"rendered":"Extjs 4.1.1 – how to fix row resize phenomena"},"content":{"rendered":"

Recently I’ve encountered annoying problem with extjs grid. After hiding columns with long wrapped text, height of rows was dramatically increased. Here are some screens presenting this particular situation. Grid with all columns shown;
\n\"problembeforeshow\"<\/a>
\nand grid with one column hidden
\n\"row<\/a>
\nThe code responsible for rendering this grid is shown below<\/p>\n

\r\n.x-grid-cell-inner { white-space: normal; }\r\n<\/pre>\n
\r\nExt.onReady(function () {\r\n        Ext.QuickTips.init();\r\n        var store = Ext.create('Ext.data.Store', {\r\n            fields: ['Id', 'firstname', 'lastname'],\r\n            data: {\r\n                items: [{\r\n                    Id: 1,\r\n                    firstname: 'some long text some long text some long text some long text some long text some long text some long text some long text some long textareasome long textareasome long textarea',\r\n                    lastname: 'Smith'\r\n                },{\r\n                    Id: 1,\r\n                    firstname: 'Mat'\r\n                },{\r\n                    Id: 1,\r\n                    firstname: 'Kate',\r\n                    lastname: 'Smith'\r\n                },{\r\n                    Id: 1,\r\n                    firstname: 'Richard',\r\n                    lastname: 'Smith'\r\n                }]\r\n            },\r\n            proxy: {\r\n                type: 'memory',\r\n                reader: {\r\n                    type: 'json',\r\n                    root: 'items'\r\n                }\r\n            }\r\n        });\r\n\r\n       var visible = true;\r\n       var grid = Ext.create('Ext.grid.Panel', {\r\n            store: store,\r\n            renderTo: Ext.getBody(),\r\n            columns: [\r\n                      { text: 'Id', dataIndex: 'Id' },\r\n                      { text: 'First name', dataIndex: 'firstname' },\r\n                      { text: 'Last name', dataIndex: 'lastname' }]});\r\n\r\n        Ext.create('Ext.button.Button', {\r\n            text: 'click',\r\n            renderTo: Ext.getBody(),\r\n            handler: function() {\r\n                visible = !visible;\r\n                grid.columns[1].setVisible(visible);\r\n                grid.validate();\r\n            }\r\n        });\r\n    });\r\n<\/pre>\n
After some digging, it turned out that Extjs hides columns by setting their width to 0px. In order to solve this problem and preverse text wrap in cells, I implemented small workaround. Let’s start from creating CSS class which disables word wrapping in grid cells.<\/p>\n
\r\n.noWrap .x-grid-cell-inner {white-space: nowrap;}\r\n<\/pre>\n
Next, we have to start listening for two events<\/p>\n