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 强制类型转换函数
May 17 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
Jan 12 Javascript
基于jquery的图片的切换(以数字的形式)
Feb 14 Javascript
ext中store.load跟store.reload的区别示例介绍
Jun 17 Javascript
JavaScript之DOM_动力节点Java学院整理
Jul 03 Javascript
vue watch监听对象及对应值的变化详解
Feb 24 Javascript
详解.vue文件解析的实现
Jun 11 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
Sep 18 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
VuePress 静态网站生成方法步骤
Feb 14 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 10 Javascript
antd配置config-overrides.js文件的操作
Oct 31 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下对字符串的递增运算代码
2010/08/21 PHP
PHPEXCEL 使用小记
2013/01/06 PHP
PHP的Yii框架中过滤器相关的使用总结
2016/03/29 PHP
PHP判断文件是否被引入的方法get_included_files用法示例
2016/11/29 PHP
Jsonp 跨域的原理以及Jquery的解决方案
2010/05/18 Javascript
基于jquery的button默认enter事件(回车事件)。
2011/05/18 Javascript
web性能优化之javascript性能调优
2012/12/28 Javascript
js加强的经典分页实例
2013/03/15 Javascript
JavaScript中json使用自己总结
2013/08/13 Javascript
javascript面向对象特性代码实例
2014/06/12 Javascript
JQuery给网页更换皮肤的方法
2015/05/30 Javascript
javascript中加var和不加var的区别 你真的懂吗
2016/01/06 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
2016/08/29 Javascript
微信小程序 本地存储及登录页面处理实例详解
2017/01/11 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
2017/09/07 Javascript
详解webpack2+React 实例demo
2017/09/11 Javascript
Vue $emit $refs子父组件间方法的调用实例
2018/09/12 Javascript
详解js创建对象的几种方法及继承
2019/04/12 Javascript
详解vue 在移动端体验上的优化解决方案
2019/05/20 Javascript
在python中的socket模块使用代理实例
2014/05/29 Python
Python中用字符串调用函数或方法示例代码
2017/08/04 Python
Python中数组,列表:冒号的灵活用法介绍(np数组,列表倒序)
2018/04/18 Python
解决Ubuntu pip 安装 mysql-python包出错的问题
2018/06/11 Python
python+opencv实现霍夫变换检测直线
2020/10/23 Python
python3模拟实现xshell远程执行liunx命令的方法
2019/07/12 Python
Python自动化xpath实现自动抢票抢货
2020/09/19 Python
python 可视化库PyG2Plot的使用
2021/01/21 Python
Internet体系结构
2014/12/21 面试题
银行毕业实习自我鉴定
2013/09/19 职场文书
运动会广播稿200字
2014/01/15 职场文书
民主评议党员自我评议范文2014
2014/09/26 职场文书
运动会运动员赞词
2015/07/22 职场文书
2016春季幼儿园大班开学寄语
2015/12/03 职场文书
原生JS实现分页
2022/04/19 Javascript
MySQL中JOIN连接的基本用法实例
2022/06/05 MySQL
python热力图实现的完整实例
2022/06/25 Python