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 相关文章推荐
FireFox中textNode分片的问题
Apr 10 Javascript
My Desktop :) 桌面式代码
Dec 29 Javascript
jQuery的一些特性和用法整理小结
Jan 13 Javascript
图片Slider 带左右按钮的js示例
Aug 30 Javascript
js常用自定义公共函数汇总
Jan 15 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
Jan 04 Javascript
js仿新浪微博消息发布功能
Feb 17 Javascript
Vue v2.5 调整和更新不完全问题
Oct 24 Javascript
js拖动滑块和点击水波纹效果实例代码
Oct 16 Javascript
javascript原型链学习记录之继承实现方式分析
May 01 Javascript
Angular8基础应用之表单及其验证
Aug 11 Javascript
element实现合并单元格通用方法
Nov 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下使用SimpleXML 处理XML 文件
2010/02/27 PHP
php5.4以下版本json不支持不转义内容中文的解决方法
2015/01/13 PHP
图文详解phpstorm配置Xdebug进行调试PHP教程
2016/06/13 PHP
php运行报错Call to undefined function curl_init()的最新解决方法
2016/11/20 PHP
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
2008/11/03 Javascript
使用Grunt.js管理你项目的应用说明
2013/04/24 Javascript
jquery ui dialog实现弹窗特效的思路及代码
2013/08/03 Javascript
jquery中$.post()方法的简单实例
2014/02/04 Javascript
Javascript限制网页只能在微信内置浏览器中访问
2014/11/09 Javascript
jQuery中before()方法用法实例
2014/12/25 Javascript
jQuery实现dialog设置focus焦点的方法
2015/06/10 Javascript
使用Raygun来自动追踪AngularJS中的异常
2015/06/23 Javascript
详解JavaScript中localStorage使用要点
2016/01/13 Javascript
Vue.js开发环境搭建
2016/11/10 Javascript
javascript ES6中箭头函数注意细节小结
2017/02/17 Javascript
vue中的provide/inject的学习使用
2018/05/09 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
2020/04/07 Javascript
[01:11:27]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Optic
2018/04/03 DOTA
python如何为创建大量实例节省内存
2018/03/20 Python
python计算日期之间的放假日期
2018/06/05 Python
基于Python对数据shape的常见操作详解
2018/12/25 Python
python-opencv 将连续图片写成视频格式的方法
2019/01/08 Python
Pytorch Tensor的统计属性实例讲解
2019/12/30 Python
利用Tensorflow构建和训练自己的CNN来做简单的验证码识别方式
2020/01/20 Python
Python标准库json模块和pickle模块使用详解
2020/03/10 Python
python基于openpyxl生成excel文件
2020/12/23 Python
遮罩层 + Iframe实现界面自动显示的示例代码
2020/04/26 HTML / CSS
潘多拉意大利官方网上商城:网上选购PANDORA珠宝
2018/10/07 全球购物
草莓网官网:StrawberryNET
2019/08/21 全球购物
Linux中如何设置Java环境变量(Ubuntu)
2016/07/24 面试题
仪器仪表检测毕业生自荐信
2013/10/31 职场文书
医校毕业生自我鉴定
2014/01/25 职场文书
红头文件任命书范本
2014/06/05 职场文书
导游词之无锡丝业博物馆
2019/11/12 职场文书
导游词之铁岭象牙山
2019/12/06 职场文书
MySQL官方导出工具mysqlpump的使用
2021/05/21 MySQL