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插件开发的两种方法及$.fn.extend的详解
Jan 16 Javascript
javascript中取前n天日期的两种方法分享
Jan 26 Javascript
JavaScript中的函数嵌套使用
Jun 04 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
Sep 14 Javascript
基于JQuery实现图片轮播效果(焦点图)
Feb 02 Javascript
微信小程序 canvas API详解及实例代码
Oct 08 Javascript
关于json字符串与实体之间的严格验证代码
Nov 10 Javascript
requirejs + vue 项目搭建详解
Jun 16 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 Javascript
详细分析jsonp的原理和实现方式
Nov 20 Javascript
详解webpack之图片引入-增强的file-loader:url-loader
Oct 08 Javascript
React组件设计模式之组合组件应用实例分析
Apr 29 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获取远程图片并把它保存到本地的代码
2008/04/07 PHP
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
php中让上传的文件大小在上传前就受限制的两种解决方法
2013/06/24 PHP
ThinkPHP3.1查询语言详解
2014/06/19 PHP
thinkphp中session和cookie无效的解决方法
2014/12/19 PHP
PHP字符串与数组处理函数用法小结
2020/01/07 PHP
如何使用jQUery获取选中radio对应的值(一句代码)
2013/06/03 Javascript
15个jquery常用方法、小技巧分享
2015/01/13 Javascript
使用jquery动态加载Js文件和Css文件
2015/10/24 Javascript
AngularJs表单验证实例详解
2016/05/30 Javascript
关于原生js中bind函数的简单实现
2016/08/10 Javascript
jQuery版AJAX简易封装代码
2016/09/14 Javascript
JavaScript类的写法
2016/09/17 Javascript
vuejs响应用户事件(如点击事件)
2017/03/14 Javascript
基于vue配置axios的方法步骤
2017/11/09 Javascript
[43:48]Ti4正赛第一天 VG vs NEWBEE 2
2014/07/19 DOTA
Python的Flask框架标配模板引擎Jinja2的使用教程
2016/07/12 Python
python中的随机函数random的用法示例
2018/01/27 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
python读取.mat文件的数据及实例代码
2019/07/12 Python
Python 最强编辑器详细使用指南(PyCharm )
2019/09/16 Python
使用已经得到的keras模型识别自己手写的数字方式
2020/06/29 Python
Django中Q查询及Q()对象 F查询及F()对象用法
2020/07/09 Python
布里斯班女装时尚品牌:Adrift
2017/12/28 全球购物
Scotch Porter官方网站:男士美容产品
2020/08/31 全球购物
世界上最大的铁人三项商店:Tri UK
2020/11/04 全球购物
在购买印度民族服饰:Soch
2020/09/15 全球购物
农救科工作职责
2013/11/27 职场文书
《月亮湾》教学反思
2014/04/14 职场文书
团支书竞选演讲稿
2014/04/28 职场文书
学校节能减排方案
2014/06/13 职场文书
讲文明倡议书
2015/04/29 职场文书
基层党支部承诺书
2015/04/30 职场文书
比赛主持人开场白
2015/05/29 职场文书
运动会开幕式致辞
2015/07/29 职场文书
Django项目配置Memcached和Redis, 缓存选择哪个更有优势
2021/04/06 Python