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 相关文章推荐
javascript 支持链式调用的异步调用框架Async.Operation
Aug 04 Javascript
IE6下CSS图片缓存问题解决方法
Dec 09 Javascript
使用jquery中height()方法获取各种高度大全
Apr 02 Javascript
百度移动版的url编码解码示例
Apr 29 Javascript
在JavaScript中判断整型的N种方法示例介绍
Jun 18 Javascript
EasyUi datagrid 实现表格分页
Feb 10 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
Mar 10 Javascript
jQuery中设置form表单中action值的实现方法
May 25 Javascript
AngularJS ng-controller 指令简单实例
Aug 01 Javascript
JS实现div模块的截图并下载功能
Oct 17 Javascript
在Vue项目中使用Typescript的实现
Dec 19 Javascript
JavaScript实现两个数组的交集
Mar 25 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
BBS(php & mysql)完整版(四)
2006/10/09 PHP
wordpress之wp-settings.php
2007/08/17 PHP
php win下Socket方式发邮件类
2009/08/21 PHP
PHP 如何获取二维数组中某个key的集合
2014/06/03 PHP
PHP中魔术变量__METHOD__与__FUNCTION__的区别
2014/09/29 PHP
PHP中大于2038年时间戳的问题处理方案
2015/03/03 PHP
Div自动滚动到末尾的代码
2008/10/26 Javascript
JavaScript几种形式的树结构菜单
2010/05/10 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
2012/04/26 Javascript
可自定义速度的js图片无缝滚动示例分享
2014/01/20 Javascript
js中实现多态采用和继承类似的方法
2014/08/22 Javascript
json+jQuery实现的无限级树形菜单效果代码
2015/08/27 Javascript
javascript HTML5文件上传FileReader API
2020/03/27 Javascript
JavaScript 继承详解(五)
2016/10/11 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
2017/08/25 Javascript
vue中使用localstorage来存储页面信息
2017/11/04 Javascript
Vue 处理表单input单行文本框的实例代码
2019/05/09 Javascript
js实现飞机大战游戏
2020/08/26 Javascript
Python实用日期时间处理方法汇总
2015/05/09 Python
利用Python批量生成任意尺寸的图片
2016/08/29 Python
Python将list中的string批量转化成int/float的方法
2018/06/26 Python
python实现微信每日一句自动发送给喜欢的人
2019/04/29 Python
详解python运行三种方式
2019/05/13 Python
python处理自动化任务之同时批量修改word里面的内容的方法
2019/08/23 Python
win7下 python3.6 安装opencv 和 opencv-contrib-python解决 cv2.xfeatures2d.SIFT_create() 的问题
2019/10/24 Python
如何快速一次性卸载所有python包(第三方库)呢
2020/10/20 Python
Django 用户认证Auth组件的使用
2020/11/30 Python
Python实现网络聊天室的示例代码(支持多人聊天与私聊)
2021/01/27 Python
世界上最大的糖果店:Dylan’s Candy Bar
2017/11/07 全球购物
入党积极分子思想汇报范文
2014/01/05 职场文书
父亲生日宴会答谢词
2014/01/10 职场文书
七一讲话心得体会
2014/09/05 职场文书
2014年教学工作总结
2014/11/13 职场文书
太空授课观后感
2015/06/17 职场文书
老干部座谈会主持词
2015/07/03 职场文书
应届生个人的求职(自荐信范文2篇)
2019/08/23 职场文书