`
jiajiafucs
  • 浏览: 13114 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

ExtJS grid中显示行数据提示信息tip

阅读更多
 custGrid.on('render', function(grid) {   
       var store = grid.getStore();  
       var view = grid.getView();       
       grid.tip = new Ext.ToolTip({   
           target: view.mainBody,      
           delegate: '.x-grid3-row', 
           trackMouse: true,     
           renderTo: document.body,   	     
           listeners: {   
               beforeshow: function updateTipBody(tip) {   
                   var rowIndex = view.findRowIndex(tip.triggerElement);   
                   var record = store.getAt(rowIndex);
                   tip.body.dom.innerHTML = 
'ID:'+record.get('custId')+
'<br/>NO:'+record.get('custName')+
'<br/>Address:'+record.get('address')+
'<br/>Mobile:'+record.get('mobile');   
               }   
           }   
       });   
   });    
1
5
分享到:
评论
1 楼 jiajiafucs 2011-11-01  
js

相关推荐

    Extjs Grid 中的 ToolTip效果

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

    ExtJS ToolTip功能

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

    extjs2.02帮助文档

    11. **工具提示和弹出层**:ExtJS提供了丰富的提示和弹出层组件,如Tip、Window和Dialog,用于显示额外信息或执行交互操作。 12. **树形结构**:TreePanel组件允许显示和操作层次化的数据,常用于文件系统或组织...

    Extjs中文教程2.x

    - **功能**: 当鼠标悬停在组件上时显示提示信息。 - **示例**: `new Ext.form.TextField({ labelWidth: 100, labelAlign: 'right', allowBlank: false, listeners: { afterrender: function(field) { field.el.on('...

    extjs的xtype class对照表

    表格组件用于显示结构化的数据,支持排序、分页、行编辑等功能。 3. **表单(Form)** - `xtype: 'form'` 对应的类是 `Ext.form.Panel`。表单组件用于收集用户输入,可以包含各种表单字段,如文本框、复选框、...

    ext北风基础班讲义

    5. **模板(Template)与数据绑定**:如果涉及到复杂内容的展示,可能还会讲解如何使用EXTJS的模板系统,将动态数据绑定到InfoTip中。 6. **实战演练**:通过编写代码示例,实践创建和使用InfoTip,可能包括点击...

    ext2.0 详解和API

    8. **工具提示**:如Ext.tip.ToolTip,用于显示浮动的提示信息。 **EXT2.0的Demos** "Demos_Ext2.0.rar"可能包含了EXT2.0的官方示例代码,这些示例通常涵盖了框架的各个功能模块,包括基本组件的使用、数据绑定、...

    用tip解决Ext列宽度不够的问题

    通过以上步骤,我们就能在ExtJS的Grid中实现列宽度不足时,通过鼠标悬停显示全部内容的提示功能,提升用户体验,确保用户能够查看到完整的数据信息。这种解决方案在处理大量或者长文本数据时尤为有用。

    Extjs4 GridPanel 的几种样式使用介绍

    此外,还可以使用`Ext.tip.QuickTipManager.init()`初始化快速提示管理器,这样在鼠标悬停在列头或其他元素上时,可以显示额外的信息。 总之,ExtJS 4的GridPanel提供了强大的功能来展示和操作数据,包括数据源的...

Global site tag (gtag.js) - Google Analytics