- 浏览: 39004 次
- 性别:
文章分类
最新评论
-
少年阿郎:
对你有用就好啊!呵呵 !
ExtJs中实现tree节点,全部是单击展开和收缩效果,和收藏夹点击功能一样 -
yefansiping:
给力,谢谢
ExtJs中实现tree节点,全部是单击展开和收缩效果,和收藏夹点击功能一样
-
本文总结了ExtJS Grid Tooltip的几种实现方法。ExtJS Grid Tooltip可以通过表头提示,单元格提示,行提示以及自己手动添加等方式完成。本文参考了官方FAQ上提供的描述。
ExtJS Grid Tooltip实现之一:表头提示
在2.2里面是设置ColumnModel.tooltip ,3.0则是Column. tooltip 如下:
- var grid = new Ext.grid.GridPanel({
- columns:[
- {header:'名称',dataIndex:'name',tooltip:'对象名称'},
- {header:'开始时间 - 结束时间 < br/>成功/失败/成功率', dataIndex:'sucRate',tooltip:'成功/失败/成功率'}
- ]
- });
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
- //option 1
- //========
renderer = function (data, metadata, record, rowIndex, columnIndex, store) {
- //build the qtip:
- var title = 'Details for ' + value + '-' + record.get('month') +
- '-' + record.get('year');
- var tip = record.get('sunday_events');
- metadata.attr = 'ext:qtitle="' + title + '"' + ' ext:qtip="' + tip + '"';
- //return the display text:
- var displayText = '< span style="color: #000;">' + value + '< /span>< br />' +
- record.get('sunday_events_short');
- return displayText;
- };
- //option 2
- //========
- renderer = function (data, metadata, record, rowIndex, columnIndex, store) {
- var qtip = '>';
- if(data >= 0){
- qtip = " qtip='yeah'/>";
- return '< span style="color:green;"' + qtip + data + '%< /span>';
- }else if(data < 0){
- qtip = " qtip='woops'/>";
- return '< span style="color:red;"' + qtip + data + '%< /span>';
- }
- return data;
- };
- //option 3
- //========
- var qtipTpl = new Ext.XTemplate(
- '< h3>Phones:< /h3>',
- '< tpl for=".">',
- '< div>< i>{phoneType}:< /i> {phoneNumber}< /div>',
- '< /tpl>'
- );
- renderer = function (data, metadata, record, rowIndex, columnIndex, store) {
- // get data
- var data = record.data;
- // convert phones to array (only once)
- data.phones = Ext.isArray(data.phones) ?
- data.phones :
- this.getPhones(data.phones);
- // create tooltip
- var qtip = qtipTpl.apply(data.phones);
- metadata.attr = 'ext:qtitle="' + title + '"' + ' ext:qtip="' + tip + '"';
- //return the display text:
- return data;
- };
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
- var myGrid = new Ext.grid.gridPanel(gridConfig);
- myGrid.on('render', function(grid) {
- var store = grid.getStore(); // Capture the Store.
var view = grid.getView(); // Capture the GridView.
- myGrid.tip = new Ext.ToolTip({
- target: view.mainBody, // The overall target element.
- delegate: '.x-grid3-row', // Each grid row causes its own seperate show and hide.
- trackMouse: true, // Moving within the row should not hide the tip.
- renderTo: document.body, // Render immediately so that tip.body can be referenced prior to the first show.
- listeners: { // Change content dynamically depending on which element triggered the show.
- beforeshow: function updateTipBody(tip) {
- var rowIndex = view.findRowIndex(tip.triggerElement);
if(!Ext.isEmpty(content)){
tip.body.dom.innerHTML = "提示信息";
}else{
return false; //停止执行,从而禁止显示Tip
tip.destroy();
}
- }
- }
- });
- });
发表评论
-
2222222
2012-06-29 06:28 0request.setAttribute("cvos ... -
下载指定目录文件
2012-06-27 07:55 0本人自己的开发下载模板 package com.huawei; ... -
12345678
2012-06-26 18:40 0else if(".xlsx".equal ... -
1234567
2012-06-26 18:40 0private List<DvTVehicle> ... -
123456
2012-06-26 18:38 0package com.huawei; import java ... -
12345
2012-06-26 18:37 0<?xml version="1.0" ... -
123
2012-06-26 18:36 0<%@ page language="java ... -
批量上传
2012-06-24 22:32 0Apache POI是Apache软件基金会的开放源码函式库, ... -
new Date()时间格式为:2012-12-02 12:15:00
2012-02-03 19:06 4298renderer:function(value){ ... -
new Date
2012-01-17 00:18 1194function GetCurrentTime(flag) { ... -
ss
2011-11-02 20:32 0sfd -
啊啊速度发生大幅
2011-10-31 17:55 0士大夫撒地方撒地方生 -
ExtJs中gridPanle值浮动层显示不论是汉字,字符,还是数字都实现自动换行效果
2011-10-18 01:53 2280<%@ page language="java ... -
ext的grid列表的字段 浮动信息
2011-10-17 00:47 0<p><span style="c ... -
Ext.grid.ColumnModel
2011-10-17 00:24 1051在列映射的时候就要设定渲染方式 Js代码 ... -
Extjs中Gridpanel中加每行提示
2011-10-17 00:09 1664在使用GridPanel时,在列数量较多或存在备注型信息时,可 ... -
Extjs GridPanel行提示的几种实现方式
2011-10-17 00:06 20071..使用renderer;{ ... -
树节点操作加载根节点
2011-10-12 18:26 1211自己定义: this.nodeRoot = new ... -
怎么样获取'textarea'输入的值
2011-10-12 18:10 2451这是ExtJs中的组件 items : [{ ... -
弹出信息框
2011-10-12 17:46 824Ext.Msg.show({ title ...
相关推荐
Extjs4的textfield控件竟然没有tooltip悬浮提示,这应该算是个bug吧。网上查了很多,也没有方案。后来自己通过查询并整理出这个方案,终于实现了。 思想如下: 在textfield渲染时注册mouseover事件,然后在其中调用...
EXTJS Grid中的ToolTip功能允许我们在不增加界面复杂性的情况下,为用户提供必要的提示信息。 首先,EXTJS提供了两种主要类型的Tooltip:Ext.tip.ToolTip和Ext.grid.tooltip.GridTip。前者是通用的Tooltip类,适用...
通过上述示例,我们了解了如何在ExtJS中使用`ToolTip`功能为网格中的每一列提供额外的信息提示。这种方式不仅提高了应用的交互性,也增强了用户体验。此外,我们还学习了如何定义组件、配置布局、设置数据存储、添加...
以下代码展示了如何在鼠标移到Grid的某个单元格上时,显示一个提示框(tooltip)显示该单元格的数据: ```javascript grid.on('mouseover', function(e) { var index = grid.getView().findRowIndex(e.getTarget()...
8. **工具提示(ToolTip)**:可以为任何元素添加自定义的提示信息,提升用户体验。 9. **事件处理**:ExtJS的事件模型使得组件之间的交互变得简单,开发者可以监听和响应各种用户操作。 10. **国际化支持**:虽然...
在ExtJS框架中,对Grid组件添加图片或按钮以表示特定状态或执行特定操作是一种常见需求。我们可以通过几种方法实现这一功能,下面详细阐述: 一、使用renderer为Grid列添加图片状态 renderer是一个用于渲染Grid中...
9. **工具提示(Tooltip)和提示框(MessageBox)**:提供美观且功能强大的提示信息,增强用户体验。 10. **国际化(Internationalization, i18n)**:支持多语言,方便创建面向全球用户的Web应用。 11. **AJAX...
tooltip: '我的按钮', // 提示信息 handler: function(grid, rowIndex) { // 点击事件处理函数 var record = grid.getStore().getAt(rowIndex); // 在这里处理逻辑,如获取当前行数据或执行操作 }, getClass: ...
8. **工具提示和提示框**:提供可自定义的工具提示(ToolTip)和提示框( MessageBox),增强了用户体验。 9. **Drag and Drop**:支持拖放操作,可以方便地创建拖放功能,例如在列表或网格中的排序。 10. **国际...
1. **EXTJS组件**:EXTJS的核心是它的组件模型,包括GridPanel、TreePanel、PropertyGrid、EditorGridPanel、TabPanel、FormPanel、Panel、Window、ToolTip和FieldSet等。这些组件可以组合起来创建复杂的用户界面,...
在ExtJS中,我们可以利用`grid`的`column`配置和`actionColumn`来实现这一功能。 首先,我们需要定义一个`Ext.grid.Panel`,这是ExtJS中的表格组件。在创建这个组件时,我们需要指定列模型(`columns`),其中可以...
8. **工具提示(Tooltip)**:提供了强大的工具提示功能,支持自定义内容和样式。 9. **Grid组件增强**:网格组件支持分页、排序、过滤和编辑等功能,更易于创建数据展示和操作的界面。 通过下载提供的`ExtJS_API_...
首先在grid的tbar中定义编辑按钮:Js代码 代码如下:id:’editDataButton’, text:’编辑’, tooltip:’编辑’, iconCls:’edit’, handler: function(){ showeditPanel();} 再定义form: Js代码 代码如下:var ...
9. **工具提示(Tooltip)和提示框(Prompt)**:EXTJS 3提供了丰富的提示功能,包括鼠标悬停时显示信息的工具提示,以及交互式的提示框,可以用来获取用户输入。 10. **Ajax请求(Ext.Ajax)**:EXTJS 3通过Ext....
提供了强大的工具提示(Tooltip)和弹出框(Window)功能,可以自定义内容、样式和行为,增强用户体验。 7. **Ajax和JSONP**: ExtJS内置了Ajax和JSONP支持,方便与服务器进行异步通信。通过使用Ajax请求,可以...
10. **工具提示(Tooltip)** - `xtype: 'tooltip'` 对应的类是 `Ext.tip.ToolTip`。工具提示用于显示鼠标悬停在元素上方时的附加信息。 在实际应用中,开发者可以根据需求自定义`xtype`,通过继承已有的`class` ...
tooltip: '操作', handler: function (a, b, c, d) { var st = _store.getAt(b); alert(st.get('sex')); } } ] }, {header: '编码', dataIndex: "code"} ]); ``` 创建了一个`ColumnModel`实例,定义了...
- **Spket IDE**: 推荐使用支持 Extjs 的集成开发环境,如 Spket IDE,它提供了代码提示、调试等功能。 - **资源**: 收集 Extjs 的官方文档、社区论坛等资源,以便在开发过程中查阅。 #### 二、Extjs OOP 基础 **...
- 按钮实例:创建一个按钮,包括`xtype`(类型)、`iconCls`(图标类名)、`id`、`tooltip`(提示)、`text`(文字)和`handler`(点击事件处理函数)。 3. **Ext.TabPanel**: - TabPanel是ExtJs中的一个多标签...