ExtJS 4.2：工具提示不夠寬，看不到內容

自從升級到ExtJS 4.2後，我注意到當文本字段出現錯誤時顯示的工具提示不夠寬，無法查看工具提示的內容 - 它們似乎總是寬40px。ExtJS 4.2：工具提示不夠寬，看不到內容

這是一個測試的情況下，顯示問題：

<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>

在上面的例子，如果你單擊該字段，然後單擊出它不輸入任何內容，它顯示一個提示說，它是不允許被空白。工具提示不夠廣泛，不幸的是看到消息。有沒有其他人遇到過這個？

謝謝！

來源

2013-04-05 user1578653

感謝您的幫助球員，但我FO UND的煎茶論壇，似乎工作的解決方案：

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;

來源

2013-04-08 13:22:26 user1578653

我知道這有點哈克，但它看起來像這樣做！ – user1578653 2013-04-08 13:23:22

輸入此代碼的地方？哪個檔案？ – dataol 2013-04-10 02:01:37

就在我的app.js文件的頂部。在上面的例子中，我會把它放在Ext.onReady – user1578653 2013-04-10 07:54:00

對不起，我不能提供太多幫助，這是4.2.0的一個已知問題，可能會在他們的下一個版本中修復。請參閱：http://www.sencha.com/forum/showthread.php?257201

作爲臨時解決辦法，如果你不需要尖端容器的動態調整大小，你可以重寫CSS

.x-tip-form-invalid, .x-tip-body-form-invalid { 
    width: 150px !important; 
}

來源

2013-04-06 02:19:58 James

謝謝詹姆斯，但我真的需要工具提示根據內容調整大小（達到極限！） – user1578653 2013-04-08 13:20:43

謝謝！這在Chrome和FF和IE的'4.2.1'中適用於我。其他解決方案不適合我。 – Guus 2014-03-28 18:44:18

謝謝詹姆斯，這對我有用，它只適用於形式相關的領域。 – pramodh 2016-03-25 20:01:07

這是ExtJS的4.2鄰錯誤，它工作火狐19而不是在鉻26

你應該在此改變CSS類工具提示：

.x-tip { 
    width: auto !important; 
} 
.x-tip-body { 
    width: auto !important; 
} 
.x-tip-body span { 
    width: auto !important; 
}

來源

2013-04-08 01:44:02

感謝您的建議，但這似乎不適用於我。寬度似乎直接設置爲內聯樣式，並且這些CSS規則似乎不會取代內聯樣式... – user1578653 2013-04-08 13:19:34

您可以顯示屏幕截圖嗎？ – 2013-04-08 19:21:21

這幫了我。刪除Ext.tip.Tip.prototype.minWidth;雖然在以前的應用程序中似乎沒有解決問題，但我沒有爲我工作。 – Farish 2013-11-07 12:18:55

仍然在這個現在再看着窗外的好奇心。 ..

我試着比較4.1和4.2來源更多。我認爲問題出現在某處的自動容器佈局中。在4.1和4.2之間TON的東西改變了。所以我們可以看看這個。

希望它適合某些人。

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();

你可以看到更多的細節on this forum topic。

來源

2013-04-10 10:42:00

刪除Ext.tip.Tip.prototype.minWidth不爲我所有的情況下（在IE10）解決問題，並加入

if(Ext.isIE10) { 
     Ext.supports.Direct2DBug = true; 
}

修復工具提示，但會導致其他奇怪的問題，（工具欄按鈕的利潤有時會受到影響！）。我看到的最佳解決方案是：

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); 
     } 
    });

這似乎適用於IE9和10，Chrome和Firefox。

來源

2013-04-25 16:37:14 user826840

這是適用於我的唯一解決方案（在分機4.2中）。最初我嘗試刪除Ext.tip.Tip.prototype.minWidth。這在大多數情況下都是有效的，但是有時候，沒有明顯的原因，工具提示會突然變得垂直。這種重載似乎解決了這個問題。 – 2013-12-05 21:36:56

爲我工作4.2 – Murrah 2015-01-02 00:31:15

唯一的解決方案，我發現它的工作（IE11）！謝謝！ – 2015-01-16 15:04:06

-1

如果您在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">

來源

2014-04-25 09:41:20

我絕對建議不要只爲這個小問題改變你的文檔類型。它可能會引入大量的其他佈局問題。嘗試這裏介紹的其他答案之一。 – 2015-10-14 14:15:53

的其他不是太糟糕的解決辦法是添加此CSS：

.x-border-box .x-tip, .x-border-box .x-tip * { 
    box-sizing: content-box; 
}

但提示是有點過大。

我會嘗試使用重寫Ext.tip.QuickTip的user826840的解決方案。

來源

2014-09-11 13:19:58 ovillemain

另一種解決方案是覆蓋QuickTip的最小寬度，因爲字段佈局會創建不依賴QuickTip單例的新QuickTip（與文檔相反）。

Ext.override(Ext.tip.QuickTip,{ 
    minWidth: 200 
});

來源

2016-02-19 13:26:29 Miisha

ExtJS 4.2：工具提示不夠寬，看不到內容

回答

相關問題