[Ext JS]treelist实现tooltip

Ext.tree.Panel 要添加tooltip ，一般使用以下2个步骤：

初始全局快速的Tip

Ext.tip.QuickTipManager.init();

在TreeStore的数据添加qtip 属性，类似：
{ text: '关羽', leaf: true,qtip:'字云长' }

但是在treelist中，通过以上方式进行添加无效。原因就是treelist是轻量版的树组件，这种类型的组件性能更好，同时功能也是有限的。

实现思路

在treelist 的onMouseOver 方法中创建一个全局的Tip。
鼠标移动上去的时候显示
鼠标移开的时候禁用（如果不禁用，则会出现一个黑色的小区块）。
注意， Tooltip 的显示和隐藏使用setDisabled() 方法，使用hide()和show() 不能解决黑色区块问题。
因为treelist 的 onMouseOver 是私有的，所以如果是定义一个新的类型，则需要定义在 privates 中；如果是定义一个treelist的对象，则可以直接覆写onMouseOver 。

实现代码

这里以定义一个新的treelist 的扩展类型为例，定义代码如下：

Ext.define('ExtjsdevEncy.view.chp12.TreeListWithTooltip', {extend: 'Ext.list.Tree',xtype:

[Ext JS]treelist实现tooltip相关推荐

3.15 Ext JS 之 Tooltip 的基本使用
Ext JS 创建 Tooltip 的类型根据类创建实例. Ext.tip.ToolTip 单例, 全局 .Ext.tip.QuickTip 直接设置HTML或是DOM的属性 1. 创建 Ext.t ...
《Ext JS 6.2实战》节选——迁移管理模版
Ext JS 6的示例中,提供了如图7-1所示的管理模版和如7-2所示的Executive模版.这两套模版都采用了当前流行的简洁大气风格,且都是响应式设计,是大家比较喜欢的类型.尤其是管理模版,可以说 ...
Ext JS 6学习文档-第3章-基础组件
Ext JS 6学习文档-第3章-基础组件基础组件在本章中,你将学习到一些 Ext JS 基础组件的使用.同时我们会结合所学创建一个小项目.这一章我们将学习以下知识点: 熟悉基本的组件 – 按钮, ...
Ext JS 4.1 RC2 Released发布
原文:http://www.sencha.com/blog/ext-js-4-1-rc-2-released/ Today we're making available Ext JS 4.1 RC2, ...
extjs ajax 遮罩层,[Ext JS 4] 实战之Load Mask(加载遮罩)的显示与隐藏
前言 Load Mask(遮罩)效果,就是在页面还没有完全显示出来之前, 加上一个转装转的效果. 类似: 添加这样的效果有两个好处: 1. 在页面没完全show出来之前, 把后面的页面给遮罩起来, 防 ...
Ext JS 4.2.0发布
下载地址:http://www.sencha.com/products/extjs/download/ext-js-4.2.0/2142 Release Notes for Ext JS 4.2.0 ...
Ext JS 6开发实例（三）：主界面设计
在上文中,已经将CMD创建的应用程序导入到项目里了,而且也看到默认的主界面了,今天的主要工作就是修改这个主界面,以符合项目的需要.除了设计主界面,还有一些其他的东西需要配置一下. 添加本地化包打开a ...
EXT JS 4.3 在线学习
官网地址:http://docs.sencha.com/extjs/4.1.3/ 相关示例:http://docs.sencha.com/extjs/4.1.3/#!/example Examples ...
Ext JS的4.1.0的RC 1的发行说明
Ext JS的 - JavaScript框架 Ext JS的4.1.0的RC 1的发行说明发行日期:2012年3月13, 版本号:4.1.0的RC 1 修正的错误钮 EXTJSIV-5129 按钮 ...

[Ext JS]treelist实现tooltip

实现思路

实现代码

[Ext JS]treelist实现tooltip相关推荐

最新文章

热门文章