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 相关文章推荐
js给页面加style无效果的解决方法
Jan 20 Javascript
jQuery获取DOM节点实例分析(2种方式)
Dec 15 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
Apr 01 Javascript
Vuejs第十三篇之组件——杂项
Sep 09 Javascript
Vue中自定义全局组件的实现方法
Dec 08 Javascript
实例讲解Vue.js中router传参
Apr 22 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
微信小程序列表时间戳转换实现过程解析
Oct 12 Javascript
解决vue v-for src 图片路径问题 404
Nov 12 Javascript
解决 window.onload 被覆盖的问题方法
Jan 14 Javascript
微信小程序点击view动态添加样式过程解析
Jan 21 Javascript
vue-model实现简易计算器
Aug 17 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判断浏览器的类型和语言的函数代码
2013/02/28 PHP
js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析
2013/07/18 PHP
php实现连接access数据库并转txt写入的方法
2017/02/08 PHP
PHP实现一个限制实例化次数的类示例
2019/09/16 PHP
javascript引导程序
2008/10/26 Javascript
javascript 写的一个简单的timer
2009/07/30 Javascript
表单元素与非表单元素刷新区别详细解析
2013/11/06 Javascript
使用不同的方法结合/合并两个JS数组
2014/09/18 Javascript
JavaScript图像延迟加载库Echo.js
2016/04/05 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
2016/04/17 Javascript
详解webpack异步加载业务模块
2017/06/23 Javascript
二维码图片生成器QRCode.js简单介绍
2017/08/18 Javascript
jQuery选择器之子元素过滤选择器
2017/09/28 jQuery
Angularjs 手写日历的实现代码(不用插件)
2017/10/18 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
2019/03/13 Javascript
[01:44]Ti10举办地公布
2019/08/25 DOTA
Python psutil模块简单使用实例
2015/04/28 Python
Python正规则表达式学习指南
2016/08/02 Python
简单谈谈Python中函数的可变参数
2016/09/02 Python
Win10下Python环境搭建与配置教程
2016/11/18 Python
Python wxPython库使用wx.ListBox创建列表框示例
2018/09/03 Python
Python合并同一个文件夹下所有PDF文件的方法
2019/03/11 Python
python3.7+selenium模拟淘宝登录功能的实现
2020/05/26 Python
Python使用itcaht库实现微信自动收发消息功能
2020/07/13 Python
Python爬虫实现selenium处理iframe作用域问题
2021/01/27 Python
美国婴童服装市场上的领先品牌:Carter’s
2018/02/08 全球购物
铭宣海淘转运:美国、日本、英国转运等全球转运公司
2019/09/10 全球购物
屈臣氏乌克兰:Watsons UA
2019/10/29 全球购物
如何写一封打动人心的求职信
2014/02/17 职场文书
机械设计及其自动化专业求职信
2014/06/09 职场文书
2014年小学美术工作总结
2014/12/20 职场文书
手术室消毒隔离制度
2015/08/05 职场文书
php引用传递
2021/04/01 PHP
UNION CREATIVE《Re:从零开始的异世界生活》雷姆手办
2022/03/20 日漫
Go语言特点及基本数据类型使用详解
2022/03/21 Golang
python如何查找列表中元素的位置
2022/05/30 Python