ExtJS 4.2:工具提示不够宽,无法查看内容

use*_*653 30 javascript extjs

我注意到自从升级到ExtJS 4.2后,当文本字段中出现错误时显示的工具提示不足以查看工具提示的内容 - 它们似乎总是宽40px.

这是一个显示问题的测试用例:

<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>
Run Code Online (Sandbox Code Playgroud)

在上面的示例中,如果单击该字段然后单击其中而不键入任何内容,则会显示一个工具提示,说明它不允许为空.不幸的是,工具提示的宽度不足以看到消息.还有其他人遇到过这个吗?

谢谢!

use*_*653 27

感谢帮助人员,但我在sencha论坛上找到了一个似乎有效的解决方案:

http://www.sencha.com/forum/showthread.php?260106-Tooltips-on-forms-and-grid-are-not-resizing-to-the-size-of-the-text/page3#24

特别是应用程序开头的以下代码:

delete Ext.tip.Tip.prototype.minWidth;
Run Code Online (Sandbox Code Playgroud)


Eko*_*edy 15

这是extjs 4.2的bug,它适用于firefox 19但不适用于chrome 26

你应该覆盖工具提示的css类:

.x-tip {
    width: auto !important;
}
.x-tip-body {
    width: auto !important;
}
.x-tip-body span {
    width: auto !important;
}
Run Code Online (Sandbox Code Playgroud)

  • 这适用于Firefox 4.2.1.删除`Ext.tip.Tip.prototype.minWidth`对我来说不起作用.谢谢 (2认同)