Ext中Grid添加ToolTip

ExtJS表格Tooltip展示

最新推荐文章于 2022-08-10 00:07:16 发布

原创最新推荐文章于 2022-08-10 00:07:16 发布 · 5.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ext #function #class #header #stylesheet #microsoft

Script 同时被 2 个专栏收录

29 篇文章

订阅专栏

Ext

26 篇文章

订阅专栏

本文介绍如何使用ExtJS在表格中实现tooltip效果，通过自定义渲染器改变单元格样式，并利用Ext.ToolTip进行提示信息定制。文章包含完整的示例代码，展示了如何针对不同单元格显示特定的tooltip内容。

Ext在表格中显示tooltip方法，这个方法来自Animal

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>Test</title> <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" mce_href="ext/resources/css/ext-all.css" /> <mce:style></mce:style><style mce_bogus="1">.c_table { border-collapse: collapse; margin-bottom: 3em; font-size: 70%; line-height: 1.1; width:300; height:200; } /* th, td { padding: .3em .5em; } */ .c_td { font-family: arial, helvetica, sans-serif; padding: .3em .5em; } .c_th { font-weight: normal; text-align: left; background: url(arrow.gif) no-repeat 2px 50%; padding-left: 15px; padding: .3em .5em; } .c_th,.name { width: 12em; } .c_th,.location { width: 12em; } .c_th,.color { width: 10em; } .c_thead .c_th, { background: #c6ceda; border-color: #fff #fff #888 #fff; border-style: solid; border-width: 1px 1px 2px 1px; padding-left: .5em; } .c_tbody,.c_th,.start { background: url(dots.gif) 18px 54% no-repeat; padding-left: 26px; } .c_tbody,.c_th,.end { background: url(dots2.gif) 18px 54% no-repeat; padding-left: 26px; } </style> <mce:script type="text/javascript" src="ext/ext-base.js" mce_src="ext/ext-base.js"></mce:script> <mce:script type="text/javascript" src="ext/ext-all-debug.js" mce_src="ext/ext-all-debug.js"></mce:script> <mce:script type="text/javascript" src="ext/ext-lang-zh_CN.js" mce_src="ext/ext-lang-zh_CN.js"></mce:script> <mce:script type="text/javascript"></mce:script> </head> <body> <div id="grid-example"></div> </body> </html>