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 相关文章推荐
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
Jun 11 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
Mar 03 Javascript
原生js页面滚动延迟加载图片
Dec 20 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
Apr 17 Javascript
JavaScript登录验证码的实现
Oct 27 Javascript
Bootstrap缩略图的创建方法
Mar 22 Javascript
详解vue项目构建与实战
Jun 27 Javascript
浅谈关于angularJs中使用$.ajax的注意点
Aug 12 Javascript
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
小程序清理本地缓存的方法
Aug 17 Javascript
Vue axios获取token临时令牌封装案例
Sep 11 Javascript
为什么node.js不适合大型项目
Apr 28 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
解析php5配置使用pdo
2013/07/03 PHP
php中最简单的字符串匹配算法
2014/12/16 PHP
php中file_exists函数使用详解
2015/05/08 PHP
PHP数组操作类实例
2015/07/11 PHP
CI框架数据库查询之join用法分析
2016/05/18 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
ThinkPHP框架实现FTP图片上传功能示例
2019/04/08 PHP
使用javascript访问XML数据的实例
2006/12/27 Javascript
jQuery基本过滤选择器使用介绍
2013/04/18 Javascript
Javascript中的Array数组对象详谈
2014/03/03 Javascript
JS使用for循环遍历Table的所有单元格内容
2014/08/21 Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
2015/09/09 Javascript
jQuery实现的自定义滚动条实例详解
2016/09/20 Javascript
Javascript 实现简单计算器实例代码
2016/10/23 Javascript
nodejs入门教程一:概念与用法简介
2017/04/24 NodeJs
打造通用的匀速运动框架(实例讲解)
2017/10/17 Javascript
一文读懂ES7中的javascript修饰器
2019/05/06 Javascript
[01:17:12]职来职往完美电竞专场
2014/09/18 DOTA
[02:12]Dota 2 推出全新英雄—— 电炎绝手
2019/08/23 DOTA
Python利用matplotlib生成图片背景及图例透明的效果
2017/04/27 Python
python遍历一个目录,输出所有的文件名的实例
2018/04/23 Python
python批量修改图片后缀的方法(png到jpg)
2018/10/25 Python
对python中list的拷贝与numpy的array的拷贝详解
2019/01/29 Python
Python3.4学习笔记之常用操作符,条件分支和循环用法示例
2019/03/01 Python
获取django框架orm query执行的sql语句实现方法分析
2019/06/20 Python
python字典嵌套字典的情况下找到某个key的value详解
2019/07/10 Python
python读取图片的几种方式及图像宽和高的存储顺序
2020/02/11 Python
tensorflow指定CPU与GPU运算的方法实现
2020/04/21 Python
keras 权重保存和权重载入方式
2020/05/21 Python
Tensorflow tf.tile()的用法实例分析
2020/05/22 Python
CSS中越界问题的经典解决方案【推荐】
2016/04/19 HTML / CSS
canvas之万花筒效果的简单实现(推荐)
2016/08/16 HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
2019/06/10 HTML / CSS
我的中国梦演讲稿小学篇
2014/08/19 职场文书
学校端午节活动总结
2015/02/11 职场文书
毕业论文指导老师意见
2015/06/04 职场文书