PDA

View Full Version : CellEditing tooltip



LeonM
13 Dec 2012, 1:07 PM
I'm want to give the users a tip on how to fill certain cells in a grid with cell editor pluging.

I came up with this:


plugins: Ext.create('Ext.grid.plugin.CellEditing', {
listeners: {
beforeedit: function (me, e, eOpts) {
new Ext.ToolTip({
anchor: 'top',
anchorToTarget: true,
target: e.row.cells[e.colIdx],
html: 'Some useful tip',
hideDelay: 15000,
autoShow: true,
});
}
}
}

The problem is that directly after the beforeedit function returns the grid cell is replaced by the editor and the tooltip is destroyed. You can actually see it flicker very shortly after clicking the cell to edit.

How do I fix this, is there some way to get a reference to the editor that is about to be rendered so I can anchor the tooltip there?

mitchellsimoens
15 Dec 2012, 7:52 AM
I'd make a plugin for form fields and on render show the tooltip.

LeonM
18 Dec 2012, 12:19 AM
I'd make a plugin for form fields and on render show the tooltip.

Thanks :)


This did the trick for me:



editor: {
xtype: 'textfield',
tooltip: Ext.create('Ext.ToolTip', {
anchor: 'top',
anchorToTarget: true,
html: 'Some tip',
hideDelay: 15000,
autoShow: false
}),
listeners: {
render: function (me, eOpts) {
me.tooltip.setTarget(me.getEl());
},
focus: function (me, eOpts) {
me.tooltip.show();
},
blur: function (me, eOpts) {
me.tooltip.hide();
}
}
}