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.
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.
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);
I have a Grid-Panel with a few columns.
Now I want to set a new Class in a Column of a Row, when the values don't match with each other.
But how can i get success to a column in a different row?
Her is my code which I tried, but it says, the ID is undefined:
...{
header: 'CRS',
dataIndex: 'crs',
id:'crs',
flex:1,
renderer: function(value, meta) {
console.log("csv-->"+Ext.getCmp('csv').value);
if(value==Ext.getCmp('csv').value)
{
//change class
}
}
},
{
header: 'CSV',
dataIndex: 'csv',
id:'csv',
flex:1
},...
The code you've posted does not seem to match what you're asking for. According to your code, it appears that you're trying to compare values across columns in the same row, not a different row. So which is it?
Anyway, assuming that your code is indicative of what you want, be sure to look at the docs for the the renderer: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.column.Column-cfg-renderer
One of the arguments passed to the renderer method is the "record", which will contain all the values for the record which is filling the values for the entire row. If you wanted to compare values across columns, you could do something like:
if( value==record.get( 'csv ') ) {
...do something here...
}
If you really need to compare values across rows, then the "store" also gets passed as one of the arguments to renderer, so you could compare values against specific row values that way.
Alternatively, you could do most of this in Model itself. If you are just comparing columns in the same row, you could create an additional field in your Model that stores the result of the comparison. If you did that, all that your renderer would need to do is switch on the value of that new field, rather than doing the entire comparison AND rendering.
I have it! This works for me:
{
header: 'CSV',
dataIndex: 'csv',
flex:1,
renderer: function(grid, rowIndex, rowdata) {
var csv_data=rowdata.data.csv;
var crs_data=rowdata.data.crs;
if (csv_data != crs_data) {
rowIndex.tdCls = "red-class";
}
return csv_data;
}
},
{
header: 'CSV',
dataIndex: 'csv',
flex:1,
renderer: function(value, meta, record) {
var crs = record.get('crs');
if (value && crs)
{
if (value != crs) {
meta.tdCls = "red-class";
}
}
return value;
}
},
Rewritten for ExtJS 4, you can use the value as you set it in the dataIndex, and because that's a record the recommended extjs 4 way to get the value would be the get method.
Just a heads up there are a ton more properties on renderer, you can find the full list here:
http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.grid.column.Column-cfg-renderer
I have grid in my application, I need to show/hide particular column conditionally. Please help me.
Code:
{
header: 'Type', dataIndex: 'mirror', flex: 1, sortable: true,
renderer: function (value, meta, record, rowIndex, colIndex, store) {
if(value == '')
return "-";
else
return value;
}
}
currently it shows - incase no records,but I need to remove column incase no record found.
Columns have a hide method which you can use. For example, take a look at this example that show you how to hide an specific column in runtime.
If you want to hide/show a the column depending on a condition, you have to evaluate that condition and use the hide & show methods.