I have been trying to get the value of clicked cell on grid.
cellDblClick: function(self, td, cellIndex, record, tr, rowIndex, e, eOpts)
I know I can get the record data, but I need the name of the column to get the value of the data.
record.data["name_of_column"]
What's the approach to get the value of clicked cell on grid?
Is it possible to get the column name of clicked cell on grid?
Can anyone shed the light for me?
N.B.
I'm using extjs 4.2.1
You can use viewConfig of grid with cellclick listener as follows.
viewConfig : {
listeners : {
cellclick : function(view, cell, cellIndex, record,row, rowIndex, e) {
var clickedDataIndex = view.panel.headerCt.getHeaderAtIndex(cellIndex).dataIndex;
var clickedColumnName = view.panel.headerCt.getHeaderAtIndex(cellIndex).text;
var clickedCellValue = record.get(clickedDataIndex);
}
}
}
You can use :
onGridpanelCellDblClick: function(tableview, td, cellIndex, record, tr, rowIndex, e, eOpts) {
var clickedColumnName = record.getFields()[cellIndex-1].getName();
var clickedCellValue = record.get(clickedColumnName);
}
The cell index starts from 1 so you have to use cellIndex-1 for the array returned by record.getFields().
You can use:
cellclick: function( thisGrid, td, cellIndex, record, tr, rowIndex, e, eOpts )
{
console.log('td/cell value: ', td.innerText);
},
Related
How to define custom tooltip for a column in extjs grid? there is a listener for grid which apply QuickTips for whole grid but I want a column has a custom tooltip and ignore global tooltip. here the listener code on grid:
listeners: {
itemmouseenter: function (view, record, item, index, e, options)
{
if (e.getTarget().textContent.length > 11)
Ext.QuickTips.register({
text: e.getTarget().textContent,
trackMouse: true,
target: e.target
});
},
}
I try to add this code to column,but still global one works.
By using renderer of grid column you can show the tooltip. something like
var myRenderer = function(value, metaData, record, rowIndex, colIndex) {
if (colIndex === 0) {
metaData.tdAttr = 'data-qtip=' + value;
}
// additional logic to apply to values in all columns
return value;
}
https://docs.sencha.com/extjs/6.0.2/classic/Ext.grid.column.Column.html#cfg-renderer
I have a grid, and I need to add an attribute to the TD of the grid cell (not the header, the cell in the grid itself). It will probably be the same text at the column header, so I'd like to just define it in the gridcolumn xtype when I'm creating my columns. In doing some research I've found a tdAttrs config which I think would help, but I'm not entirely sure how to implement it. Can anyone offer some pointers? If that's not the right direction to be looking, please let me know as well.
Also, I need this to be added to ALL the gridcolumns in my application, so would I need to add an override for ext.grid.column.Column or put it somewhere else?
Easiest way to do that is by adding renderer to column definition:
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
metaData.tdAttr += ' new-attr="new-value"';
return value;
}
It requires you to define renderer for each column definition.
You can do it automatically by overriding renderCell in Ext.view.Table.
Try something like this:
renderCell: function(column, record, recordIndex, columnIndex, out){
var origRenderer = column.renderer;
column.renderer = function(value, metaData, record, rowIndex, colIndex, store, view) {
metaData.tdAttr += ' new-attr="new-value"';
return origRenderer ? origRenderer.apply(this, arguments) : value;
}
var result = this.callParent(arguments);
column.renderer = origRenderer;
return result;
}
Basically this code is switching renderer before calling original renderCell implementation. I don't see any other option.
{
text: "current",
renderer:function (value, metaData, record, rowIdx, colIndex ){
return record.data.Resource[(colIndex-6)/2].current;
},
editor:{
xtype:'numberfield',
listeners:{
change:{
fn:function(me, newValue, oldValue, eOpts){
var form = this.up('form').getForm();
//here I want to get the index of current column
// form._record.data.Resource[colIdx].current=newValue;
}
}
}
}
}
In the function of event 'change' I want to get the index of my column where is my editor then the current column.
the word current is the name of my column.
and here my example :http://jsfiddle.net/D5UsU/32/
Thanx.
Can't see an elegant solution right now (though I doubt it is possible without overrides or thick derived classes). As a quick workaround I would suggest to mark your subcolumns with some additional field, say "subcolumn". Then you will be able to read it and identify which subcolumn triggered the change event:
editor: {
xtype: 'numberfield',
subcolumn: 1,
listeners: {
change: function (me, newValue, oldValue, eOpts) {
var form = this.up('form').getForm();
// use me.subcolumn here
}
}
}
I have grid panel with CheckboxModel in http://jsfiddle.net/Zsby6/
selModel: Ext.create('Ext.selection.CheckboxModel', {
checkOnly: true,
mode: 'MULTI'
}),
I have option checkOnly: true that mean rows can only be selected by clicking on the checkbox column.
But when i click checkall like
and then i click Lisa then 'allchecked' change to 'uncheck' and only select this row like
I want when i click a cell in Name column then all checkbox will not impact. How to do that? Thank
I think checkOnly config works only for Extjs 3.x version.
You can try this approach :
listeners: {
cellclick: function (sender, td, cellIndex, record, tr, rowIndex, e, eOpts) {
clickedColIndex = cellIndex;
},
beforedeselect: function (rowmodel, record, index, eOpts) {
return (clickedColIndex == 0);
}
}
Here is the fiddle
I have been seleted a row, and now i want get rowIndex
maybe like
grid.getSelectionModel().getSelection()[0].rowIndex
but it's undefined. How can i get it thanks
how about this?
var selectedRecord = grid.getSelectionModel().getSelection()[0];
var row = grid.store.indexOf(selectedRecord);
you have to get the selected record of your grid and from that, you can search this record from your store and get its index.
you can also get it from the select listener of the grid:
listeners: {
select: function(selModel, record, index, options){
alert(index);
}
}
Try this:
grid.getCurrentPosition().row
In ExtJS 7 is:
console.log( 'Selection:', grid.getSelection() ) //One
console.log( 'Selection:', grid.getSelectable().getSelectedRecords() ) //Several
if you need modify a column in a grid, you can use this code snapshot:
{text: 'Status', dataIndex: 'localizedStatus', width: 150,
renderer: function(value, meta, record, rowIndex, colIndex, store){
return value;
}
},
Try
grid.getSelectionModel().getSelection()[0].get('id')