extjs 04_grid click event new discovery_javascript skills

Click a row or cell in EXTJS GRID to get the content (data) of the row or cell
Js code

Copy code The code is as follows:

grid.addListener('cellclick',cellclick);
function cellclick(grid, rowIndex, columnIndex, e) {
var record = grid.getStore(). getAt(rowIndex); //Get the Record
var fieldName = grid.getColumnModel().getDataIndex(columnIndex); //Get field name
var data = record.get(fieldName);
Ext. MessageBox.alert('show','The currently selected data is' data);
}
grid.addListener('cellclick',cellclick);
function cellclick(grid, rowIndex, columnIndex, e) {
var record = grid.getStore().getAt(rowIndex); //Get the Record
var fieldName = grid.getColumnModel().getDataIndex(columnIndex); //Get field name
var data = record.get(fieldName);
Ext.MessageBox.alert('show','The currently selected data is' data);
}

------ -------------------------------------------------- -----------------------
Js code

Copy code The code is as follows:

grid.on('mouseover',function(e){//Add mouseover event
var index = grid.getView().findRowIndex(e.getTarget ());//The column position can be obtained according to the target where the mouse is located
if(index!==false){//When the correct column is obtained, (because if the incoming target column is not obtained will return false)
var record = store.getAt(index);//Get the record of this column
var str = Ext.encode(record.data);//Assemble a string, You need to complete this yourself. Here I serialize it
var rowEl = Ext.get(e.getTarget());//Convert the target into an Ext.Element object
rowEl.set({
'ext:qtip':str //Set its tip attribute
},false);
}
});
grid.on('mouseover',function(e){/ /Add mouseover event
var index = grid.getView().findRowIndex(e.getTarget());//You can get the position of the column according to the target where the mouse is located
if(index!==false){ //When the correct column is retrieved (because if the incoming target column is not retrieved, false will be returned)
var record = store.getAt(index); //Get the record of this column
var str = Ext.encode(record.data);//Assemble a string, you need to do this yourself, here I serialize it
var rowEl = Ext.get(e.getTarget()) ;//Convert the target into an Ext.Element object
rowEl.set({
'ext:qtip':str //Set its tip attribute
}, false);
}
});

------------------------------------- -----------------------------------------------
Js code

Copy code The code is as follows:

listeners: {
'cellclick':function(grid ,rowIndex,columnIndex,e ){ }
}
//This is the event triggered when a grid cell is clicked
listeners: {
'cellclick':function(grid,rowIndex,columnIndex ,e ){ }
}
//This is the event triggered when a grid cell is clicked
Js code
grid.getView().getCell(rowIndex,columnIndex).style.background -color="#FF6600";
grid.getView().getCell(rowIndex,columnIndex).style.color="#FF6600";
grid.getView().getCell(rowIndex,columnIndex).style .background-color="#FF6600";
grid.getView().getCell(rowIndex,columnIndex).style.color="#FF6600";

I want to change the entire The background color is not just the color of the text. Also, how can I restore the color of the last clicked cell to its original color when I click on a cell? ? ?
Refresh the table to restore the color changed by previous clicks, grid.getView().refresh(); and then change the color of the cell clicked this time.
Js code

Copy code The code is as follows:

grid.getView().refresh ();
grid.getView().getCell(rowIndex,columnIndex).style.backgroundColor="#FF9999";