Dec 01, 2020, 5:59 AM
Adding select all header to Grid BooleanColumn
This is how I add BooleanColumn column to my Grid by using this example.
HTML
Javascript
And this checkbox should also editable.
HTML
<ext:BooleanColumn runat="server" DataIndex="myField" Text="" Editable="true" Resizable="false"
MenuDisabled="true" MaxWidth="50">
<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
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" })
}And this checkbox should also editable.
Last edited by Steven; Dec 01, 2020 at 6:06 AM.
