PDA

View Full Version : Grid row checking independent of selection



Animal
1 Apr 2008, 1:38 AM
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
2 Apr 2008, 7:15 AM
nice! works perfectly... thanks

KevinChristensen
16 Apr 2008, 11:16 AM
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
26 Jun 2008, 2:51 AM
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
16 Sep 2008, 11:32 PM
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
16 Sep 2008, 11:45 PM
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
17 Sep 2008, 1:48 AM
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
17 Sep 2008, 2:22 AM
With your plugin can i change the color of the checked rows?

Animal
17 Sep 2008, 3:48 AM
Read the Grid FAQ.

Deramo
18 Sep 2008, 5:49 AM
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
19 Sep 2008, 2:46 AM
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
22 Sep 2008, 8:50 AM
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
23 Sep 2008, 3:40 AM
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
6 Aug 2011, 9:35 AM
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
21 Sep 2011, 10:44 AM
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
8 May 2012, 2:22 AM
Guys, any updates on this for extjs 4.0?