Clever Geek Handbook

Tooltips displaying column mapping data in EXT JS 5

I have an issue with a column cell where I want the cell cell data to truncate it to 50 characters and then a tooltip pops up showing the full data.

I have a SQL service replying back with truncated text called OfferTruncated and full text called Offer in Model / Store. What's going on, all I'm trying to display is OfferTruncated on the grid and the offer is in the prompt, but the offer is displayed in both.

Here is the column element

{
        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;
}
+3


source to share


1 answer


It's a little easier to just use EXTjs' built-in ellipsis function instead of returning two fields where one is just the other's truncated data. Use a 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);

        }
    },
+3


source






More articles:


All Articles