- 浏览: 236061 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
月度银墙:
wangxiang243 写道不错 !但是ext4中六月和十二 ...
ext2,3,和4 版本 只显示年月的日期插件 -
38123978:
你好,我最近在看cassandra的性能,我想问一下5000万 ...
Cassandra学习笔记3 -
zhaojinmeng:
您好楼主,extjs5要怎么扩展啊?求指导
ext2,3,和4 版本 只显示年月的日期插件 -
love_wting:
为什么下拉框的表格样式显示了,数据访问json也从数据库中取到 ...
Extjs 下拉grid -
laungcisin:
yangxiutian 写道另外Ext4.2.1还故意把x-m ...
ext2,3,和4 版本 只显示年月的日期插件
-
本文总结了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();
}
- }
- }
- });
- });
发表评论
-
js原型分析研究
2012-07-23 22:44 1442原型是个很微妙的东西,很多人不是很理解,理解了原型对于 ... -
Ext4.1.0 API中文版V0.4 Beta(持续更新)
2012-07-17 18:40 1075Ext4.1.0 API中文版V0.4 Beta html ... -
记录回答别人的Ext4问题
2012-07-10 13:23 26441:Ext4版本 双击Tab页面页签关闭 来自问题:ht ... -
Extjs4 时分秒日期插件
2012-05-11 13:05 12343插件1: 初始界面 弹出界面 插件代码 见附件 ... -
Ext3 日期范围插件
2012-04-03 17:32 2122先上 效果图有图有真相嘛 使用例子: ... -
Extjs2分页树 带查询功能
2012-03-29 11:37 4175先上效果图: 插件代码见附件 使 ... -
ext2 日期范围控件(2个控件)
2012-03-25 17:39 3008控件1 介绍: 首先加入 Ext.apply( ... -
ext2 grid 封装 (包含增删改查 导入导出等操作)
2012-02-27 14:32 5011最近项目又用到ext 比较 ... -
tree拖拽
2011-09-04 22:09 2428当时遇到如下问题: 拖拽A tree 的a节点到B tree ... -
ExtJS Web应用程序开发指南(第2版)(针对Ext JS 4.0更新)源代码
2011-08-11 14:56 1102ExtJS Web应用程序开发指南(第2版)(针对Ext JS ... -
通过拖拽Grid改变行的顺序
2010-10-08 13:06 3765<script> var meta ... -
使用注解和反射构造ext的grid需要的列模型
2010-09-18 12:03 1679注解类: package xzd; import ... -
ExtJs Grid分页时序号自增的实现
2010-08-23 16:28 3052首先看到网上都是类似 http://www.blogjava. ... -
extjs 自己的小小总结
2010-08-13 21:15 3297总结自己的代码 可能以后会用到 记录一下 方便以后查阅 1 ... -
eclipse 中怎样来集成 JBOSS
2010-08-09 08:46 0eclipse 中怎样来集成 JBOSS -
ext2,3,和4 版本 只显示年月的日期插件
2010-08-03 20:23 15685Ext技术交流群:164648099 1:ext3版本 ... -
关于Extjs3.0中的TreeGrid (Ext.ux.maximgb.tg.EditorGridPanel)(转)
2010-08-01 21:38 4350转:(http://www.liyonghome.cn/ind ... -
ext grid 单元格提示 出现图片
2010-07-31 00:03 2654代码简单 只是记录一下 <html> ... -
ext tree相关知识
2010-07-30 23:53 2611ext tree 动态修改各个节点名称icon小图标 &qu ... -
ext 后台查数据库数据拼装tree数据
2010-07-26 22:21 2479来自:Extjs交流群(164648099) 说明: ...
相关推荐
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 操作大全,获取各种值和添加各种点击事件