- 浏览: 38305 次
- 性别:
文章分类
最新评论
-
少年阿郎:
对你有用就好啊!呵呵 !
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 4250renderer:function(value){ ... -
new Date
2012-01-17 00:18 1164function GetCurrentTime(flag) { ... -
ss
2011-11-02 20:32 0sfd -
啊啊速度发生大幅
2011-10-31 17:55 0士大夫撒地方撒地方生 -
ExtJs中gridPanle值浮动层显示不论是汉字,字符,还是数字都实现自动换行效果
2011-10-18 01:53 2198<%@ page language="java ... -
ext的grid列表的字段 浮动信息
2011-10-17 00:47 0<p><span style="c ... -
Ext.grid.ColumnModel
2011-10-17 00:24 1013在列映射的时候就要设定渲染方式 Js代码 ... -
Extjs中Gridpanel中加每行提示
2011-10-17 00:09 1607在使用GridPanel时,在列数量较多或存在备注型信息时,可 ... -
Extjs GridPanel行提示的几种实现方式
2011-10-17 00:06 19661..使用renderer;{ ... -
树节点操作加载根节点
2011-10-12 18:26 1170自己定义: this.nodeRoot = new ... -
怎么样获取'textarea'输入的值
2011-10-12 18:10 2397这是ExtJs中的组件 items : [{ ... -
弹出信息框
2011-10-12 17:46 781Ext.Msg.show({ title ...
相关推荐
Extjs4的textfield控件竟然没有tooltip悬浮提示,这应该算是个bug吧。网上查了很多,也没有方案。后来自己通过查询并整理出这个方案,终于实现了。 思想如下: 在textfield渲染时注册mouseover事件,然后在其中调用...
NULL 博文链接:https://mzl-2011.iteye.com/blog/1151199
ExtJS tooltip功能组件实例
ExtJS grid过滤操作,可以动态操作本地的store更改筛选的内容
extjs grid示例代码extjs grid示例代码extjs grid示例代码extjs grid示例代码
ExtJs Grid是否选择行,是:返回选择行record;否:返回false
EXTJS grid导出EXCEL文件,源码可以直接导入MYECLIPSE使用,EXTJS版本3.2.0
extjs grid 多表头 插件 extjs grid 多表头 插件
extjs grid ide:myeclipse5.5 jboss4.2.1 extjs4.2.1
很多同事在用extjs grid做分页的时候,往往会想用grid的多选功能来实现导出Excel之类的功能(也就是所谓的多选记忆功能),但在选选择下一页的时候 上一页选中的已经清除 这是因为做分页的时候又向服务器请求了分页...
这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹,其余文件过大并且与主题无关,因此未包含。具体方法,请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》
ExtJs grid多选时获取选中的所有值,以及其他相关的操作
ExtJs 4.0 Grid 单元格合并控件封装
这是一个简单的在extjs下的grid转化到Excel,里面代码简单易懂,在包里面还集成了复杂的js转化函数,不过本人没有用它来进行转化! 注:在用EXTJS的导出Excel技术中,一定要注意分页的问题
自己写的一个Extjs Grid2Grid拖拽
Extjs动态Grid的生成 htm
EXTJS Grid布局总结例子,含源代码。
非常好的学习EXTJS Grid的教程,欢迎大学下载
Extjs Grid 操作大全,获取各种值和添加各种点击事件