how to change color to a row after a click on a checkbox into the row

[alessio77]

first of all, forgive me for my english.
i've a grid with an editable boolean column


var sxgrid = Ext.create('Ext.grid.Panel', {
id: 'sxGrid',
alias : 'widget.prova',
width: '100%',
title: 'Lavorazione',
selType: 'cellmodel',
columns: [{
text: 'Nome',
xtype: 'gridcolumn',
dataIndex: 'ColumnName',
sortable: true
}, {
text: 'Tipo',
xtype: 'gridcolumn',
dataIndex: 'ColumnType',
sortable: true
}, {
text: 'Lunghezza',
xtype: 'gridcolumn',
dataIndex: 'ColumnLenght',
sortable: true
}, {
text: 'Chiave',
xtype: 'booleancolumn',
dataIndex: 'NaturalKey',
trueText: 'Si',
falseText: 'No',
sortable: true,
editor: {
xtype: 'checkbox',
listeners: { change : this.checkBoxClick }
}
}],
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {clicksToEdit:1})
]
});

function checkBoxClick(a,newValue, oldValue, eopts)
{
//how to get reference to the row of the grid that contains the checkbox and changing its background color based on checkbox value

}

how to get the parent object(in my case the row of the grid) and change its color?
i've tryed something like:

a.getParentByType('????') returns always undefined (maybe i've used a wrong xtype, i've tryed with 'grid', 'gridpanel','prova','widget.prova','app.widgetprova' i don't' know the xtype of a row if exists) anyway it returns always undefined

but i don't know how to get reference to a parent/container or an ancestor of component in a grid

i can't proceed over, maybe i should use another approach?

i've seen a lot of examples that use 'Ext.selection.CheckboxModel' to select a row whith a checkbok but itsn't suitable for me.
(i'd like to have an editable custom column not at the beginnig of the grid, with a text in the header and not a checkbox userd to prerform 'select all row')

anyway, every suggestion is appreciated

thanks a lot sencha friends :-)

[scottmartin]

Have a look at:
grid.getSelectionModel().getSelection()[0] // row
this.gridB.getSelectionModel().getSelection()[0].data // record
this.gridB.getSelectionModel().getSelection()[0].data.id // field in record

Regards,
Scott.

[alessio77]

i've tryed to use 'grid.getSelectionModel().getSelection()' and this method returns always an empty array because (i suppose) i use a custom checkbox into the editor section of a
booleancolum and this checkbox doesn't select any row into the store automatically.
this theory seems to be confirmed, because if i use the 'Ext.selection.CheckboxModel' instead of a custom checkbox when i call 'grid.getSelectionModel().getSelection()' i get the selected rows.
so, to avoid to use the automatically generated checkbox by Ext.selection.CheckboxModel, how to select programmatically the row into the store when i click on my custom checkbox?

anyway, even if i would use 'Ext.selection.CheckboxModel' to select the rows how to color the rows when i get the selected store rows by 'grid.getSelectionModel().getSelection()'???

i hope to have been clear enough :-(
this is my grid code:


Ext.define('App.sxGrid',{
extend:'Ext.grid.Panel',
id: 'sxGrid',
alias : 'widget.prova',
width: '100%',
title: 'Lavorazione',
selType: 'cellmodel',
columns: [{
text: 'Nome',
xtype: 'gridcolumn',
dataIndex: 'ColumnName',
sortable: true
}, {
text: 'Tipo',
xtype: 'gridcolumn',
dataIndex: 'ColumnType',
sortable: true
}, {
text: 'Lunghezza',
xtype: 'gridcolumn',
dataIndex: 'ColumnLenght',
sortable: true
}, {
text: 'Chiave',
xtype: 'booleancolumn',
dataIndex: 'NaturalKey',
trueText: 'Si',
falseText: 'No',
sortable: true,
editor: {
xtype: 'checkbox',
handler: function myHandler(sender, event){
var currGrid = Ext.getCmp('sxGrid');
var selection = currGrid.getSelectionModel().getSelection(); //<---this return always and empty array
}
}
}],
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {clicksToEdit:1})
]
});

[vietits]

It seems that you want to change the row color basing on NaturalKey value. If so, you should try getRowClass() of grid view. Something like this:


Ext.define('App.sxGrid',{
extend:'Ext.grid.Panel',
id: 'sxGrid',
alias : 'widget.prova',
width: '100%',
title: 'Lavorazione',
selType: 'cellmodel',
viewConfig: {
getRowClass: function(record){
return record.get('NaturalKey') ? 'selected' : 'unselected';
}
},
columns: [{
text: 'Nome',
xtype: 'gridcolumn',
dataIndex: 'ColumnName',
sortable: true
}, {
text: 'Tipo',
xtype: 'gridcolumn',
dataIndex: 'ColumnType',
sortable: true
}, {
text: 'Lunghezza',
xtype: 'gridcolumn',
dataIndex: 'ColumnLenght',
sortable: true
}, {
text: 'Chiave',
xtype: 'booleancolumn',
dataIndex: 'NaturalKey',
trueText: 'Si',
falseText: 'No',
sortable: true,
editor: {
xtype: 'checkbox',
// handler: function myHandler(sender, event){
// var currGrid = Ext.getCmp('sxGrid');
// var selection = currGrid.getSelectionModel().getSelection(); //<---this return always and empty array
// }
}
}],
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {clicksToEdit:1})
]
});

[alessio77]

It works perfectly, thanks thanks and again thanks :-)
Happy Easter.
Alessio.

[asics167]

hello! i have grid panel with gridwiev and getRowConfig handler. Select Model = CheckBoxModel with lisneners select and deselect like this:


xtype: 'gridpanel',
dock: 'left',
id: 'grListCamera',
itemId: 'grListCamera',
autoScroll: true,
header: false,
title: 'My Grid Panel',
store: 'stListCamera',
viewConfig: {
getRowClass: function(record, rowIndex, rowParams, store) {
var num=record.data.num;
var fix=_myAppGlobal.getController('cntFirst').isFixCam(record.data.num);
str='';
if (_MainCamera==record.data.num)
{
str="maincam";
}
if ( fix >= 0)
{
str =" fixcam";
}
return str;
},
id: 'gridCamView',
itemId: 'gridCamView'
},
columns: [

{
xtype: 'gridcolumn',
width: 30,
dataIndex: 'num',
text: '№'
},
{
xtype: 'gridcolumn',
width: 186,
dataIndex: 'comment',
text: 'Название'
}
],
selModel: Ext.create('Ext.selection.CheckboxModel', {
allowDeselect: false,
showHeaderCheckbox: false,
listeners: {
select: {
fn: me.onCheckboxselectionmodelSelect,
scope: me
},
deselect: {
fn: me.onCheckboxselectionmodelDeselect,
scope: me
}
}
}),
after click .. selected row.. but getRowClass event not fire. If i write in handler onSelect selection Model call .refresh method GridView

Ext.getCmp('gridCamView').refresh();
getRowClass is fired okey .. BUT my GridView Scroll on Top and my selection row not view on screen ( autoscroll on top on refresh).
1.Can i fire getRowClass without call refresh and not goto Top of my grid.
2.if no and i must call refresh - can i return to position before click select on row in my grid.
ps.excuse me my poor english.

psps propertis preserveScrollOnRefresh on grid.view = true !!