`
mutongwu
  • 浏览: 448470 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

给Grid行添加Tip信息:

    博客分类:
  • Ext
EXT 
阅读更多

在EXT3中,可以使用以下方法添加Tip信息:
1.给GridPanel添加一个render事件:
	"listeners" : {
						'render' : Ext.util.gridRenderFn
		}

2.renderer 事件函数如下:
Ext.util.gridRenderFn = function(grid) {
	var store = grid.getStore();
	var view = grid.getView();
	grid.tip = new Ext.ToolTip({
				target : view.mainBody,
				delegate : '.x-grid3-row',
				trackMouse : true,
				width : 250,
				anchor : 'left',
				renderTo : document.body,
				dismissDelay : 0,
				listeners : {
					beforeshow : function updateTipBody(tip) {
						var rec = store.getAt(view
								.findRowIndex(tip.triggerElement));
						tip.body.dom.innerHTML = Ext.util.Format
								.alarmTipFn(rec);
					}
				}
			});
};

3.alarmTipTpl是用于组织Tip内容的:
Ext.util.Format.alarmTipTpl = new Ext.Template(    
		'<table><tr><td nowrap>发生时间:</td><td>{alarmDate}</td></tr>',
		'<tr><td nowrap>地市名称:</td><td>{cityName}</td></tr>',
		'<tr><td nowrap>站点名称:</td><td>{platformName}</td></tr>',
		'<tr><td nowrap>设备名称:</td><td>{equName}</td></tr>',
		'<tr><td nowrap>参数名称:</td><td>{equParamName}</td></tr>',
		'<tr><td nowrap>内容:</td><td>{alarmContent}</td></tr></table>'
	);
Ext.util.Format.alarmTipFn = function(rec) {
	return Ext.util.Format.alarmTipTpl.apply(rec.data);
}
分享到:
评论

相关推荐

    easyui datagrid单元格tip实现

    在Easyui的1.3.3版本中,作者新增了tooltip组件,尽管样式看起来也...之前我写过一篇《扩展:datagrid鼠标经过提示单元格内容》那就是用纯编码生成的tip,更为丑陋,有了Easyui 1.3.3的tooltip,我们实现起来就很容易了

    extjs4 ComboBox 点击下拉框 出现grid效果

    ComboBox的默认行为是弹出一个包含选项的列表,而你想要实现的是当用户点击下拉按钮时,展示一个Grid,这样可以展示更多的信息并且支持更复杂的交互。这种自定义的行为需要对EXTJS4的事件处理和组件嵌套有深入的理解...

    ExtJS ToolTip功能

    这行代码定义了一个名为`WebApp.view.tip.ToolTip`的新类,该类继承自`Ext.container.Container`。这意味着我们可以使用所有容器类的功能。 2. **布局配置**: ```javascript layout:{ type:'center', pack:'...

    Ansys Turbo Grid 12.0 教程

    - **添加中间层:** 根据需要,可以在特定区域添加额外的中间层以提高精度。 - **生成网格:** 完成以上步骤后,就可以生成最终的网格模型。 - **分析粗网格:** 对生成的粗网格进行初步的质量评估。 - **增加网格...

    OpenFlashChart目前最详细的线形图模板

    - **tip**:提示信息。 - **values**:数据点集合,每个数据点可包含额外的样式配置。 ##### 3.4 工具提示配置 ```json "tooltip":{ "shadow":true, "stroke":1, "background":"#d0d0ff", "title":"{font-size...

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

    这里的`value`变量包含了列的实际数据,将其赋值给`ext:qtip`属性,这样当鼠标悬停在该单元格上时,就会显示对应的提示信息。 3. **配置Grid列**: 在配置Grid的列模型(column model)时,确保指定了`renderer`...

    Extjs中文教程2.x

    - **作用**: 显示提示、警告、错误等信息给用户。 - **类型**: 提示框、输入框、确认框、自定义消息框等。 **3.2 实现方式** - **提示框**: `Ext.Msg.alert('Title', 'Message')`。 - **输入框**: `Ext.Msg.prompt...

    C#控件说明

    48. HelpProvider (hlp):为控件添加帮助信息。 49. MessageQueue (msq):访问消息队列服务器上的队列。 50. PerformanceCounter (pfc):监控Windows性能计数器。 51. Process (prc):管理和操作本地或远程进程。...

    gtk+2.0显示信息对话框

    确保对话框布局正确,可以使用`gtk_box_pack_start()`或`gtk_grid_attach()`将按钮和标签添加到对话框中。 最后,别忘了调用`gtk_widget_show_all()`来显示对话框及其所有子组件,然后使用`gtk_main()`进入事件循环...

    C#控件前缀名大全

    - `tip`:代表ToolTip控件,用于显示鼠标悬停时的提示信息。 - `tvw`:表示TreeView控件,用于创建树状结构的列表。 - `wbs`:代表WebBrowser控件,用于在应用程序中嵌入网页。 ### 2. 容器控件 容器控件用于容纳...

    easyui1.3.1整站文件

    例如,Grid组件的异步加载、行级别的操作功能,以及Dialog的拖动和调整大小等。 在使用EasyUI时,开发者需要注意以下几点: - **主题定制**:EasyUI 提供了几种预设的主题,可以通过修改CSS来定制自己的界面风格。 ...

    用WPF实现屏幕文字提示

    这种提示通常用于提醒用户某些重要的信息或操作结果,而不会干扰用户的正常工作流程。 #### 二、实现步骤 ##### 1. 创建一个新的WPF应用程序项目 首先,在Visual Studio或其他支持WPF开发的IDE中创建一个新的WPF...

    jQuery EasyUI 1.5.2 离线简体中文API文档

    13. **提示(Tip)**:鼠标悬停时显示提示信息,如tooltip。 14. **日期选择器(DatePicker)**:提供日历选择功能,方便用户输入日期。 15. **滑块(Slider)**:用于数值选择,常用于调整音量、亮度等。 在使用...

    jquery-easyui-1.3.2

    9. **提示(Tip)**:包括普通提示、气泡提示、提示框等,用于显示信息或警告。 三、版本1.3.2的改进与特性 jQuery EasyUI 1.3.2 版本相较于早期版本,做了诸多优化和增强,例如: 1. **性能提升**:对组件的渲染...

    extjs4.0学习笔记

    `viewConfig`允许自定义网格视图的属性,如`stripeRows`用于开启斑马线效果,`getRowClass`函数可以为每一行添加自定义的CSS类。 EXTJS 4.0的学习涉及到了组件的创建、布局的管理、数据绑定和事件处理等多个方面,...

    Tip-Calculator-Final

    此外,Flexbox或Grid布局也可能被用于更精细地控制元素的排列和对齐,尤其是在复杂的布局设计中。 颜色、字体和间距的设定也是提升用户体验的重要方面。CSS提供了丰富的颜色选择,可以使用颜色名称、十六进制、RGB...

    extjs的xtype class对照表

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

    jquery-easyui-1.2.3.rar

    9. **提示(Tip)**:可以为元素添加提示信息,包括简单的文字提示和自定义内容的提示框。 10. **树(Tree)**:展示层级关系的数据,支持展开、折叠、拖拽等操作。 除了这些基本组件,jQuery EasyUI 还提供了数据...

    C# WPF 状态栏图标特效 类似QQ/MSN的状态栏图标显示 NotifyIcon

    在WPF的XAML文件中,添加`WindowsFormsHost`控件,并将`NotifyIcon`实例赋值给它的`Child`属性: ```xml xmlns:winforms="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms" xmlns:wfHost=...

Global site tag (gtag.js) - Google Analytics