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 相关文章推荐
jQuery中文入门指南,翻译加实例,jQuery的起点教程
Feb 09 Javascript
JavaScript asp.net 获取当前超链接中的文本
Apr 14 Javascript
JS面向对象、prototype、call()、apply()
May 14 Javascript
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
Apr 29 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
Aug 01 Javascript
javascript获取当前鼠标坐标的方法
Jan 10 Javascript
JS滚动到指定位置导航栏固定顶部
Jul 03 Javascript
实现两个文本框同时输入的实例
Sep 25 Javascript
webpack构建换肤功能的思路详解
Nov 27 Javascript
vue项目部署到nginx/tomcat服务器的实现
Aug 26 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
Sep 27 Javascript
小程序新版订阅消息模板消息
Dec 31 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下intval()和(int)转换使用与区别
2008/07/18 PHP
IIS7.X配置PHP运行环境小结
2011/06/09 PHP
Linux中用PHP判断程序运行状态的2个方法
2014/05/04 PHP
Zend Framework数据库操作技巧总结
2017/02/18 PHP
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
2009/10/26 Javascript
yepnope.js 异步加载资源文件
2011/09/08 Javascript
jQuery 重复加载错误以及修复方法
2014/12/16 Javascript
jQuery中:animated选择器用法实例
2014/12/29 Javascript
在Mac OS下使用Node.js的简单教程
2015/06/24 Javascript
jQuery实现带渐显效果的人物多级关系图代码
2015/10/16 Javascript
jQuery增加与删除table列的方法
2016/03/01 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
2016/03/01 Javascript
如何防止INPUT按回车自动提交表单FORM
2016/12/06 Javascript
JS实现队列的先进先出功能示例
2017/05/10 Javascript
jstree单选功能的实现方法
2017/06/07 Javascript
Easyui使用Dialog行内按钮布局的实例
2017/07/27 Javascript
js canvas实现红包照片效果
2018/08/21 Javascript
element-ui组件table实现自定义筛选功能的示例代码
2019/03/15 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
2019/04/10 Javascript
vue项目打包上传github并制作预览链接(pages)
2019/04/19 Javascript
将python字符串转化成长表达式的函数eval实例
2020/05/11 Python
python归并排序算法过程实例讲解
2020/11/04 Python
多视角3D逼真HTML5水波动画
2016/03/03 HTML / CSS
使用HTML5 Canvas API绘制弧线的教程
2016/03/22 HTML / CSS
Superdry极度乾燥官网:日本街头风格,纯英国制造品牌
2016/10/31 全球购物
捷克街头、运动和滑板一站式商店:BoardStar.cz
2019/10/06 全球购物
Simons官方网站:加拿大时尚零售商
2020/02/20 全球购物
Columbia Sportswear法国官网:全球户外品牌
2020/09/25 全球购物
大学生毕业自我鉴定范文
2014/02/03 职场文书
考试作弊检讨书大全
2014/02/18 职场文书
绘画专业自荐信
2014/07/04 职场文书
未婚证明书模板
2014/10/08 职场文书
业务员工作态度散漫检讨书
2014/11/02 职场文书
2014年社区民政工作总结
2014/12/02 职场文书
九寨沟导游词
2015/02/02 职场文书
网上祭英烈活动总结
2015/02/04 职场文书