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学习笔记(四) Number 数字类型
Jun 19 Javascript
js中方法重载如何实现?以及函数的参数问题
Aug 01 Javascript
关于js内存泄露的一个好例子
Dec 09 Javascript
js实现日期级联效果
Jan 23 Javascript
node.js中的http.response.write方法使用说明
Dec 14 Javascript
jQuery实现的网页竖向菜单效果代码
Aug 26 Javascript
jquery插件ajaxupload实现文件上传操作
Dec 09 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
删除table表格行的实例讲解
Sep 21 Javascript
小程序scroll-view组件实现滚动的示例代码
Sep 20 Javascript
浅谈react-router@4.0 使用方法和源码分析
Jun 04 Javascript
node实现爬虫的几种简易方式
Aug 22 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下通过伪造http头破解防盗链的代码
2010/07/03 PHP
探讨:使用XMLSerialize 序列化与反序列化
2013/06/08 PHP
php单例模式的简单实现方法
2016/06/10 PHP
PHP二分查找算法示例【递归与非递归方法】
2016/09/29 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
PHP Class SoapClient not found解决方法
2018/01/20 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
phpstorm最新激活码分享亲测phpstorm2020.2.3版可用
2020/11/22 PHP
dojo随手记 gird组件引用
2011/02/24 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
2012/08/29 Javascript
根据表格中的某一列进行排序的javascript代码
2013/11/29 Javascript
单击和双击事件的冲突处理示例代码
2014/04/03 Javascript
javascript初学者常用技巧
2014/09/02 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
2014/09/28 Javascript
Bootstrap实现带动画过渡的弹出框
2016/08/09 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
2017/03/15 Javascript
nuxt框架中路由鉴权之Koa和Session的用法
2018/05/09 Javascript
React项目动态设置title标题的方法示例
2018/09/26 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
2019/03/27 Javascript
JS定义函数的几种常用方法小结
2019/05/23 Javascript
原生微信小程序开发中 redux 的使用详解
2021/02/18 Javascript
python概率计算器实例分析
2015/03/25 Python
python脚本设置超时机制系统时间的方法
2016/02/21 Python
Python使用filetype精确判断文件类型
2017/07/02 Python
python爬取拉勾网职位数据的方法
2018/01/24 Python
解决phantomjs截图失败,phantom.exit位置的问题
2018/05/17 Python
对Python之gzip文件读写的方法详解
2019/02/08 Python
使用Python的OpenCV模块识别滑动验证码的缺口(推荐)
2019/05/10 Python
Python timer定时器两种常用方法解析
2020/01/20 Python
Keras 在fit_generator训练方式中加入图像random_crop操作
2020/07/03 Python
CSS3教程(1):什么是CSS3
2009/04/02 HTML / CSS
css3的transform中scale缩放详解
2014/12/08 HTML / CSS
Hotels.com加拿大:领先的在线住宿网站
2018/10/05 全球购物
澳大利亚床上用品、浴巾和家居用品购物网站:Bambury
2020/04/16 全球购物
Whistles官网:英国女装品牌
2020/08/14 全球购物
学校少先队工作总结
2015/08/12 职场文书