Skip to content

Instantly share code, notes, and snippets.

@jarrodhroberson
Created December 3, 2013 03:44
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jarrodhroberson/7763558 to your computer and use it in GitHub Desktop.
Save jarrodhroberson/7763558 to your computer and use it in GitHub Desktop.
ExtJS 4.x Grid Plugin to add ToolTips to each Cell in a Column with Process Config Function snippet for a Grid Panel.
Ext.define('Ext.grid.plugin.CellToolTip', {
extend: 'Ext.AbstractPlugin',
alias: 'plugin.CellQTip',
config: {
debug: false
},
init: function(grid) {
// You may not need the scope, but if you do, this binding will
// allow to preserve the scope configured in the column...
var pluginRenderer = Ext.Function.bind(this.renderer, this);
Ext.each(grid.query('gridcolumn'), function(col) {
var renderer = col.renderer;
col.renderer = renderer ? Ext.Function.createSequence(renderer, pluginRenderer) : pluginRenderer;
});
},
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
var col = view.getGridColumns()[colIndex];
var fn = this[col.itemId];
if (fn) {
metaData.tdAttr = fn(value, metaData, record, rowIndex, colIndex, store, view);
}
return value;
}
});
processBlobInfoGridPanel: function(config) {
var ttp = Ext.create('Ext.grid.plugin.CellToolTip', {
createdOn: function(value, metaData, record, rowIndex, colIndex, store, view) { return 'data-qtip="' + value.toUTCString() + '"'; },
contentType: function(value, metaData, record, rowIndex, colIndex, store, view) { return 'data-qtip="Hello World!"'; },
byteSize: function(value, metaData, record, rowIndex, colIndex, store, view) { return 'data-qtip="' + value + ' bytes"'; }
});
config.plugins = [ttp];
return config;
},
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment