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.
Related
I'm newbie at Ext JS and I would like to know if it is possible to create a Textfield or a different component and insert it inside a grid panel cell. I have tried this so far (It doesn't return me the component):
{
header : ...,
id : ...,
dataIndex : ...,
sortable : true,
width : 140,
renderer: function(value, meta, record) {
return new Ext.form.TextField({fieldLabel: 'field', text: 'test'});
}
}
I would like to do something similar with cellEditing, but I can't use that plugin because I'm working with a older version of Ext (3.2.1).
My target is to show a textfiled when someone clicks at a specific cell.
Thank you.
https://fiddle.sencha.com/#fiddle/27e7&view/editor
I have returned html input field inside column renderer.
Just like cell editor I have set value to textfield.Also I have added blur event handler method in which you can write code similar to cell editor's edit listener.
Is this what you want? Or some other changes.Check it.
Adding code here:
renderer: function (value, meta, record) {
return "<input onblur='onBlurEventHandler(event)' value="+value+" style='width: 90 px;'></input>"
}
function onBlurEventHandler(event){
console.log('Value: '+event.currentTarget.value);
}
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 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 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
What is the event that fires when the data in a DataGrid are recharged or rendered?
For example, a DataGrid showing the results of a filtered search. Every time you click on the Search button with a different filter, the results (number of rows) of the DataGrid are different.
what are you trying to do? You can add a renderer on each of your columns like this:
{
text: 'ChangedCaption',
dataIndex: 'myBoolean',
renderer: function (value, metaData, record, rowIndex, colIndex, store) {
if (value == true) {
return 'Y'
} else {
return 'N'
}
}
},