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);
}
},
Related
TLDR: I'm using ExtJS 4 and I want to change action column buttons icon from hanlder / controller. How I can do it?
My problem: I have a menu to create a group of devices, it cointain a table of all existing devices (the device has an id, name and affiliation to the group member) with pagination and ajax store. To create a group I have to pass an array of device ids to the server.
To do this I add action column to my grid. By clicking on button in action column I want to add device id to one of the two arrays, that are stored as attributes of the grid (addedMembers and deletedMembers) and change icon in action column. At the moment, all the following code works, but I do not understand how I can change the icon?
Grid:
Ext.define('Portal.view.devicegroups.GroupDevicesGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.groupDevicesGrid',
addedMembers: [],
deletedMembers: [],
store: 'devicegroups.GroupDevicesStore',
columns: [
{
dataIndex: 'name',
flex: 1,
sortable: true,
text: Ext.String.capitalize("<?=gettext('name')?>")
},
{
xtype: 'actioncolumn',
text: Ext.String.capitalize("<?=gettext('member')?>"),
width: 75,
items: [
{
getClass: function (value, meta, record, rowIndex, colIndex) {
var cls = 'deny';
if (this.up('groupDevicesGrid').deletedMembers.indexOf(record.get('id')) !== -1 || record.get('member') == 1) {
cls = 'allow';
}
return cls;
},
handler: function (view, rowIndex, colIndex, item, event, record, row) {
this.fireEvent('changeMembership', rowIndex, record);
}
}
]
}
]
});
changeMembership method:
changeGroupDeviceMembership: function(rowIndex, device) {
var groupDevicesGrid = this.getGroupDevicesGrid(),
groupDevicesStore = groupDevicesGrid.getStore(),
addedMembers = groupDevicesGrid.addedMembers,
deletedMembers = groupDevicesGrid.deletedMembers,
deviceId = device.get('id'),
isMember = device.get('member');
if(isMember == 1) {
if(deviceId) {
if(deletedMembers.indexOf(deviceId) === -1) {
// Set allow icon
deletedMembers.push(deviceId);
} else {
// Set deny icon
deletedMembers.splice(deletedMembers.indexOf(deviceId), 1);
}
}
} else if(isMember == 0) {
if(deviceId) {
if(addedMembers.indexOf(deviceId) === -1) {
// Set deny icon
addedMembers.push(deviceId);
} else {
// Set allow icon
addedMembers.splice(deletedMembers.indexOf(deviceId), 1);
}
}
}
},
Or perhaps there is a better solution to my problem?
I am not privileged to comment so I will just take a shot at the answer. This is the way I do it..you are nearly there just add iconCls. :)
{
xtype: 'actioncolumn',
text: Ext.String.capitalize("<?=gettext('member')?>"),
width: 75,
items: [
{
iconCls:'deny', //<== try adding this icon cls
getClass: function (value, meta, record, rowIndex, colIndex) {
var cls = 'deny';
meta.tdAttr = 'data-qtip="Deny"'; //<== I like tool tips
if (this.up('groupDevicesGrid').deletedMembers.indexOf(record.get('id')) !== -1 || record.get('member') == 1) {
cls = 'allow';
meta.tdAttr = 'data-qtip="Allow"'; //<== I like tool tips
}
return cls;
},
handler: function (view, rowIndex, colIndex, item, event, record, row) {
this.fireEvent('changeMembership', rowIndex, record);
}
}
]
}
I use this pattern quite a lot, hopefully it works for you too.
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 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);
}
}
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 GridPanel, is there a way to design a column whose sole purpose is to act as a serial number column? This column will not need a dataIndex property.
Right now, I am using a custom row numberer function, but this means the row numberer is defined in the grid.js file and all columns from grid.ui.js needs to be copied into grid.js.
I am using the Ext designer.
EDIT: The crux of my question is: Is there a way to define a row numberer using the Ext designer?
All you need is an Ext.grid.RowNumberer in your column definition.
var colModel = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{header: "Name", width: 80, sortable: true},
{header: "Code", width: 50, sortable: true},
{header: "Description", width: 200, sortable: true}
]);
Not an answer, but just want to share this:-
On top of the Ext.grid.RowNumberer, you can have this small nifty hack which will increments your numbers correctly according to the page number that you are viewing if you have implemented PagingToolbar in your grid.
Below is my working example. I extended the original Ext.grid.RowNumberer to avoid confliction.
Kore.ux.grid.RowNumberer = Ext.extend(Ext.grid.RowNumberer, {
renderer: function(v, p, record, rowIndex) {
if (this.rowspan) {
p.cellAttr = 'rowspan="'+this.rowspan+'"';
}
var st = record.store;
if (st.lastOptions.params && st.lastOptions.params.start != undefined && st.lastOptions.params.limit != undefined) {
var page = Math.floor(st.lastOptions.params.start/st.lastOptions.params.limit);
var limit = st.lastOptions.params.limit;
return limit*page + rowIndex+1;
}else{
return rowIndex+1;
}
}
});
And the code below is the original renderer from Ext.grid.RowNumberer, which, to me, pretty ugly because the numbers is fixed all the time no matter what page number it is.
renderer : function(v, p, record, rowIndex){
if(this.rowspan){
p.cellAttr = 'rowspan="'+this.rowspan+'"';
}
return rowIndex+1;
}
For version 4.2 very very easy:
Just add a new column like this:
{
xtype: 'rownumberer',
width: 40,
sortable: false,
locked: true
}
ExtJS 4.2.1 working code below:
// Row numberer correct increasing
Ext.override(Ext.grid.RowNumberer, {
renderer: function(v, p, record, rowIndex) {
if (this.rowspan) {
p.cellAttr = 'rowspan="'+this.rowspan+'"';
}
var st = record.store;
if (st.lastOptions.page != undefined && st.lastOptions.start != undefined && st.lastOptions.limit != undefined) {
var page = st.lastOptions.page - 1;
var limit = st.lastOptions.limit;
return limit*page + rowIndex+1;
} else {
return rowIndex+1;
}
}
});