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 源码分析笔记(4) Ready函数
Jun 02 Javascript
js调用activeX获取u盘序列号的代码
Nov 21 Javascript
JQuery 图片的展开和伸缩实例讲解
Apr 18 Javascript
jQuery的DOM操作之删除节点示例
Jan 03 Javascript
js调用百度地图及调用百度地图的搜索功能
Sep 07 Javascript
JS实现数字格式千分位相互转换方法
Aug 01 Javascript
web.js.字符串与正则表达式操作
May 13 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
javascript按钮禁用和启用的效果实例代码
Oct 29 Javascript
使用express搭建一个简单的查询服务器的方法
Feb 09 Javascript
Seajs源码详解分析
Apr 02 Javascript
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
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初学者的8点有效建议
2010/11/20 PHP
php中Snoopy类用法实例
2015/06/19 PHP
php中时间函数date及常用的时间计算
2017/05/12 PHP
PHP文件操作实例总结【文件上传、下载、分页】
2018/12/08 PHP
Laravel 框架返回状态拦截代码
2019/10/18 PHP
一个多次搜索+多次传值的解决方案
2007/01/20 Javascript
用jquery来定位
2007/02/20 Javascript
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
2007/04/29 Javascript
页面调用单个swf文件,嵌套出多个方法。
2011/11/21 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
2012/07/15 Javascript
jquery动态添加删除div 具体实现
2013/07/20 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
JavaScript字符串检索字符的方法
2017/06/23 Javascript
JScript实现地址选择功能
2017/08/15 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
2017/09/01 Javascript
关于angularJs清除浏览器缓存的方法
2017/11/28 Javascript
vue项目base64字符串转图片的实现代码
2018/07/13 Javascript
微信小程序新手教程之启动页的重要性
2019/03/03 Javascript
javascript获取select值的方法完整实例
2019/06/20 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
2019/09/27 Javascript
[01:01:18]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#2COL VS LGD
2016/03/03 DOTA
python发送邮件脚本
2018/05/22 Python
python获取点击的坐标画图形的方法
2019/07/09 Python
python列表删除和多重循环退出原理详解
2020/03/26 Python
Matlab中plot基本用法的具体使用
2020/07/17 Python
python 实现Harris角点检测算法
2020/12/11 Python
python matplotlib工具栏源码探析二之添加、删除内置工具项的案例
2021/02/25 Python
HTML5中使用postMessage实现Ajax跨域请求的方法
2016/04/19 HTML / CSS
HTML+CSS+JavaScript实现图片3D展览的示例代码
2020/10/12 HTML / CSS
新加坡领先的时尚生活方式零售品牌:CHARLES & KEITH
2018/01/16 全球购物
怎样写好自荐信和推荐信
2013/12/26 职场文书
大学生党课思想汇报
2013/12/29 职场文书
中学清明节活动总结
2014/07/04 职场文书
学会掌握自己命运的十条黄金法则:
2019/08/08 职场文书
Python-OpenCV实现图像缺陷检测的实例
2021/06/11 Python
Python os和os.path模块详情
2022/04/02 Python