PDA

View Full Version : Radio button for Grids - actioncolumn replacement for the old radioColumn



michaelc
4 Jan 2012, 4:30 PM
So I have an app that's in 3.x that used a module RadioColumn.js to create a radio button in a grid.

It does not seem to be in 4.x but as I look thru the code line I find an actioncolumn.
this looks like it would create a radio button pretty easy by using the getclass method to set the buttons on and off.

has anyone used this - or have a better method ?

I just need to have a grid with 4 radio buttons on each row that will set a single value in the table.

thanks for any help in advance.

skirtle
4 Jan 2012, 8:04 PM
I wrote a UX called Component Column that allows you to render components into a grid cell. One of my test cases renders radio buttons just like you describe:

http://www.sencha.com/forum/showthread.php?148064

However, truth be told, I wouldn't use my UX for the scenario you describe. Unless you have a good reason, it'd be overkill to create so many components just to render a few radio buttons.

Starting with actioncolumn would be my preferred approach. Seems like the getClass on each item would have all the information it needs to decide which image to use. Likewise the handler should just need to call set on the record, the grid row should then rerender automatically with the new value checked. If that falls short for some reason you could always try writing a renderer instead to achieve the desired effect.

The only drawback I see to all these approaches is maintaining focus. If you need keyboard navigation I can see that proving awkward.

michaelc
5 Jan 2012, 3:04 PM
90% there - worked like a champ - except the header does not show.
functions just like I want.

how do you get the text to show in the header - it's define in the API.


{
xtype:'actioncolumn',
width : 45,
text : 'no experence',
items: [{

icon:'',
tooltip:'Not a limited knowledge',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
grid.getSelectionModel().select(rowIndex);
grid.getStore().getAt(rowIndex).set('knowledge', 0);
},
style:'margin-left:5px',
getClass: function(value,metadata,record){
var knowledge = record.get('knowledge');
if (knowledge == 0 ) {
return 'radio-col-on';
} else {

return 'radio-col-off';
}

}

}]}
,
{
xtype:'actioncolumn',
width : 45,
text : 'limited',
items: [{
icon:'',
tooltip:'limited knowledge',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
grid.getSelectionModel().select(rowIndex);
grid.getStore().getAt(rowIndex).set('knowledge', 1);
},
style:'margin-left:5px',
getClass: function(value,metadata,record){
var knowledge = record.get('knowledge');
if (knowledge == 1 ) {
return 'radio-col-on';
} else {

return 'radio-col-off';
}

}

}]}

michaelc
5 Jan 2012, 3:34 PM
I dug thru the source the answer is header

xtype:'actioncolumn', width : 45, header : 'no experence',