ExtJS 4.2: ToolTips not wide enough to see contents
I've noticed since upgrading to ExtJS 4.2 that tooltips displayed when a textfield has an error in it are not wide enough to see the contents of the tooltip - they always seem to be 40px wide.
Here's a test case which shows the problem:
<html>
<head>
<title>Field error tooltips</title>
<link rel="stylesheet" type="text/css" href="ext-4.2.0/resources/css/ext-all.css">
<script type="text/javascript" src="ext-4.2.0/ext-all-debug.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function(){
var form = Ext.create("Ext.form.Panel",{
title: 'My form',
width: 300,
height: 100,
items: [
{xtype: 'textfield', name: 'FIELD1', fieldLabel: 'Field 1', allowBlank: false}
],
renderTo: Ext.getBody()
});
});
</script>
</body>
</html>
In the above example if you click the field and then click out of it without typing anything, it shows a tooltip saying that it's not allowed to be blank. The tooltip is not wide enough to see the message unfortunately. Has anyone else come across this?
Thanks!
Answer
Thanks for the help guys, but I found a solution on the sencha forum which seems to work:
Specifically the following code at the beginning of the app:
delete Ext.tip.Tip.prototype.minWidth;