extjs 04_grid 单击事件新发现


Posted in Javascript onNovember 27, 2012

EXTJS GRID 中 单击行和单元格获得行或者单元格的内容(数据)
Js代码

grid.addListener('cellclick',cellclick); 
function cellclick(grid, rowIndex, columnIndex, e) { 
var record = grid.getStore().getAt(rowIndex); //Get the Record 
var fieldName = grid.getColumnModel().getDataIndex(columnIndex); //Get field name 
var data = record.get(fieldName); 
Ext.MessageBox.alert('show','当前选中的数据是'+data); 
} 
grid.addListener('cellclick',cellclick); 
function cellclick(grid, rowIndex, columnIndex, e) { 
var record = grid.getStore().getAt(rowIndex); //Get the Record 
var fieldName = grid.getColumnModel().getDataIndex(columnIndex); //Get field name 
var data = record.get(fieldName); 
Ext.MessageBox.alert('show','当前选中的数据是'+data); 
}

------------------------------------------------------------------------------
Js代码
grid.on('mouseover',function(e){//添加mouseover事件 
var index = grid.getView().findRowIndex(e.getTarget());//根据mouse所在的target可以取到列的位置 
if(index!==false){//当取到了正确的列时,(因为如果传入的target列没有取到的时候会返回false) 
var record = store.getAt(index);//把这列的record取出来 
var str = Ext.encode(record.data);//组装一个字符串,这个需要你自己来完成,这儿我把他序列化 
var rowEl = Ext.get(e.getTarget());//把target转换成Ext.Element对象 
rowEl.set({ 
'ext:qtip':str //设置它的tip属性 
},false); 
} 
}); 
grid.on('mouseover',function(e){//添加mouseover事件 
var index = grid.getView().findRowIndex(e.getTarget());//根据mouse所在的target可以取到列的位置 
if(index!==false){//当取到了正确的列时,(因为如果传入的target列没有取到的时候会返回false) 
var record = store.getAt(index);//把这列的record取出来 
var str = Ext.encode(record.data);//组装一个字符串,这个需要你自己来完成,这儿我把他序列化 
var rowEl = Ext.get(e.getTarget());//把target转换成Ext.Element对象 
rowEl.set({ 
'ext:qtip':str //设置它的tip属性 
},false); 
} 
});

---------------------------------------------------------------------------------
Js代码
listeners: { 
'cellclick':function(grid,rowIndex,columnIndex,e ){ } 
} 
//这是单击grid单元格时,触发的事件 
listeners: { 
'cellclick':function(grid,rowIndex,columnIndex,e ){ } 
} 
//这是单击grid单元格时,触发的事件 
Js代码 
grid.getView().getCell(rowIndex,columnIndex).style.background-color="#FF6600"; 
grid.getView().getCell(rowIndex,columnIndex).style.color="#FF6600"; 
grid.getView().getCell(rowIndex,columnIndex).style.background-color="#FF6600"; 
grid.getView().getCell(rowIndex,columnIndex).style.color="#FF6600";

我要改变都是整个背景色,不是光是字的颜色。还有怎么能点一个单元格时候,让上次的点的单元格颜色恢复到原来呢???
把表格刷新下可以把以前单击而改变的颜色还原,grid.getView().refresh(); 然后再让这次单击的单元格变色。
Js代码
grid.getView().refresh(); 
grid.getView().getCell(rowIndex,columnIndex).style.backgroundColor="#FF9999";
Javascript 相关文章推荐
自动更新作用
Oct 08 Javascript
js wmp操作代码小结(音乐连播功能)
Nov 08 Javascript
javascript 事件查询综合 推荐收藏
Mar 10 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
Oct 16 Javascript
JavaScript初学者建议:不要去管浏览器兼容
Feb 04 Javascript
常规表格多表头查询示例
Feb 21 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
May 19 Javascript
node.js中的fs.lchown方法使用说明
Dec 16 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
Nov 05 Javascript
简单实现js拖拽效果
Jul 25 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
May 14 Javascript
微信小程序日历插件代码实例
Dec 04 Javascript
javascript 正则表达式相关应介绍
Nov 27 #Javascript
javascript 二进制运算技巧解析
Nov 27 #Javascript
JavaScript prototype属性深入介绍
Nov 27 #Javascript
Knockoutjs的环境搭建教程
Nov 26 #Javascript
jquery ajax请求实例深入解析
Nov 26 #Javascript
jquery validate poshytip 自定义样式
Nov 26 #Javascript
一个可拖拽列宽表格实例演示
Nov 26 #Javascript
You might like
56.com视频采集接口程序(PHP)
2007/09/22 PHP
利用phpexcel把excel导入数据库和数据库导出excel实现
2014/01/09 PHP
CodeIgniter表单验证方法实例详解
2016/03/03 PHP
PHP QRCODE生成彩色二维码的方法
2016/05/19 PHP
DOM相关内容速查手册
2007/02/07 Javascript
javascript 添加和移除函数的通用方法
2009/10/20 Javascript
JavaScript 空位补零实现代码
2010/02/26 Javascript
浏览器解析js生成的html出现样式问题的解决方法
2012/04/16 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
js判断ie版本号的简单实现代码
2014/03/05 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
2015/09/10 Javascript
解析Node.js异常处理中domain模块的使用方法
2016/02/16 Javascript
关于webuploader插件使用过程遇到的小问题
2016/11/07 Javascript
vue todo-list组件发布到npm上的方法
2018/04/04 Javascript
js实现左右两侧浮动广告
2018/07/09 Javascript
详解element-ui中form验证杂记
2019/03/04 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
2020/07/16 Javascript
three.js着色器材质的内置变量示例详解
2020/08/16 Javascript
[45:40]Ti4 冒泡赛第二天NEWBEE vs NaVi 1
2014/07/15 DOTA
[02:21]2018完美盛典章节片——初心
2018/12/17 DOTA
python模拟登陆Tom邮箱示例分享
2014/01/13 Python
实例讲解Python中SocketServer模块处理网络请求的用法
2016/06/28 Python
python3实现UDP协议的服务器和客户端
2017/06/14 Python
Python基于OpenCV库Adaboost实现人脸识别功能详解
2018/08/25 Python
Python 多线程其他属性以及继承Thread类详解
2019/08/28 Python
Python更换pip源方法过程解析
2020/05/19 Python
python ssh 执行shell命令的示例
2020/09/29 Python
美国在线面料商店:Online Fabric Store
2018/07/26 全球购物
C语言笔试题回忆
2015/04/02 面试题
行政人员工作职责
2013/12/05 职场文书
远程研修随笔感言
2014/02/10 职场文书
物理力学求职信
2014/02/18 职场文书
金融事务专业毕业生求职信
2014/02/23 职场文书
学习雷锋演讲稿
2014/05/10 职场文书
企业内部管理控制:银行存款控制制度范本
2020/01/10 职场文书