PDA

View Full Version : how to manipulate checkbox in grid panel



jackiewkc
21 Dec 2009, 4:21 AM
Hi,

I am using a grid plugin to display some data. The one I use is the second one in this link: http://localhost:8860/jackie/js/ext-3.0.3/examples/grid/grid-plugins.html which is the one with the checkbox.

This grid plugin allows users to select multiple records. I was wondering whether it's possible to only allows users to select one record. i.e. if no box is checked, a user can check any one of the boxes he wants. If a box is already checked and a user is trying to check another box, then the new one will be checked and the previous will be unchecked.

Also how can I disable t=the checkbox at the title bar in order not to allow users to do a select all?

Thanks.

Regards,
Jackie

jackiewkc
21 Dec 2009, 6:49 AM
oops, just realise that I posted a link to my local host. so here's the code of the grid that I was talking about:

var xg = new Ext.grid;

var sm = new xg.CheckboxSelectionModel();
var grid2 = new xg.GridPanel({
store: new Ext.data.Store({
reader: reader,
data: xg.dummyData
}),
cm: new xg.ColumnModel({
defaults: {
width: 120,
sortable: true
},
columns: [
sm,
{id:'company',header: "Company", width: 200, dataIndex: 'company'},
{header: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", dataIndex: 'change'},
{header: "% Change", dataIndex: 'pctChange'},
{header: "Last Updated", width: 135, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]
}),
sm: sm,
columnLines: true,
width:600,
height:300,
frame:true,
title:'Framed with Checkbox Selection and Horizontal Scrolling',
iconCls:'icon-grid',
renderTo: document.body
});


Any suggestion would be greatly appreciated.

Regards,
Jackie

Mike Robinson
21 Dec 2009, 8:05 AM
If the selection-model object supports "multiple selection" then more than one row can be selected.

Your code superficially appears to be structured correctly. For the benefit of the "Peanut Gallery," here is an important gotcha:


A single "row selection model" object must be assigned both as the "selModel" ("sm") property and as one of the "columns."
Behavior will not be correct if two such objects are being used. If you use "xtypes" to declare these things, ExtJS will instantiate two instances and these will not be able to talk to one another.
The same principles apply in other cases, e.g. "plugins" that are designed to be used as components in UI objects like grids-n-such. One object-instance must be created ahead-of-time and used both in the "plugins" list and elsewhere in the object.

jackiewkc
21 Dec 2009, 8:19 AM
Hi Mike,

Thanks for the reply.

Unfortunately I am quite new to extjs. Is it possible for you to give me some advice on how I should update my code in order to do what I want it to do?

Thanks for again for you help and i really appreciate it.

Regards,
Jackie

jackiewkc
21 Dec 2009, 3:29 PM
Hi,

Anyone got any idea how this can be done? Any suggestion would be greatly appreciated.

Regards,
Jackie

jackiewkc
24 Dec 2009, 2:38 AM
Anyone got any advice?

Thanks.

Regards,
Jackie

Mike Robinson
24 Dec 2009, 7:07 AM
"Slow down, son! Can't you see it's Christmas Eve?" :D Just cuz' someone doesn't respond in minutes don't mean they won't! ~o)

What you are looking for is an Ext.grid.CheckboxSelectionModel, and the place to start looking for that is in the "samples."

Here's how you use it: (example below)



First, instantiate an instance of the selection-model object. Put it into a local var.
Now, in your grid definition, specify this using the "sm" or "selModel" properties, which are synonymous. (Gotcha! The property is not named "selectionModel!")
Finally, specify the same object as the first element in "columns." (Gotcha! It must be the same object, so you can't use an "xtype" nor a separate "new" call.)


The two "gotchas" came from my own personal collection of bruises and bumps... :((

The code:


var grid_model = new Ext.ux.CheckboxSelectionModel();
var my_grid = new Ext.grid.gridPanel({
...
sm: grid_model; // N.B. a reference to the object-instance now in the "var"
...
columns: [
grid_model, // N.B. a reference to the SAME object-instance "var"
...
]
});
...
items: [
...
my_grid
...
]
Also note: You can have issues with "xtype"-based declarations of grids, because each grid needs to be pointing to its own personal selection-model object. This mechanism will carbon-copy the cached instance, but you must ensure that the object's initializer coins its own unique per-instance copy of the selection-model object.

jackiewkc
30 Dec 2009, 3:39 AM
Thanks for your reply and Merry Christmas (I know it's a bit late :-)

So I have created a grid with checkbox using the code below which is pretty much the same as what you suggested above, but the problem is that I can select more then one row/record in the grid. what I want to achive is that a user can only select one row/record only. i.e. if no record is selected, a user can check any box he wants. If a box is already checked and a user is trying to check another box, the original checked box will be unchecked.



var sm = new Ext.grid.CheckboxSelectionModel();
var grid1 = new Ext.grid.GridPanel({
store: releaseStore,
border: false,
cm: new Ext.grid.ColumnModel({
defaults: {
sortable: true
},
columns: [
sm,
{header: "Version", width: 200, dataIndex: 'releaseName'},
{header: "Integration", width: 80, dataIndex: ''},
{header: "UAT", width: 80, dataIndex: ''},
{header: "Production", width: 80, dataIndex: ''}
]
}),
sm: sm,
columnLines: true,
width: '100%',
height:680,
iconCls:'icon-grid'
});



any idea? I really appreciate your help.

Thanks mate.

Condor
30 Dec 2009, 3:42 AM
var sm = new Ext.grid.CheckboxSelectionModel({
singleSelect: true
});

jackiewkc
30 Dec 2009, 3:45 AM
This is perfect, thanks mate :)