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 相关文章推荐
showModelessDialog()使用详解
Sep 21 Javascript
犀利的js 函数集合
Jun 11 Javascript
javascript jq 弹出层实例
Aug 25 Javascript
JS实现一个按钮的方法
Feb 05 Javascript
jQuery实现简单滚动动画效果
Apr 07 Javascript
jQuery 中的 DOM 操作
Apr 26 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
Apr 26 Javascript
jQuery实现扑克正反面翻牌效果
Mar 10 Javascript
VUE简单的定时器实时刷新的实现方法
Jan 20 Javascript
js的新生代垃圾回收知识点总结
Aug 22 Javascript
vue实现购物车加减
May 30 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
Jul 27 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 db类库进行数据库操作
2009/03/19 PHP
解析PHP高效率写法(详解原因)
2013/06/20 PHP
php7安装yar扩展的方法详解
2017/08/03 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
Laravel获取当前请求的控制器和方法以及中间件的例子
2019/10/11 PHP
javascript下对于事件、事件流、事件触发的顺序随便说说
2010/07/17 Javascript
高亮显示web页表格行的javascript代码
2010/11/19 Javascript
jquery Moblie入门—hello world的示例代码学习
2013/01/08 Javascript
Javascript优化技巧之短路表达式详细介绍
2015/03/27 Javascript
JavaScript ES6中export、import与export default的用法和区别
2017/03/14 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
3分钟掌握常用的JS操作JSON方法总结
2017/04/25 Javascript
深入理解vue $refs的基本用法
2017/07/13 Javascript
jquery.picsign图片标注组件实例详解
2018/02/02 jQuery
Puppeteer 爬取动态生成的网页实战
2018/11/14 Javascript
使用xampp将angular项目运行在web服务器的教程
2019/09/16 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
Javascript幻灯片播放功能实现过程解析
2020/05/07 Javascript
Python SQLAlchemy基本操作和常用技巧(包含大量实例,非常好)
2014/05/06 Python
python开发利器之ulipad的使用实践
2017/03/16 Python
Python使用plotly绘制数据图表的方法
2017/07/18 Python
TensorFlow平台下Python实现神经网络
2018/03/10 Python
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
Python安装与基本数据类型教程详解
2019/05/29 Python
python文字和unicode/ascll相互转换函数及简单加密解密实现代码
2019/08/12 Python
numpy.ndarray 实现对特定行或列取值
2019/12/05 Python
Django-rest-framework中过滤器的定制实例
2020/04/01 Python
python实现密码验证合格程序的思路详解
2020/06/01 Python
总经理任命书范本
2014/06/05 职场文书
2015大学生自我评价范文
2015/03/03 职场文书
2015年售票员工作总结
2015/04/29 职场文书
农村婚礼司仪主持词
2015/06/29 职场文书
物业保洁员管理制度
2015/08/05 职场文书
《静夜思》教学反思
2016/02/17 职场文书
浅谈MySQL next-key lock 加锁范围
2021/06/07 MySQL
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs