javascript ExtJS 4.2：工具提示不够宽，无法看到内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15834689/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ExtJS 4.2: ToolTips not wide enough to see contents
提问by user1578653
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.
自从升级到 ExtJS 4.2 后，我注意到当文本字段中有错误时显示的工具提示不够宽，无法看到工具提示的内容 - 它们似乎总是 40px 宽。
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!
谢谢！
采纳答案by user1578653
Thanks for the help guys, but I found a solution on the sencha forum which seems to work:
感谢您的帮助，但我在 sencha 论坛上找到了一个似乎有效的解决方案：
Specifically the following code at the beginning of the app:
特别是应用程序开头的以下代码：
delete Ext.tip.Tip.prototype.minWidth;
回答by Eko Dedy
this is o bug of extjs 4.2, it work on firefox 19 but not in chrome 26
这是 extjs 4.2 的错误，它适用于 Firefox 19 但不适用于 chrome 26
you should overide the css class for the tooltip:
您应该覆盖工具提示的 css 类：
.x-tip {
width: auto !important;
}
.x-tip-body {
width: auto !important;
}
.x-tip-body span {
width: auto !important;
}
回答by James
Sorry I can't be of much help, it is a known issue with 4.2.0 that will likely be fixed in their next release. See: http://www.sencha.com/forum/showthread.php?257201
抱歉，我帮不上什么忙，这是 4.2.0 的一个已知问题，可能会在下一个版本中修复。参见：http: //www.sencha.com/forum/showthread.php?257201
As a temporary workaround, if you don't need dynamic sizing of the tip container, you can just override the CSS
作为临时解决方法，如果您不需要动态调整提示容器的大小，您可以只覆盖 CSS
.x-tip-form-invalid, .x-tip-body-form-invalid {
width: 150px !important;
}
回答by Sajib Hassan
Still looking at this now and then out of curiosity...
出于好奇，仍然时不时地看着这个......
I tried comparing the the 4.1 and 4.2 sources some more. I think the problem is in the auto container layout somewhere. Between 4.1 and 4.2 A TON of stuff changed. So we can look through this.
我尝试更多地比较 4.1 和 4.2 来源。我认为问题出在某个地方的自动容器布局中。在 4.1 和 4.2 之间发生了很多变化。所以我们可以看看这个。
hopefully it works out for some people.
希望它适用于某些人。
if(Ext.isIE10) {
Ext.supports.Direct2DBug = true;
}
if(Ext.isChrome) {
Ext.define('Ext.layout.container.AutoTip', {
alias: ['layout.autotip'],
extend: 'Ext.layout.container.Container',
childEls: [
'clearEl'
],
renderTpl: [
'{%this.renderBody(out,values)%}',
'<div id="{ownerId}-clearEl" class="', Ext.baseCSSPrefix, 'clear" role="presentation"></div>'
],
calculate: function(ownerContext) {
var me = this,
containerSize;
if (!ownerContext.hasDomProp('containerChildrenDone')) {
me.done = false;
} else {
containerSize = me.getContainerSize(ownerContext);
if (!containerSize.gotAll) {
me.done = false;
}
me.calculateContentSize(ownerContext);
}
}
});
Ext.override(Ext.tip.Tip, {
layout: {
type: 'autotip'
}
});
}
Ext.QuickTips.init();
You can see more details on this forum topic.
您可以查看有关此论坛主题的更多详细信息。
回答by user826840
Deleting Ext.tip.Tip.prototype.minWidth doesn't fix the problem in all cases (on IE10) for me, and adding
删除 Ext.tip.Tip.prototype.minWidth 并不能解决我在所有情况下（在 IE10 上）的问题，并添加
if(Ext.isIE10) {
Ext.supports.Direct2DBug = true;
}
Fixes tooltips but causes other weird problems (toolbar button margins are sometimes affected!). The best solution I have seen is:
修复了工具提示但会导致其他奇怪的问题（有时会影响工具栏按钮的边距！）。我见过的最好的解决方案是：
Ext.override(Ext.tip.QuickTip, {
helperElId: 'ext-quicktips-tip-helper',
initComponent: function ()
{
var me = this;
me.target = me.target || Ext.getDoc();
me.targets = me.targets || {};
me.callParent();
// new stuff
me.on('move', function ()
{
var offset = me.hasCls('x-tip-form-invalid') ? 35 : 12,
helperEl = Ext.fly(me.helperElId) || Ext.fly(
Ext.DomHelper.createDom({
tag: 'div',
id: me.helperElId,
style: {
position: 'absolute',
left: '-1000px',
top: '-1000px',
'font-size': '12px',
'font-family': 'tahoma, arial, verdana, sans-serif'
}
}, Ext.getBody())
);
if (me.html && (me.html !== helperEl.getHTML() || me.getWidth() !== (helperEl.dom.clientWidth + offset)))
{
helperEl.update(me.html);
me.setWidth(Ext.Number.constrain(helperEl.dom.clientWidth + offset, me.minWidth, me.maxWidth));
}
}, this);
}
});
This seems to work on IE9 and 10, Chrome and Firefox.
这似乎适用于 IE9 和 10、Chrome 和 Firefox。
回答by ovillemain
An other not too bad solution was to add this CSS :
另一个不错的解决方案是添加这个 CSS：
.x-border-box .x-tip, .x-border-box .x-tip * {
box-sizing: content-box;
}
But tooltips are a little too large.
但是工具提示有点太大了。
I will try user826840's solution with the override of Ext.tip.QuickTip.
我将尝试覆盖 Ext.tip.QuickTip 的 user826840 的解决方案。
回答by Miisha
Another solution is to override minimum width of QuickTip since field layout creates new QuickTip which does not rely on QuickTip singleton (contrary to the documentation).
另一种解决方案是覆盖 QuickTip 的最小宽度，因为字段布局创建了不依赖于 QuickTip 单例的新 QuickTip（与文档相反）。
Ext.override(Ext.tip.QuickTip,{
minWidth: 200
});
回答by Rajendran Pethappan
If you are facing issue on tooltip EXTJS 4.2.1 in IE browser. You have to add the following line to your ASPX page:
如果您在 IE 浏览器中遇到工具提示 EXTJS 4.2.1 的问题。您必须将以下行添加到您的 ASPX 页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
