View Full Version : Grouping grid with check boxs [Solved]

22 Jul 2010, 11:12 AM
So I changed jobs a few months back and have not been coding extjs :((
Now I find coding this is really hard work again, Sigh don't stop for 5 months you forget a lot.

I know I can do this but I was hoping someone may have an example.

I wish to have a grouping grid that on each row all but one column has check boxes and you can submit this set of selections back.

Regards Michaelc

29 Jul 2010, 12:37 PM
Resolved based upon an old item by condor.

* Ext JS Library 3.2.1
* Copyright(c) 2006-2010 Ext JS, Inc.
* [email protected]
* http://www.extjs.com/license


var xg = Ext.grid;

// shared reader
var reader = new Ext.data.ArrayReader({}, [
{name: 'group'},
{name: 'speciality'},
{name: 'value'}

var store = new Ext.data.GroupingStore({
reader: reader,
data: xg.dummyData,
sortInfo:{field: 'speciality', direction: "ASC"},

var answers = [
new Ext.grid.RadioColumn({header: 'No experience', inputValue: 1, dataIndex: 'value', width: 80, align: 'center', sortable: true}),
new Ext.grid.RadioColumn({header: 'Limited', inputValue: 2, dataIndex: 'value', width: 75, align: 'center', sortable: true}),
new Ext.grid.RadioColumn({header: 'Competent', inputValue: 3, dataIndex: 'value', width: 75, align: 'center', sortable: true}),
new Ext.grid.RadioColumn({header: 'Good', inputValue: 4, dataIndex: 'value', width: 75, align: 'center', sortable: true}),
new Ext.grid.RadioColumn({header: 'Expert', inputValue: 5, dataIndex: 'value', width: 75, align: 'center', sortable: true})

var columns = [
{header: 'Speciality', dataIndex: 'speciality', width: 100, sortable: true},
{header: "Speciality Group", width: 0, sortable: true, dataIndex: 'group', hidden : true},

var grid = new Ext.grid.EditorGridPanel({
store: store,
plugins: answers,
columns: columns,
view: new Ext.grid.GroupingView({
startCollapsed: true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Specialities" : "Item"]})'

width: 700,
height: 450,
collapsible: true,
animCollapse: false,
title: 'Speciality Groupings',
iconCls: 'icon-grid',
fbar : ['->', {
text:'Save Speciality Selections',
iconCls: 'icon-clear-group',
handler : function(){
// store.clearGrouping();

renderTo: document.body


// Array data for the grids
Ext.grid.dummyData = [
['Clinical population','Cancer',1],
['Clinical population','Cardiovascular',2],
['Clinical population','Mental health',3],
['Clinical population','Kidney diseases',4],
['Study designs','Cluster-randomized trials',5],
['Study designs','Registries',5],
['Study designs','Retrospective comparative cohorts',5],
['Study designs','Retrospective prognostic cohorts',0],
['Intervention/exposure & controls','Drugs & biologics',0],
['Intervention/exposure & controls','Vaccines',1],
['Intervention/exposure & controls','Devices & procedures',4],
['Intervention/exposure & controls','Disease management',4],
['Outcomes','Patient-reported outcomes',4],
['Outcomes','Physician-adjudicated harms',3],
['Outcomes','Quality of care',3],
['Statistical analysis','Cox regression',1],
['Statistical analysis','Multiple imputation',0],
['Statistical analysis','Propensity scores',1],
['Statistical analysis','Repeated measures',4],
['Data','Virtual data warehouse',3],
['Data','Patient-reported outcomes',3],
['Data','Retrospective laboratory values',3],
['Data','Natural language processing in HealthConnect',5],
['Study management','Multi-site collaborations',1],
['Study management','Data-use agreements',1],
['Study management','AHRQ-sponsored task orders',3],
['Study management','NIH-sponsored grants',5]