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 相关文章推荐
响应鼠标变换表格背景或者颜色的代码
Mar 30 Javascript
关于取不到由location.href提交而来的上级页面地址的解决办法
Jul 30 Javascript
学习Javascript闭包(Closure)知识
Aug 07 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
Oct 28 Javascript
JS实现的适合做faq或menu滑动效果示例
Nov 17 Javascript
vue获取input输入值的问题解决办法
Oct 17 Javascript
在Swiper内如何制作CSS3动画效果示例代码
Dec 07 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
Mar 22 Javascript
jquery 时间戳转日期过程详解
Oct 12 jQuery
vue如何搭建多页面多系统应用
Jun 17 Javascript
小程序表单认证布局及验证详解
Jun 19 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
Aug 13 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
php Sql Server连接失败问题及解决办法
2009/08/07 PHP
用PHP为SHOPEX增加日志功能代码
2010/07/02 PHP
PHP常见漏洞攻击分析
2016/02/21 PHP
ThinkPHP中类的构造函数_construct()与_initialize()的区别详解
2017/03/13 PHP
JavaScript入门教程(10) 认识其他对象
2009/01/31 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
2012/09/02 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
2012/12/30 Javascript
原生javascript实现拖动元素示例代码
2014/09/01 Javascript
javascript学习笔记(七)Ajax和Http状态码
2014/10/08 Javascript
jQuery结合CSS制作动态的下拉菜单
2015/10/27 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
2016/01/05 Javascript
jquery中用函数来设置css样式
2016/12/22 Javascript
详解JS对象封装的常用方式
2016/12/30 Javascript
jquery实现页面加载效果
2017/02/21 Javascript
vue组件父子间通信之综合练习(聊天室)
2017/11/07 Javascript
vue实现nav导航栏的方法
2017/12/13 Javascript
vue.extend实现alert模态框弹窗组件
2018/04/28 Javascript
React实现全局组件的Toast轻提示效果
2018/09/21 Javascript
js的各种数据类型判断的介绍
2019/01/19 Javascript
Javascript异步编程async实现过程详解
2020/04/02 Javascript
开始着手第一个Django项目
2015/07/15 Python
Python中类型检查的详细介绍
2017/02/13 Python
python实现单线程多任务非阻塞TCP服务端
2017/06/13 Python
Python实现多进程共享数据的方法分析
2017/12/04 Python
python如何为创建大量实例节省内存
2018/03/20 Python
解决Python安装后pip不能用的问题
2018/06/12 Python
Python常见内置高效率函数用法示例
2018/07/31 Python
pyqt5 使用cv2 显示图片,摄像头的实例
2019/06/27 Python
linux环境下Django的安装配置详解
2019/07/22 Python
python opencv如何实现图片绘制
2020/01/19 Python
分享一枚pycharm激活码适用所有pycharm版本我的pycharm2020.2.3激活成功
2020/11/20 Python
美国精品家居用品网站:US-Mattress
2016/08/24 全球购物
家长学校实施方案
2014/03/15 职场文书
搞笑欢迎词大全
2015/09/30 职场文书
教你怎么用Python操作MySql数据库
2021/05/31 Python
sql注入报错之注入原理实例解析
2022/06/10 MySQL