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 EasyUI API 中文文档 搜索框
Sep 29 Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
Oct 11 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
Dec 20 Javascript
jquery不常用方法汇总
Jul 26 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
Jun 01 Javascript
实例解析angularjs的filter过滤器
Dec 14 Javascript
js实现淡入淡出轮播切换功能
Jan 13 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
Jun 19 Javascript
js中split()方法得到的数组长度问题
Jul 19 Javascript
浅谈js闭包理解
Apr 01 Javascript
详解JavaScript中的坐标和距离
May 27 Javascript
javascript实现一款好看的秒表计时器
Sep 05 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
解析mysql 表中的碎片产生原因以及清理
2013/06/22 PHP
ThinkPHP中的关联模型注意点
2014/06/16 PHP
PHP中使用Imagick操作PSD文件实例
2015/01/26 PHP
Yii框架的redis命令使用方法简单示例
2019/10/15 PHP
在chrome中window.onload事件的一些问题
2010/03/01 Javascript
在Ajax中使用Flash实现跨域数据读取的实现方法
2010/12/02 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
2011/01/11 Javascript
基于编写jQuery的无缝滚动插件
2014/08/02 Javascript
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
2015/10/23 Javascript
再次谈论Javascript中的this
2016/06/23 Javascript
jQuery实现模拟flash头像裁切上传功能示例
2016/12/11 Javascript
ES6新特性七:数组的扩充详解
2017/04/21 Javascript
JavaScript实现无刷新上传预览图片功能
2017/08/02 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
2018/07/26 Javascript
JavaScript的一些小技巧分享
2021/01/06 Javascript
Python中的defaultdict模块和namedtuple模块的简单入门指南
2015/04/01 Python
深入理解Python中装饰器的用法
2016/06/28 Python
使用django-crontab实现定时任务的示例
2018/02/26 Python
Python使用matplotlib绘制多个图形单独显示的方法示例
2018/03/14 Python
用Python下载一个网页保存为本地的HTML文件实例
2018/05/21 Python
python实现植物大战僵尸游戏实例代码
2019/06/10 Python
sklearn+python:线性回归案例
2020/02/24 Python
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
2014/06/23 HTML / CSS
html5 canvas绘制矩形和圆形的实例代码
2016/06/16 HTML / CSS
意大利会呼吸的鞋:Geox健乐士
2017/02/12 全球购物
澳大利亚婴儿、幼儿和儿童在线设计师商店:Smooch Baby
2019/02/16 全球购物
什么是WEB控件?使用WEB控件有哪些优势?
2012/01/21 面试题
利用promise及参数解构封装ajax请求的方法
2021/03/24 Javascript
最新英语专业学生求职信范文
2013/09/21 职场文书
住房公积金接收函
2014/01/09 职场文书
2014年计生标语
2014/06/23 职场文书
关于颐和园的导游词
2015/01/30 职场文书
推广普通话宣传标语口号
2015/12/26 职场文书
导游词之秦皇岛燕塞湖
2020/01/03 职场文书
Windows server 2012 配置Telnet以及用法详解
2022/04/28 Servers