PDA

View Full Version : ExtJS 4.2 checkcolumn with checkbox in header (NOT CheckboxSelectionModel!)



jkyoutsey
14 Jun 2013, 8:50 AM
I do NOT want to use CheckboxSelectionModel. It doesn't work as I need. I tried that and it didn't work out to the user experience we wanted. So, I'm just using a straight checkcolumn. I want to render a checkbox in the header and respond to it's events. I want to use the artificial CSS based checkbox from ExtJS, not an actual form checkbox.

I tried this:

this.columns[0].setText('<div class="' + cls.join(' ') + ' ' + Ext.baseCSSPrefix + 'column-header-text">&#160;</div>');

I tried it with various classes to no avail. Any hints would be greatly appreciated!

slemmon
16 Jun 2013, 11:07 PM
Check out the source code for the checkboxmodel selection model. In the getHeaderConfig you can see how the header for the column is set up so that is displays a CSS checkbox.

Then a headerclick listener is set up that calls onHeaderClick.

You can use those code snippets to extend checkcolumn and make your own header / header click listener as needed.

jkyoutsey
21 Jun 2013, 11:58 AM
I've dug at this and don't see how to affect the header. I see how to configure it, but I don't see how to apply that configuration to the header. I see that the CheckboxModel calls headerCt.add(checkbox, me.getHeaderConfig()); But view.headerCt is not documented and I don't understand how the config is applied. In my case, I do NOT want to ADD but I want to REPLACE/UPDATE just the cls on view.headerCt.items.items[0]. But it's not clear how to do that and I've tried six ways to sunday to make it work with no effect...
Something like this:

var cssClass = Ext.baseCSSPrefix + 'column-header-checkbox';
if (allSelected) {
cssClass += '-checked';
} else if (oneOrMoreSelected) {
cssClass += '-tristate';
}
debugger;
this.getView().headerCt.items.items[0].componentCls = cssClass;

I'm surprised how hard this is. I would think that a checkcolumn would allow me to put a checkbox in the header with less effort.

slemmon
27 Jun 2013, 11:48 AM
The below snippet only gets you so far, but might help get you started. I pulled the config from checkboxmodel's getHeaderConfig method and modified it slightly and set that as the config for the My.ux.CheckColumn class extending the ExtJS CheckColumn class:



Ext.define('My.ux.checkcolumn', {
extend: 'Ext.grid.column.CheckColumn',
alias: 'widget.mycheckcolumn',


text : '&#160;',
sortable: false,
draggable: false,
resizable: false,
hideable: false,
menuDisabled: true,
cls: Ext.baseCSSPrefix + 'column-header-checkbox'
});




var store = Ext.create('Ext.data.Store', {
fields : ['name', 'email', 'phone', 'active'],
data : {
items : [
{ name : 'Lisa', email : 'lisa@simpsons.com', phone : '555-111-1224', active : true },
{ name : 'Bart', email : 'bart@simpsons.com', phone : '555-222-1234', active : true },
{ name : 'Homer', email : 'home@simpsons.com', phone : '555-222-1244', active : false },
{ name : 'Marge', email : 'marge@simpsons.com', phone : '555-222-1254', active : true }
]
},
proxy : {
type : 'memory',
reader : {
type : 'json',
root : 'items'
}
}
});


Ext.create('Ext.grid.Panel', {
title : 'Simpsons',
height : 200,
width : 400,
renderTo : Ext.getBody(),
store : store,
columns : [
{ text : 'Name', dataIndex : 'name' },
{ text : 'Email', dataIndex : 'email', flex : 1 },
{ text : 'Phone', dataIndex : 'phone' },
{ xtype : 'mycheckcolumn', text : 'Active', dataIndex : 'active', width: 30 }
]
});