Ext JS 网格面板：如何在鼠标悬停时显示内容

Posted 2023-02-26

【中文标题】Ext JS 网格面板：如何在鼠标悬停时显示内容

【英文标题】：Ext JS Grid Panel: How to show content on mousehover

【发布时间】：2011-07-13 13:18:39

【问题描述】：

我正在显示一个带有 2 列的 ext JS 网格面板。我必须保持两列的固定宽度。我的问题是，当文本显示在第一列并且超出其宽度时，我无法查看整个文本（我可以手动拉伸它，但由于宽度固定，有时不会显示）。可能有人知道我该怎么做-

我的意思是—— 我可以在鼠标悬停上显示文本，但如果用户保持鼠标指针超过 5 秒，我希望它显示文本，否则会太烦人；如果用户将鼠标从第一行移到最后一行。

任何其他想法也会有所帮助。

【参考方案1】：

将以下样式添加到您的样式表中：

.wordwrap 
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word;
    white-space: normal; /* Internet Explorer 5.5+ */

然后将其包含在您的专栏的“cls”配置中：

columns: [
    header: "Column 1",
    dataIndex: 'Col1',
    cls: 'wordwrap'
]

这应该包含您的网格单元格的内容。