Try this
Column
<ext:BooleanColumn runat="server" DataIndex="booleanCol" Text="Boolean">
<CustomConfig>
<ext:ConfigItem Name="onTitleElClick" Value="onTitleElClick" Mode="Raw" />
</CustomConfig>
<RenderTpl>
<Html>
<div id="{id}-titleEl" {tipMarkup}class="x-column-header-inner">
<div style="display:inline; float:left;">
<div class="x-grid-checkheader" style="width:22px;"> </div>
</div>
<span id="{id}-textEl" class="x-column-header-text {childElCls}">
{text}
</span>
<tpl if="!menuDisabled">
<div id="{id}-triggerEl" class="x-column-header-trigger {childElCls}"></div>
</tpl>
</div>
{%this.renderContainer(out,values)%}
</Html>
</RenderTpl>
<Listeners>
<AfterRender Fn="initClickOnHeader" />
</Listeners>
</ext:BooleanColumn>
Javascript code
function onTitleElClick (e, t) {
if (!e.getTarget(".x-grid-checkheader")) {
Ext.grid.column.Column.prototype.onTitleElClick.apply(this, arguments);
}
}
function initClickOnHeader (column) {
column.el.on("click", function (e, t) {
var me= this,
grid = this.up('tablepanel'),
store = grid.getStore(),
div = Ext.fly(e.getTarget());
me.checked = !me.checked;
div[me.checked ? "addCls" :"removeCls"]("x-grid-checkheader-checked");
store.suspendEvents();
store.each(function(record){
record.set(me.dataIndex, me.checked);
});
store.resumeEvents();
store.fireEvent("refresh", store);
e.stopEvent();
return false;
}, column, {delegate: ".x-grid-checkheader"})
}
