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 += ' <input type=""checkbox"" id=""'+column.id+'_CHCK"">';
headerHtml += '</div>';
//replace the view headerCell
view.getHeaderCell(columnIndex).innerHTML = headerHtml;
}
columnIndex = columnIndex + 1;
});
};
");
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 += ' <input type=""checkbox"" id=""'+column.id+'_CHCK"">';
headerHtml += '</div>';
//replace the view headerCell
view.getHeaderCell(columnIndex).innerHTML = headerHtml;
}
columnIndex = columnIndex + 1;
});
};
");
No comments:
Post a Comment