I have this.mygrid there is column as my_col_id i want to add tool tip in to the grid cell. I added tool tip for grid cell but that tool tip not update with my store(my_store) changes. how to update my grid tool tip when store update
Note: don't work when i added colName.render in to the store update method
initComponent{
colName = this.mygrid.getColumnModel().getColumnById('my_col_id');
colName.renderer = this.addToolTip;
}
addToolTip : function(value, metadata, record, rowIndex, colIndex, store){
metadata.attr = 'ext:qtip="' + record.get('PRICE')+'<br>'+record.get('DATE') + '"';
return value;
}
You can try doing this.
initComponent : function() {
this.setTooltip(column);
},
setTooltip: function(col) {
var originalRenderer = col.renderer;
col.renderer = function(value, meta, record, rowIndex, colIndex, store){
meta.attr = 'ext:qtip="' + 'your message' + '"';
return (originalRenderer ? originalRenderer(value, meta, record, rowIndex, colIndex, store, field) : value);
}
}
Related
I have a column grid issue where I want to take the data of a grid cell truncate it down to 50 characters and then have a tooltip show the full data.
I have the SQL service responding back with the truncated text called OfferTruncated and the full text called Offer in the model/store. What's happening is all I am trying to display is OfferTruncated on the grid and Offer in the tooltip, but Offer is displayed in both.
Here is the column item
{
header: 'Offer',
dataIndex: 'Offer',
width: 300,
renderer: function (value, metadata, record) {
return getExpandableImage(value, metadata, record);
}
},
Here is the global function I made
function getExpandableImage(val, meta, rec, rowIndex, colIndex, store) {
var deviceDetail = "Offer Terms: " + rec.get('Offer');
meta.tdAttr = 'data-qtip="' + deviceDetail + '"';
var value = rec.get('OfferTruncated')
return value;
}
It's a little easier to just use the built in EXTjs ellipsis function, rather than returning two fields where one is just truncated data of the other. Use the renderer:
{
header: 'Offer',
dataIndex: 'Offer',
width: 300,
renderer: function (value, metadata, record) {
var deviceDetail = "Offer Terms: " + value;
metadata.tdAttr = 'title="' + Ext.util.Format.ellipsis(deviceDetail, 800) + '"';
return Ext.util.Format.ellipsis(value, 50);
}
},
I have a gridpanel with columns associated to its store (with "dataIndex") and columns not associated to store (without "dataIndex" ) for example:
{
xtype: 'gridcolumn',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
var data=record.getData(true);
if(data.currProbability!==undefined){
if(data.currProbability<5)
return 'L';
else
if((data.currProbability>4)&&(data.currProbability<7))
return 'M';
else return 'H';
}else
return "";
},
text: 'Probability'
},
{
xtype: 'gridcolumn',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
var data=record.getData(true);
if(data.currSeverity!==undefined){
if(data.currSeverity>8)
return 'C';
else
if((data.currSeverity>6)&&(data.Severity<9))
return 'S';
else
if((data.currSeverity>4)&&(data.currSeverity<7))
return 'M';
else
return 'L';
}
return "";
},
text: 'Severity'
}
for these two columns I haven't problem with renderer But the third column:
{
xtype: 'gridcolumn',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
var row=view.getNode(rowIndex);
var data=record.getData(true);
if(row !==undefined){
var severity=Ext.fly(Ext.fly(row).query('.x-grid-cell')[25]).down('div').getHTML();
var probability= Ext.fly(Ext.fly(row).query('.x-grid-cell')[24]).down('div').getHTML();
if(data.status==='Closed')
return severity+probability+'c';
else
return severity+probability;
}
return "";
},
text: 'Risk Class'
}
with this column in its renderer I can't get the value of two later columns ("probability" and "severity") I understood this problem because I get values not from record but from two later columns not associated in the store here like a summury column, In the renderer for this column 'Risk Class' the variable row is indefined.
please how I can resolve it.
Thanx.
Use a calculated field on your model.
fields: [{
name: 'severity',
convert: function(v, record) {
var severity = record.get('currSeverity');
if (severity) {
if (severity > 8) {
return 'C';
}
// etc
}
return '';
}
}]
Then you can use it as a dataIndex directly in your grid. You can also ask the model for the value:
record.get('severity');
I am using Extjs4.1.0.
I have a grid with an actioncolumn. I have to change the icons in this actioncolumn based on some conditions.
I am using three getClass methods to render the icons in this column.
xtype: 'actioncolumn',
items: [
{
getClass: function (v, meta, rec)
{
if (rec.get('fieldDeleteFlag') == false) return 'x-grid-del-css';
else return '';
},
handler: function (grid, rowIndex, colIndex)
{
alert('delete');
}
},{
getClass: function (v, meta, rec)
{
if (rec.get('fieldDeleteFlag') == false) return 'x-grid-edit-css';
else return '';
handler: function (grid, rowIndex, colIndex)
{
alert('edit');
}
},{
getClass: function (v, meta, rec)
{
if (rec.get('fieldDeleteFlag') == true) return 'x-grid-activate-css';
else return '';
}
handler: function (grid, rowIndex, colIndex)
{
alert('Activate');
}
}],
grid.getStore().getAt(rowIndex).set('change',false);
So, if the flag is false, i need to have two icons as edit and delete. If the flag is true, i have only activate icon.
When i click on the activate icon handler, i will set the flag column as false and i have only the edit and delete icons for this row.
The icons are coming perfectly when the grid is rendering. But, when i click on the activate handler, i am unable to remove the activate icon and display the edit and delete icons.
Can any body tell me how to do this...
You can use grid.refresh() after setting the cell value.
handler: function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
var change = rec.get('change');
rec.set('change', -change);
grid.refresh();
}
I am having some problems with my code that I hoped you could help me with as I've kind of hit a wall.
I have a field in a Tree grid that has the following properties:
xtype : 'gridcolumn',
id : 'raGridFormulaLink_Purchased',
dataIndex: 'formulaLink',
groupable : false,
editor : {
xtype: 'textfield'
},
renderer: function(value, metaData, record, rowIndex, colIndex, store) {
var rVal; var linkRec;
if(value !== '' && value !== 0) {
/* TODO Find linked Record based on ['child_id' => value]
* and print that record's [text] to rVal */
rVal = Ext.local.langstore[448] + ' ' + value;
}
return rVal;
},
align: 'left',
width: 100
As you can see I am trying to do a simple HLOOKUP to find the linked record. But I am unable to get the proper record from the store. How can I do this?
The value has the right "child_id", so it's not the input that's wrong.
Any help appreciated,
GR.
Solved it.
Final code:
renderer: function(value, metaData, record, rowIndex, colIndex, store) {
var rVal; var rText = ''; var node;
if(value !== '' && value !== 0) {
if(record.isLeaf()) {
var node = record.parentNode.findChild('child_id',value);
rText = node.data.text;
rVal = Ext.local.langstore[448] + ' ' + rText;
}
}
return rVal;
},
In an ExtJS grid, I can get the index of the selected data item like this:
grid.getSelectionModel().on('rowselect', function(sm, index, rec){
changeMenuItemInfoArea(menuItemApplication, 'you are on row with index ' + index);
var row_number_parts = rec.id.split('-'); // rec.id = e.g. "ext-record-1"
var selected_index = row_number_parts[2] - 1;
alert(selected_index);
});
But how do I get the index of the selected data item on double click?
When I do this:
listeners: {
'rowdblclick': function(grid, rowindex, e){
console.log(...);
}
}
both grid and e don't seem to have the information I need and rowindex isn't useful since if the user resorts a column, then the index of the row double-clicked is not necessarily the index of the dataset which loaded the grid.
Addendum
Thanks #McStretch, I ultimately solved the issue at hand by putting the id in the item list, hiding the id column, then sending the id to the edit page, like this:
listeners: {
'rowdblclick': function(grid, index, rec){
var id = grid.getSelectionModel().getSelected().json[0];
go_to_page('edit_item', 'id=' + id);
}
}
Index actually refers to the record's index in the store according to the documentation for cellClick:
function(grid, rowIndex, columnIndex, e) {
// Get the Record, this is the point at which rowIndex references a
// record's index in the grid's store.
var record = grid.getStore().getAt(rowIndex);
// Get field name
var fieldName = grid.getColumnModel().getDataIndex(columnIndex);
var data = record.get(fieldName);
}
If this is the case, then you shouldn't have to worry about grid reordering. I think you should get the index/record by using the above methodology in your 'rowdblclick' listener -- it's much more readable. Test it out and see what happens.
I found a way to do this:
listeners: {
'rowdblclick': function(grid, index, rec){
var row_label = grid.getSelectionModel().getSelected().id;
var row_label_parts = row_label.split('-');
var selected_index = row_label_parts[2] - 1;
alert(selected_index);
}
}