`
torch921
  • 浏览: 5547 次
  • 性别: Icon_minigender_1
  • 来自: 长春
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

Ext.grid 添加tooltip

 
阅读更多
对想要添加tooltip的列重写renderer方法,并添加ext:qtitle , ext:qtip这2个属性。
eg:
var cm = new Ext.grid.ColumnModel([
  		new xg.RowNumberer(),
  		sm2,
  		{header: "姓名",sortable: true,dataIndex: 'seName'},
  		{header: "工作地区",sortable: true,dataIndex: 'seAddressName'},
  		{header: "职务",sortable: true,dataIndex: 'duties',renderer:function(v,p){
            //v : value , p : cell
            p.attr =  'ext:qtitle="职务"';
            p.attr += ' ext:qtip="'  + v + '"';
            return v;
        }},
  		{header: "身份证",sortable: true,dataIndex: 'cardId'}
	]);

使用rendertooltip之前要初始化QuickTips
Ext.QuickTips.init();
分享到:
评论

相关推荐

    ExtJS ToolTip功能

    此组件包含一个`Ext.grid.Panel`,并演示了如何为表格中的每一列添加ToolTip。 #### 代码解析 1. **定义组件**: ```javascript Ext.define('WebApp.view.tip.ToolTip',{ extend:'Ext.container.Container', ....

    Extjs Grid 中的 ToolTip效果

    首先,EXTJS提供了两种主要类型的Tooltip:Ext.tip.ToolTip和Ext.grid.tooltip.GridTip。前者是通用的Tooltip类,适用于任何需要显示提示的地方;后者是专门为Grid定制的,能更好地与Grid的行和列配合工作。 实现...

    EXT piechart,grid,和chart的实例

    在"EXT piechart,grid, and chart的实例"中,我们将深入探讨EXT库中的饼图(piechart)、网格(grid)和图表(chart)这三种关键组件的使用方法。 1. EXT Piechart(饼图) EXT Piechart是一种用于展示数据占比关系...

    ext2.0 详解和API

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

    extjs的xtype class对照表

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

    ExtJS文字按钮列

    2. **自定义扩展**:如果需要更多的定制,可以扩展`Ext.grid.ActionColumn`,并添加自己的方法和属性,例如: ```javascript Ext.extend(MyTextActionColumn, Ext.grid.ActionColumn, { text: '操作', getText: ...

    Extjs中文教程2.x

    `new Ext.form.TextField({ labelWidth: 100, labelAlign: 'right', allowBlank: false, listeners: { afterrender: function(field) { field.el.on('mouseover', function(e) { var tip = new Ext.ToolTip({ ...

    Ext的用户扩展控件-----可以在表格的单元格上弹出提示层信息

    "Ext的用户扩展控件-----可以在表格的单元格上弹出提示层信息"是一个专门为EXT的Grid组件设计的功能增强插件,它使得用户在鼠标悬停于表格的特定单元格时,能够显示更详细的信息提示,极大地提升了数据展示的交互性...

    extjs gridpanel例子和简单应用

    var _grid = new Ext.grid.GridPanel({ height: 500, width: 800, store: _store, title: 'grid', cm: _cm, tbar: _toolbar }); ``` 最后创建了一个`GridPanel`实例,指定了其高度、宽度、数据源、标题、...

    extjs 04_grid 单击事件新发现

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

    ExtJs的resultGrids中动态添加按钮

    var grid = Ext.create('Ext.grid.Panel', { store: myStore, // 数据存储对象 columns: [ { text: '字段1', dataIndex: 'field1' }, { text: '字段2', dataIndex: 'field2' }, // 动态添加的按钮列 { xtype:...

    基于Extjs的开源控件库ExtAspNet中文版 v3.1.9

    -修正other/addtab.aspx示例的JS错误和BoundField使用Tooltip的错误(Dennis_Liu)。 +修正Window的GetShowReference返回的字符串中包含双引号的问题(︶ㄣ東東ㄣ、天蓝若空、李剑飞、克儿~)。 -虽然返回的...

    中文的Extjs的api手册

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

    EXTJS分页全面分析

    var grid = new Ext.grid.GridPanel({ renderTo: Ext.getBody(), title: 'й', width: 650, autoHeight: true, autoExpandColumn: 'memo', cm: cm, store: store, bbar: pagebar }); ``` #### 三、服务端...

    ext-1.0.1.rar

    2. **Components**:EXT提供了大量的UI组件,如表格(Grid)、面板(Panel)、菜单(Menu)、按钮(Button)等。这些组件具有丰富的功能和高度可定制性,可以满足各种复杂的界面需求。 3. **Data Package**:数据包...

    Ext3.0 中文API.CHM

    4. **网格(Grid)**:Ext的GridPanel是显示大量数据的利器,支持分页、排序、过滤和编辑功能。 5. **表单(Form)**:Ext的表单组件齐全,支持各种输入控件,以及验证和数据提交功能。 6. **Ajax通信**:使用Ajax...

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

    `Ext.QuickTips`是ExtJS提供的一个内置组件,用于创建和管理快速提示(tooltip)。它提供了一种优雅的方式来显示临时的、浮动的信息提示,通常在用户将鼠标悬停在某个元素上时显示。在我们的场景中,我们希望在列...

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

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

    Ext 2.3中文文档-API

    1. **组件系统**:EXT提供了丰富的UI组件,如窗口(Window)、面板(Panel)、按钮(Button)、表格(Grid)等。文档详细介绍了每个组件的属性、方法和事件,以及如何自定义组件。 2. **数据绑定**:EXT支持数据...

Global site tag (gtag.js) - Google Analytics