[Solved]Check box all on/off in a grid model

[michaelc]

Not positive how to set this up, I would guess many of you have done this several times.

I have a grid with a checkbox column, I want to have a check box in the header that unchecks/checks all the rows, do you have a possible example ?

been writing documents and specs and test cases for 2 months, I feel lost again.

[ENEMYoftheSUN]

Hello

maybe you can try this:


var store = new Ext.data.Store ({ /* YOUR STORE CONFIG */ });
var cbSM = new Ext.grid.CheckboxSelectionModel ();
var cm = [
cbSM,
{ id: 'sqlid', hidden: true, header: "sqlid", dataIndex: 'sqlid' },
{ header: "Col1", dataIndex: 'data1', sortable: true},
{ header: "Col2", dataIndex: 'data2', sortable: true}
];

var sGrid = new Ext.grid.GridPanel ({
id: "gridID",
stripeRows: true,
loadMask: true,
store: store,
columns: cm,
sm: cbSM
});


The code is not usable "as is", but you get the idea i guess :)

[michaelc]

I expected I needed to use a CheckColumn something like this


var cbsmAction = new Ext.grid.CheckColumn({
header: new Ext.grid.CheckboxSelectionModel (),
dataIndex: 'action',
width: 20
});


I expect I need to use a EditorGridPanel and a CheckColumn box.

what you had shown set on a given line but the check box in the header you can't check on or off and that's what I was looking for

[ENEMYoftheSUN]

Actually, you get a checkbox in the header :)
Take a look at the column model ("cm"), the first item in the array is an instance of the class "CheckboxSelectionModel".

Sorry for bad english.

[michaelc]

Actually, you get a checkbox in the header :)
Take a look at the column model ("cm"), the first item in the array is an instance of the class "CheckboxSelectionModel".

Sorry for bad english.


True you do get a checkbox in the header but it's locked you can't check it or uncheck it.
I also wanted the checkbox's to keep a state and not uncheck based upon line selection.

p.s.
don't worry about your english it's excellent, heck it's my primary language and I still butcher it, in some of my notes :)

[NoahK17]

Take a look at: http://extjs.com/forum/showthread.php?t=37588

[michaelc]

Take a look at: http://extjs.com/forum/showthread.php?t=37588

Wow Thanks, that's it.
well almost, there is allways an almost :D

it does all I want it to except that the initial state does not show correctly in the check boxes.
it allways shows all of the boxes as checked, 1/2 should not be chceked.

at this point I don't see my mistake possible to enlighten me ?


QoDesk.Schedule = Ext.extend(Ext.app.Module, {

moduleType : 'demo',
moduleId : 'if-da-schedule',

init : function() {
this.launcher = {
handler : this.createWindow,
iconCls : 'icon-grid',
scope : this,
shortcutIconCls : 'demo-grid-shortcut',
text : 'Data Access Scheduler',
tooltip : '<b>Data access acheduler</b><br />Data access scheduler'
}
},

createWindow : function() {
var desktop = this.app.getDesktop();
var win = desktop.getWindow('if-da-schedule');

if (!win) {
var sm = new Ext.grid.SmartCheckboxSelectionModel({
dataIndex:'action',
email: true, // separates checkbox clicking from row selecting
alwaysSelectOnCheck: true
});

var grid = new Ext.grid.GridPanel({
autoExpandColumn : 'company',
border : false,
ds : new Ext.data.Store({
reader : new Ext.data.ArrayReader({}, [{
name : 'application'
}, {
name : 'id'
}, {
name : 'type'
}, {
name : 'userName'
}, {
name : 'userEmail'
}, {
name : 'nextDate'
}, {
name : 'frequency'
}, {
name : 'status'
}, {
name : 'action'
}]),
data : Ext.grid.dummyData
}),
cm : new Ext.grid.ColumnModel([sm, {
header : "Schedule Name",
width : 70,
sortable : true,
dataIndex : 'application'
}, {
header : "Data Access",
width : 70,
sortable : true,
dataIndex : 'type'
}, {
header : "Created by",
width : 70,
sortable : true,
dataIndex : 'userName'
}, {
header : "Last Run",
width : 100,
sortable : true,
dataIndex : 'nextDate'
}, {
header : "Frequency",
width : 100,
sortable : true,
dataIndex : 'frequency'
}, {
header : "Status",
width : 70,
sortable : true,
dataIndex : 'status'
}, {
header : "Action",
width : 70,
sortable : true,
dataIndex : 'action'
}]),
shadow : false,
shadowOffset : 0,
// plugins : checkColumn,
sm : sm,
tbar : [{
text : 'Add',
tooltip : 'Add a new Schedule',
iconCls : 'demo-grid-add'
}, '-', {
text : 'Remove',
tooltip : 'Remove a selected Schedule',
iconCls : 'demo-grid-remove'
}],
viewConfig : {
forceFit : true
}
});


win = desktop.createWindow({
id : 'if-da-schedule',
title : 'Data access schedule',
width : 850,
height : 600,
iconCls : 'icon-grid',
shim : false,
animCollapse : false,
constrainHeader : true,
layout : 'fit',
items : grid,
taskbuttonTooltip : '<b>Data access acheduler</b><br />Data access scheduler'
});

}

win.show();
}
});

// Array data for the grid
Ext.grid.dummyData = [
['Terminal-pc', 340, 'Data', 'Sam Sur', '[email protected]',
'Thursday 9/1 12:00am',
'Weekly: every 2 weeks on: Monday, Wensday, Friday', 'Active',
'true'],
['i-Recipe', 341, 'Data', 'Sam Sur', '[email protected]',
'Thursday 9/1 12:00am', 'Monthly: 18th of every 4 month ',
'Active', 'true'],
['i-Metri', 342, 'Data', 'Sam Sur', '[email protected]',
'Thursday 9/1 12:00am', 'Monthly: 18th of every 4 month ',
'Suspended', 'false'],
['Terminal-pc', 343, 'Data', 'Michael C Ford',
'[email protected]', 'Thursday 9/1 12:00am',
'Weekly: every 2 weeks on: Monday, Wensday, Friday', 'Active',
'true'],
['i-Recipe', 344, 'Data', 'Michael C Ford',
'Michael.Fo[email protected]', 'Thursday 9/1 12:00am',
'Monthly: 18th of every 4 month ', 'Active', 'false'],
['i-Metri', 345, 'Data', 'Michael C Ford',
'[email protected]', 'Thursday 9/1 12:00am',
'Monthly: 18th of every 4 month ', 'Suspended', 'true'],
['Terminal-pc', 343, 'Data', 'Amit Parikh',
'[email protected]', 'Thursday 9/1 12:00am',
'Weekly: every 2 weeks on: Monday, Wensday, Friday', 'Active',
'false'],
['i-Recipe', 344, 'Data', 'Amit Parikh', '[email protected]',
'Thursday 9/1 12:00am', 'Monthly: 18th of every 4 month ',
'Active', 'true'],
['i-Metri', 345, 'Data', 'Amit Parikh', '[email protected]',
'Thursday 9/1 12:00am', 'Monthly: 18th of every 4 month ',
'Suspended', 'true']];

[NoahK17]

I havent had time to look at my code in a while, but try changing your "action" dataIndex to "checked" when defining the selection model.

Also, try changing "ds" to "store" -- I don't know if ExtJS converts the shortcut string in the code, but using the SmartCheckboxSelectionModel, it looks for the grid.store, and checks the proper rows when the store loads.

[michaelc]

I found it
I had to debug the code for a while before I got the answer.

in my data I had 'true' and 'false' vs true and false. \
this equated to a string vs a Boolean value. I change it and it worked thanks.


Ext.grid.dummyData = [
['Terminal-pc', 340, 'Data', 'Sam Sur', '[email protected]',
'Thursday 9/1 12:00am',
'Weekly: every 2 weeks on: Monday, Wensday, Friday', 'Active',
true],
['i-Recipe', 341, 'Data', 'Sam Sur', '[email protected]',
'Thursday 9/1 12:00am', 'Monthly: 18th of every 4 month ',
'Active', false],
['i-Metri', 342, 'Data', 'Sam Sur', '[email protected]',
'Thursday 9/1 12:00am', 'Monthly: 18th of every 4 month ',
'Suspended',false]
];