Grid row checking independent of selection

[Animal]

There are use cases when row selection and row checking are two seperate, independent operations.

One example is a mail client.

The selected row might be opened in a preview pane.

You might still be able to check multiple rows to delete, or move, or otherwise operate upon without changing the selection.

Ext.ux.GridRowChecker is a Grid plugin which offers this.

Drop the code below into examples/grid as array-grid.js. It adds Record[] checkChecked(), void checkAll() and void uncheckAll() to its client GridPanel.



Ext.onReady(function(){

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
];

// example of custom renderer function
function change(val){
if(val > 0){
return '<span style="color:green;">' + val + '</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '</span>';
}
return val;
}

// example of custom renderer function
function pctChange(val){
if(val > 0){
return '<span style="color:green;">' + val + '%</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}

// create the data store
var store = new Ext.data.SimpleStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});
store.loadData(myData);

Ext.ux.GridRowChecker = Ext.extend(Object, {
header: "",
width: 23,
sortable: false,
fixed: true,
menuDisabled: true,
dataIndex: '',
id: 'selection-checkbox',
rowspan: undefined,

init: function(grid) {
this.grid = grid;
this.gridSelModel = this.grid.getSelectionModel();
this.gridSelModel.originalMouseDown = this.gridSelModel.handleMouseDown;
this.gridSelModel.handleMouseDown = this.onGridMouseDown;
grid.getColumnModel().config.unshift(this);
grid.getChecked = this.getChecked.createDelegate(this);
grid.checkAll = this.checkAll.createDelegate(this);
grid.uncheckAll = this.uncheckAll.createDelegate(this);
},

renderer: function() {
return '<input class="x-row-checkbox" type="checkbox">';
},

getChecked: function() {
var result = [];
var cb = this.grid.getEl().query("div.x-grid3-col-selection-checkbox > input[type=checkbox]");
var idx = 0;
this.grid.store.each(function(rec) {
if (cb[idx++].checked) {
result.push(rec);
}
});
delete cb;
return result;
},

checkAll: function() {
this.grid.getEl().select("div.x-grid3-col-selection-checkbox > input[type='checkbox']").each(function(e){
e.dom.checked = true;
});
},

uncheckAll: function() {
this.grid.getEl().select("div.x-grid3-col-selection-checkbox > input[type='checkbox']").each(function(e){
e.dom.checked = false;
});
},

onGridMouseDown: function(g, rowIndex, e) {
if (e.getTarget('div.x-grid3-col-selection-checkbox')) {
e.stopEvent();
return false;
}
this.originalMouseDown.apply(this, arguments);
}
});

// create the Grid
window.grid = new Ext.grid.GridPanel({
store: store,
plugins: [ new Ext.ux.GridRowChecker() ],
columns: [
{id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
{header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
{header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
{header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
stripeRows: true,
autoExpandColumn: 'company',
height:350,
width:600,
title:'Array Grid'
});

grid.render('grid-example');
grid.getSelectionModel().selectFirstRow();
});

[bhaidaya]

nice! works perfectly... thanks

[KevinChristensen]

Animal,
Really nice plug-in and I'm still learning about plug-ins so I may be missing the obvious.

Is it be possible to pass a config option to this plug-in to allow attributes like header and width to be changed?

Something like:

plugins: [ new Ext.ux.GridRowChecker({header:'Del',width:30}) ],

[fsx]

Nice work Animal!

This will give you the config options that you requested. If you bind to a boolean datasource it'll check the boxes upon loading.



Ext.ux.GridRowChecker = function(config)
{
if(typeof config != 'undefined')
{
if(typeof config.header != 'undefined') this.header = config.header;
if(typeof config.dataIndex != 'undefined') this.dataIndex = config.dataIndex;
if(typeof config.width != 'undefined') this.width = config.width;
}
}
Ext.extend(Ext.ux.GridRowChecker, Object, {
header: '',
width: 23,
sortable: false,
fixed: true,
menuDisabled: true,
dataIndex: '',
id: 'selection-checkbox',
rowspan: undefined,
init: function(grid) {
this.grid = grid;
this.gridSelModel = this.grid.getSelectionModel();
this.gridSelModel.originalMouseDown = this.gridSelModel.handleMouseDown;
this.gridSelModel.handleMouseDown = this.onGridMouseDown;
grid.getColumnModel().config.unshift(this); // Places this column first
grid.getChecked = this.getChecked.createDelegate(this);
grid.checkAll = this.checkAll.createDelegate(this);
grid.uncheckAll = this.uncheckAll.createDelegate(this);
},
renderer: function(value) {
return '<input class="x-row-checkbox" type="checkbox" ' + (value ? 'checked' : '') + '>';
},
getChecked: function() {
var result = [];
var cb = this.grid.getEl().query("div.x-grid3-col-selection-checkbox > input[type=checkbox]");
var idx = 0;
this.grid.store.each(function(rec) {
if (cb[idx++].checked) {
result.push(rec);
}
});
delete cb;
return result;
},
checkAll: function() {
this.grid.getEl().select("div.x-grid3-col-selection-checkbox > input[type='checkbox']").each(function(e){
e.dom.checked = true;
});
},
uncheckAll: function() {
this.grid.getEl().select("div.x-grid3-col-selection-checkbox > input[type='checkbox']").each(function(e){
e.dom.checked = false;
});
},
onGridMouseDown: function(g, rowIndex, e) {
if (e.getTarget('div.x-grid3-col-selection-checkbox')) {
e.stopEvent();
return false;
}
this.originalMouseDown.apply(this, arguments);
}
});

[priyanka_iknip]

Hi

By using your plugins i am not able to fetched the Checked rows? Please tell me what to do? Its returning me [object : Object]. When i am using getValue function then it is returning me "undefined".

[Animal]

Hi

By using your plugins i am not able to fetched the Checked rows? Please tell me what to do? Its returning me [object : Object]. When i am using getValue function then it is returning me "undefined".

getChecked returns an Array of Records.

[priyanka_iknip]

Ya i know it fetches array of records but i am not able to manipulate it. I am able to display the length but not the data. Please help in that

[priyanka_iknip]

With your plugin can i change the color of the checked rows?

[Animal]

Read the Grid FAQ.

[Deramo]

Hi,

First thanks for this plugin, exactly what i need! but the Row height changes when using the checkbox in IE 7. but it works fine in FF and chrome.

Attached is a screen shot.
Thnx

[priyanka_iknip]

Hi Animal

I am not able to use your plugin in my JSP project. It is only showing check boxes and not Data. Plz help

[haisrinu143]

This plugin works fine in FF. But in IE 6.0 or 7.0 the height of each row is bigger than normal. Vertical alignment for columns other than check box is not proper. Please let me know if there is a fix for this.

Thanks & Regards,
haisrinu143

[priyanka_iknip]

Hi
Can i add row number just before the check box? When i am using RowNumberer then it is adding row number after the check box?

[sarasool]

Hi Everyone,

I need similar plugin for Extjs 4.0 when i try to run the Ext.ux.GridRowChecker in 4.0 envi its gives me errors on below lines of code:

grid.getColumnModel().config.unshift(this);
grid.getChecked = this.getChecked.createDelegate(this);
grid.checkAll = this.checkAll.createDelegate(this);
grid.uncheckAll = this.uncheckAll.createDelegate(this);

I went through the grid 4.0 api documenation and could not find getColumnModel().

Please help me in running this example in Ext 4.0.2 environment.

Thank you
Abdul.

[nosklo]

I need similar plugin for Extjs 4.0 when i try to run the Ext.ux.GridRowChecker in 4.0 envi its gives me errors on below lines of code:


I have the same problem. Trying to find a solution now... If you find a solution for ext4, please update this thread. Thanks!

[nKamate]

Guys, any updates on this for extjs 4.0?