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')
Related
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 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);
},
I have a gridpanel and one of my column like
columns: [
...
{ text: 'Name', dataIndex: 'name' , width: 200,
renderer: function (value) {
// how to get width of this column (200)
//alert(this.width); // this is width of gridpanel
}
}
...
],
how to get width of this column thanks.
Fairly certain this isn't the ideal way to do it, but it works. There are lots of other values passed to the renderer function besides just the value. Via dom inspection, this will get you the column width, but I don't think it's something I would trust to work as they update ExtJS:
renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
return view.ownerCt.columns[colIndex].getWidth();
}
Alternatively, you could use component query to get the grid panel view, use the row index to find the column, and then get it's width the same way:
renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
var grid = Ext.ComponentQuery.query('#gridId')[0];
return grid.columns[colIndex].getWidth();
}
I really don't know what is the better option in this case, and don't really know why they pass the gridview rather than the gridpanel as the view in the renderer function. In any case, this should get you started, good luck.
I added an actioncolumn to my grid, and i am trying to get a grid value when it is pushed.
this is my actioncolumn:
xtype: 'actioncolumn',
width: 30,
sortable: false,
menuDisabled: true,
items: [{
icon: 'images/refresh16x16.png',
scope: this,
handler: this.onBidHistoryGridlClick
}
This is my listener:
onBidHistoryGridlClick: function(record, grid, rowIndex){
alert(grid.getStore().getAt(rowIndex).column_name);
}
This doesnt work.
Any ideas?
You've got the record in the listener arguments, use it!
record.get('column_name')
You were probably close with your own tentative, but you forgot that what you get from the store is a record, not a raw data object. So this would rather have been:
grid.getStore().getAt(rowIndex).get('column_name')
Update
You've got your handler's arguments wrong (check the docs). This should be:
onBidHistoryGridlClick: function(view, rowIndex, colIndex, item, e, record){
alert(record.get('column_name'));
}
In addition to #rixo's answer, you may need to use the "data" attribute depending on the context (event handler callback function):
handler: function (grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex).data;
alert(rec.toSource()); // this only works in Mozilla Firefox
var rec_col_val = grid.getStore().getAt(rowIndex).data.col_name;
alert(rec_col_val);