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 相关文章推荐
jqPlot Option配置对象详解
Jul 25 Javascript
jquery 学习之二 属性(html()与html(val))
Nov 25 Javascript
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
Jan 06 Javascript
node.js中的fs.open方法使用说明
Dec 17 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
Nov 29 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
Nov 07 Javascript
Vue制作Todo List网页
Apr 26 Javascript
微信小程序自定义弹窗实现详解(可通用)
Jul 04 Javascript
vue.js购物车添加商品组件的方法
Sep 17 Javascript
解决Layui数据表格的宽高问题
Sep 28 Javascript
Layui实现主窗口和Iframe层参数传递
Nov 14 Javascript
vue cli3适配所有端方案的实现
Apr 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程序员应该了解MongoDB的五件事
2013/06/03 PHP
Yii输入正确验证码却验证失败的解决方法
2017/06/06 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
启用OPCache提高PHP程序性能的方法
2019/03/21 PHP
php开发最强大的IDE编辑的phpstorm 2020.2配置Xdebug调试的详细教程
2020/08/17 PHP
javascript编程起步(第二课)
2007/02/27 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
javascript屏蔽右键代码
2014/05/15 Javascript
超炫的jquery仿flash导航栏特效
2014/11/11 Javascript
js给selected添加options的方法
2015/05/06 Javascript
ajax读取数据后使用jqchart显示图表的方法
2015/06/10 Javascript
基于Jquery实现表单验证
2020/07/20 Javascript
javascript日期处理函数,性能优化批处理
2015/09/06 Javascript
ES6中如何使用Set和WeakSet
2016/03/10 Javascript
原生js和jquery分别实现横向导航菜单效果
2016/05/13 Javascript
Vue.js每天必学之指令系统与自定义指令
2016/09/07 Javascript
js 定位到某个锚点的方法
2016/11/19 Javascript
基于vue2.0+vuex的日期选择组件功能实现
2017/03/13 Javascript
AngularJS中使用ngModal模态框实例
2017/05/27 Javascript
vue.js实现只弹一次弹框
2018/01/29 Javascript
使用Angular CLI生成路由的方法
2018/03/24 Javascript
微信小程序实现的日期午别医生排班表功能示例
2019/01/09 Javascript
基于NodeJS开发钉钉回调接口实现AES-CBC加解密
2020/08/20 NodeJs
ant design 日期格式化的实现
2020/10/27 Javascript
Python实现控制台输入密码的方法
2015/05/29 Python
Python对象类型及其运算方法(详解)
2017/07/05 Python
python实现隐马尔科夫模型HMM
2018/03/25 Python
在unittest中使用 logging 模块记录测试数据的方法
2018/11/30 Python
Python 获取主机ip与hostname的方法
2018/12/17 Python
python使用pandas处理excel文件转为csv文件的方法示例
2019/07/18 Python
Tensorflow 自定义loss的情况下初始化部分变量方式
2020/01/06 Python
解决pycharm不能自动保存在远程linux中的问题
2021/02/06 Python
麦当劳印度网上订餐:McDelivery
2020/03/16 全球购物
面向对象编程OOP的优点
2013/01/22 面试题
大学毕业感言50字
2014/02/07 职场文书
导游词之杭州西湖
2019/09/19 职场文书