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 相关文章推荐
不要在cookie中使用特殊字符的原因分析
Jul 13 Javascript
jquery星级插件、支持页面中多次使用
Mar 25 Javascript
js编写trim()函数及正则表达式的运用
Oct 24 Javascript
js操作label给label赋值及取label的值示例
Nov 07 Javascript
JavaScript中的函数声明和函数表达式区别浅析
Mar 27 Javascript
jquery插件star-rating.js实现星级评分特效
Apr 15 Javascript
基于jQuery实现咖啡订单管理简单应用
Feb 10 Javascript
js面向对象编程总结
Feb 16 Javascript
Bootstrap超大屏幕的实现代码
Mar 22 Javascript
JavaScript无操作后屏保功能的实现方法
Jul 04 Javascript
JS实现页面跳转与刷新的方法汇总
Aug 30 Javascript
Vue学习笔记之计算属性与侦听器用法
Dec 07 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
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
PHP 二维数组和三维数组的过滤
2016/03/16 PHP
PHP中抽象类和抽象方法概念与用法分析
2016/05/24 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
js 解决“options为空或不是对象”
2008/12/22 Javascript
jquery中防刷IP流量软件影响统计的一点对策
2011/07/10 Javascript
JQuery操作单选按钮以及复选按钮示例
2013/09/23 Javascript
JavaScript使用function定义对象并调用的方法
2015/03/23 Javascript
用JavaScript实现对话框的教程
2015/06/04 Javascript
javascript实现在线客服效果
2015/07/15 Javascript
多种JQuery循环滚动文字图片效果代码
2020/06/23 Javascript
使用vue.js制作分页组件
2016/06/27 Javascript
初探nodeJS
2017/01/24 NodeJs
Vue表单demo v-model双向绑定问题
2018/06/29 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
2018/09/30 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
2019/05/27 jQuery
elementUI select组件value值注意事项详解
2019/05/29 Javascript
Layui Table js 模拟选中checkbox的例子
2019/09/03 Javascript
[03:58]2014DOTA2国际邀请赛 龙宝赛后解密DK获胜之道
2014/07/14 DOTA
利用Python的Flask框架来构建一个简单的数字商品支付解决方案
2015/03/31 Python
python函数的5种参数详解
2017/02/24 Python
Python利用正则表达式实现计算器算法思路解析
2018/04/25 Python
python 读取摄像头数据并保存的实例
2018/08/03 Python
Django模板语言 Tags使用详解
2019/09/09 Python
python批量合成bilibili的m4s缓存文件为MP4格式 ver2.5
2020/12/01 Python
Python爬虫新手入门之初学lxml库
2020/12/20 Python
使用HTML5里的classList操作CSS类
2016/06/28 HTML / CSS
美国网上鞋城:Shoeline.com
2016/11/17 全球购物
写给女朋友的道歉信
2014/01/12 职场文书
科长个人四风问题整改措施思想汇报
2014/10/13 职场文书
2015年护士节慰问信
2015/03/23 职场文书
2015年骨干教师工作总结
2015/05/26 职场文书
烛光里的微笑观后感
2015/06/17 职场文书
2015年教务主任工作总结
2015/07/22 职场文书
python基础之模块的导入
2021/10/24 Python
MySQL新手入门进阶语句汇总
2022/09/23 MySQL