View Full Version : Error Tooltip for Gridpanel

23 Aug 2012, 5:04 AM
Hi Guys,

I have a gridpanel and want to show a errortooltip on mouse hover as we see for textfields and combobox.
Is there any inbuilt component to show this error styled tooltip for grid panel.


23 Aug 2012, 5:08 AM
If you are asking for showing an error tooltip when a validation fails, you can use vtype config in grid column editor:

{header: 'Phonenumber', dataIndex: 'phonenumber', flex:1,
editor: {
vtype: 'integer' // custom validation type which you can create using regular expressions

Add the following custom validation type 'integer' in the beginning of your code (onReady function)

var integerTest = /^\d+$/;
Ext.apply(Ext.form.field.VTypes, {
integer: function(val, field) {
return integerTest.test(val);
integerText: 'Must be an integer.' // vtype Text property: The error text to display when the validation function returns false

23 Aug 2012, 5:41 AM
I was not more presize in my previous mail.. appolosies for that.

Now i have to validate the count of gridpanel to be between 1-15, ie.., 0 and count above 15 is not allowed.
all this i am doing is on click of a button.

24 Aug 2012, 4:24 AM
any help please....

24 Aug 2012, 4:35 AM
its not clear what you are trying to do. What is to be limited to 15? Entry in one of the grid cells using cell/row editing or the number of records in the store? when do you want the error tooltip to be displayed? will the tooltip be shown for each record separately or just one tooltip to appear on whole grid?

24 Aug 2012, 7:34 AM
yes, its a pretty simple validation.

If the count of records in the grid panel is more then 15, and user clicks on the Go button. I have to show this grid panel with the red border. on mouse hover on this entire gird panel( not to any particular record ) i have to show a tool tip.
currently i have implemented a simple qtip (Ext.tip.tooltip) but client is unhappy as he wants to see the tooltip along with red border and icon within it.

So as we have textfields and combobox component with vtypes showing error tool tip, i am expecting to override my message for the same tooltip component and get same look and feel.

sorry if any bad verbiage.


24 Aug 2012, 11:17 AM
renderer: function(value, metaData, record){
if(/* record has error */){
metaData.tdCls += " x-form-invalid-field"; // Squiggly red lines
metaData.tdAttr = "data-errorqtip='This is my error message!'";
return value;

this worked.