ext.net checkbox in grid header

Use Case

Place checkbox (or virtual any custom control to the header)

Solution

Use AfterRender event to override header cell's text.
Inspired by http://extjs-world.blogspot.com/2011/06/how-to-show-image-or-checkbox-html.html



                function afterRender(_grid) {
                     var columns = _grid.getColumnModel().config;
                     var view = _grid.getView();
                     var columnIndex = 0;
                     Ext.each(columns, function(column){
                        if (column.id.indexOf(""IDX"") == 0) {
                            var headerHtml = '<div class=""x-grid""' + columnIndex + '-hd-inner x-grid' + columnIndex + '-hd-' + column.id + '"" unselectable=""on"" style=""text-align: center;"">' + column.header;
                            headerHtml += '&nbsp;<input type=""checkbox"" id=""'+column.id+'_CHCK"">';
                            headerHtml += '</div>';
                            //replace the view headerCell 
                            view.getHeaderCell(columnIndex).innerHTML = headerHtml;
                        }
                        columnIndex = columnIndex + 1;                        
                     });
                };
                ");