`

ExtJS Grid Tooltip提示

阅读更多
    本文总结了ExtJS Grid Tooltip的几种实现方法。ExtJS Grid Tooltip可以通过表头提示,单元格提示,行提示以及自己手动添加等方式完成。本文参考了官方FAQ上提供的描述。

    ExtJS Grid Tooltip实现之一:表头提示

    在2.2里面是设置ColumnModel.tooltip ,3.0则是Column. tooltip 如下:

  1. var grid = new Ext.grid.GridPanel({    
  2.   columns:[    
  3.     {header:'名称',dataIndex:'name',tooltip:'对象名称'},    
  4.     {header:'开始时间 - 结束时间 < br/>成功/失败/成功率', dataIndex:'sucRate',tooltip:'成功/失败/成功率'}    
  5.   ]    
  6. });  

ExtJS Grid Tooltip实现之二:单元格提示

1)使用Ext.QuickTips

在开始的时候就执行Ext.QuickTips.init();

然后对需要提示的单元格,重写renderer函数,添加ext:qtitle , ext:qtip这2个属性即可。

这个在官方的FAQ上有详细描述: http://extjs.com/learn/Ext_FAQ_Grid#Add_ToolTip_or_Qtip

  1. //option 1    
  2. //========    
renderer = function (data, metadata, record, rowIndex, columnIndex, store) {    

  1.     //build the qtip:    
  2.     var title = 'Details for ' + value + '-' + record.get('month') +    
  3.         '-' + record.get('year');    
  4.     var tip = record.get('sunday_events');    
  5.      
  6.     metadata.attr = 'ext:qtitle="' + title + '"' + ' ext:qtip="' + tip + '"';    
  7.      
  8.     //return the display text:    
  9.     var displayText = '< span style="color: #000;">' + value + '< /span>< br />' +    
  10.         record.get('sunday_events_short');    
  11.     return displayText;    
  12. };    
  13.      
  14. //option 2    
  15. //========    
  16. renderer = function (data, metadata, record, rowIndex, columnIndex, store) {    
  17.     var qtip = '>';    
  18.     if(data >= 0){    
  19.         qtip = " qtip='yeah'/>";    
  20.         return '< span style="color:green;"' + qtip + data + '%< /span>';    
  21.     }else if(data <  0){    
  22.         qtip = " qtip='woops'/>";    
  23.         return '< span style="color:red;"' + qtip + data + '%< /span>';    
  24.     }    
  25.     return data;    
  26. };    
  27.      
  28. //option 3    
  29. //========    
  30. var qtipTpl = new Ext.XTemplate(    
  31.     '< h3>Phones:< /h3>',    
  32.     '< tpl for=".">',    
  33.     '< div>< i>{phoneType}:< /i> {phoneNumber}< /div>',    
  34.     '< /tpl>'    
  35. );    
  36.      
  37. renderer = function (data, metadata, record, rowIndex, columnIndex, store) {    
  38.      
  39.     // get data     
  40.     var data = record.data;    
  41.      
  42.     // convert phones to array (only once)     
  43.     data.phones = Ext.isArray(data.phones) ?    
  44.         data.phones :     
  45.         this.getPhones(data.phones);    
  46.      
  47.     // create tooltip     
  48.     var qtip = qtipTpl.apply(data.phones);    
  49.      
  50.     metadata.attr = 'ext:qtitle="' + title + '"' + ' ext:qtip="' + tip + '"';    
  51.      
  52.     //return the display text:    
  53.     return data;        
  54. };   

2)使用ToolTip

官方也已经给出方法:

http://extjs.com/forum/showthread.php?p=112125#post112125

http://extjs.com/forum/showthread.php?t=55690

以上给出的方法是可以让一个grid里面的元素共享一个tooltip对象。一般用来做rowtip

不过3.0有更好的方式,如下:

ExtJS Grid Tooltip实现之三:行提示 RowTip

ExtJS3.0新增的方法,设置tooltip的delegate

  1. var myGrid = new Ext.grid.gridPanel(gridConfig);    
  2. myGrid.on('render'function(grid) {    
  3.     var store = grid.getStore();  // Capture the Store.    
  4.     
    var view = grid.getView();    // Capture the GridView.    

  1.     
  2.     myGrid.tip = new Ext.ToolTip({    
  3.         target: view.mainBody,    // The overall target element.    
  4.     
  5.         delegate: '.x-grid3-row'// Each grid row causes its own seperate show and hide.    
  6.     
  7.         trackMouse: true,         // Moving within the row should not hide the tip.    
  8.     
  9.         renderTo: document.body,  // Render immediately so that tip.body can be referenced prior to the first show.    
  10.     
  11.         listeners: {              // Change content dynamically depending on which element triggered the show.    
  12.     
  13.             beforeshow: function updateTipBody(tip) {    
  14.                    var rowIndex = view.findRowIndex(tip.triggerElement);
     
                        if(!Ext.isEmpty(content)){
                            tip.body.dom.innerHTML = "提示信息";
                        }else{
                            return false; //停止执行,从而禁止显示Tip
                            tip.destroy();
                        }

  15.             }    
  16.         }    
  17.     });    
  18. });   
分享到:
评论

相关推荐

    Extjs4添加tooltip

    Extjs4的textfield控件竟然没有tooltip悬浮提示,这应该算是个bug吧。网上查了很多,也没有方案。后来自己通过查询并整理出这个方案,终于实现了。 思想如下: 在textfield渲染时注册mouseover事件,然后在其中调用...

    Extjs Grid 中的 ToolTip效果

    EXTJS Grid中的ToolTip功能允许我们在不增加界面复杂性的情况下,为用户提供必要的提示信息。 首先,EXTJS提供了两种主要类型的Tooltip:Ext.tip.ToolTip和Ext.grid.tooltip.GridTip。前者是通用的Tooltip类,适用...

    ExtJS ToolTip功能

    通过上述示例,我们了解了如何在ExtJS中使用`ToolTip`功能为网格中的每一列提供额外的信息提示。这种方式不仅提高了应用的交互性,也增强了用户体验。此外,我们还学习了如何定义组件、配置布局、设置数据存储、添加...

    extjs 04_grid 单击事件新发现

    以下代码展示了如何在鼠标移到Grid的某个单元格上时,显示一个提示框(tooltip)显示该单元格的数据: ```javascript grid.on('mouseover', function(e) { var index = grid.getView().findRowIndex(e.getTarget()...

    中文的Extjs的api手册

    8. **工具提示(ToolTip)**:可以为任何元素添加自定义的提示信息,提升用户体验。 9. **事件处理**:ExtJS的事件模型使得组件之间的交互变得简单,开发者可以监听和响应各种用户操作。 10. **国际化支持**:虽然...

    Extjs grid添加一个图片状态或者按钮的方法

    在ExtJS框架中,对Grid组件添加图片或按钮以表示特定状态或执行特定操作是一种常见需求。我们可以通过几种方法实现这一功能,下面详细阐述: 一、使用renderer为Grid列添加图片状态 renderer是一个用于渲染Grid中...

    Extjs 3.0 中文API

    9. **工具提示(Tooltip)和提示框(MessageBox)**:提供美观且功能强大的提示信息,增强用户体验。 10. **国际化(Internationalization, i18n)**:支持多语言,方便创建面向全球用户的Web应用。 11. **AJAX...

    ExtJS文字按钮列

    tooltip: '我的按钮', // 提示信息 handler: function(grid, rowIndex) { // 点击事件处理函数 var record = grid.getStore().getAt(rowIndex); // 在这里处理逻辑,如获取当前行数据或执行操作 }, getClass: ...

    extjs3.0 API 中英

    8. **工具提示和提示框**:提供可自定义的工具提示(ToolTip)和提示框( MessageBox),增强了用户体验。 9. **Drag and Drop**:支持拖放操作,可以方便地创建拖放功能,例如在列表或网格中的排序。 10. **国际...

    extjs扩展标记

    1. **EXTJS组件**:EXTJS的核心是它的组件模型,包括GridPanel、TreePanel、PropertyGrid、EditorGridPanel、TabPanel、FormPanel、Panel、Window、ToolTip和FieldSet等。这些组件可以组合起来创建复杂的用户界面,...

    ExtJs的resultGrids中动态添加按钮

    在ExtJS中,我们可以利用`grid`的`column`配置和`actionColumn`来实现这一功能。 首先,我们需要定义一个`Ext.grid.Panel`,这是ExtJS中的表格组件。在创建这个组件时,我们需要指定列模型(`columns`),其中可以...

    ExtJs3.0和2.0中文API

    8. **工具提示(Tooltip)**:提供了强大的工具提示功能,支持自定义内容和样式。 9. **Grid组件增强**:网格组件支持分页、排序、过滤和编辑等功能,更易于创建数据展示和操作的界面。 通过下载提供的`ExtJS_API_...

    extjs中form与grid交互数据(record)的方法

    首先在grid的tbar中定义编辑按钮:Js代码 代码如下:id:’editDataButton’, text:’编辑’, tooltip:’编辑’, iconCls:’edit’, handler: function(){ showeditPanel();} 再定义form: Js代码 代码如下:var ...

    EXTJS 3 中文API手册

    9. **工具提示(Tooltip)和提示框(Prompt)**:EXTJS 3提供了丰富的提示功能,包括鼠标悬停时显示信息的工具提示,以及交互式的提示框,可以用来获取用户输入。 10. **Ajax请求(Ext.Ajax)**:EXTJS 3通过Ext....

    extjs 3.3 API文档与源文件

    提供了强大的工具提示(Tooltip)和弹出框(Window)功能,可以自定义内容、样式和行为,增强用户体验。 7. **Ajax和JSONP**: ExtJS内置了Ajax和JSONP支持,方便与服务器进行异步通信。通过使用Ajax请求,可以...

    extjs的xtype class对照表

    10. **工具提示(Tooltip)** - `xtype: 'tooltip'` 对应的类是 `Ext.tip.ToolTip`。工具提示用于显示鼠标悬停在元素上方时的附加信息。 在实际应用中,开发者可以根据需求自定义`xtype`,通过继承已有的`class` ...

    extjs gridpanel例子和简单应用

    tooltip: '操作', handler: function (a, b, c, d) { var st = _store.getAt(b); alert(st.get('sex')); } } ] }, {header: '编码', dataIndex: "code"} ]); ``` 创建了一个`ColumnModel`实例,定义了...

    Extjs中文教程2.x

    - **Spket IDE**: 推荐使用支持 Extjs 的集成开发环境,如 Spket IDE,它提供了代码提示、调试等功能。 - **资源**: 收集 Extjs 的官方文档、社区论坛等资源,以便在开发过程中查阅。 #### 二、Extjs OOP 基础 **...

    ExtJs使用过程中积攒的一些东西

    - 按钮实例:创建一个按钮,包括`xtype`(类型)、`iconCls`(图标类名)、`id`、`tooltip`(提示)、`text`(文字)和`handler`(点击事件处理函数)。 3. **Ext.TabPanel**: - TabPanel是ExtJs中的一个多标签...

Global site tag (gtag.js) - Google Analytics