Skip to content

Instantly share code, notes, and snippets.

@akushnikov
Created February 20, 2016 10:59
Show Gist options
  • Save akushnikov/a9a2d0a8e5f56a3f894a to your computer and use it in GitHub Desktop.
Save akushnikov/a9a2d0a8e5f56a3f894a to your computer and use it in GitHub Desktop.
ExtJs grid cell detalization on ellipsis
Ext.define('Ext.ux.grid.plugin.CellDetalization', {
extend: 'Ext.AbstractPlugin',
alias: 'plugin.cell-detalization',
statics: {
ignoredXTypes: ['commandcolumn', 'componentcolumn', 'imagecommandcolumn', 'actioncolumn', 'header-action']
},
constructor: function () {
var me = this;
me.callParent(arguments);
me.metric = new Ext.util.TextMetrics();
},
init: function (grid) {
var me = this;
grid.on('viewready', function (g) {
var view = grid.getView();
me.tip = me.createToolTip(view);
});
},
createToolTip: function (view) {
var me = this;
var tooltip = Ext.create('Ext.tip.ToolTip', {
target: view.el,
delegate: '.x-grid-cell',
trackMouse: true,
renderTo: Ext.getBody(),
listeners: {
beforeshow: me.onTipBeforeShow,
scope: me
}
});
return tooltip;
},
onTipBeforeShow: function (tip) {
var me = this;
var view = me.getCmp().getView();
var position = view.getPositionByEvent(tip.triggerEvent);
var column = position.column;
if (me.self.ignoredXTypes.reduce(function (x, y) {
return column.isXType(y) || x;
}, false)) {
return false;
}
var colIndex = position.colIdx;
var el = Ext.fly(tip.triggerElement);
var value = el.down('.x-grid-cell-inner').getHtml();
if ((view.ownerCt.columns[colIndex].getWidth() || 10) <= (me.metric.getSize(value).width + 15 || 0)) {
tip.update(value);
return true;
}
return false;
},
destroy: function () {
var me = this;
me.metric.destroy();
me.metric = null;
me.tip.destroy();
me.tip = null;
me.callParent(arguments);
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment