extjs 04_grid 单击事件新发现

 更新时间:2012年11月27日 14:42:32   作者:  
EXTJS GRID 中单击行和单元格获得行或者单元格的内容(数据),本文将整理此功能的应用,需要了解的朋友可以参考下
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";

相关文章

  • layui实现文件或图片上传记录

    layui实现文件或图片上传记录

    这篇文章主要为大家详细介绍了layui实现文件或图片上传记录,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-08-08
  • JS如何调用WebAssembly编译出来的.wasm文件

    JS如何调用WebAssembly编译出来的.wasm文件

    这篇文章主要介绍了关于WebAssembly编译出来的.wasm文件js如何调用,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-11-11
  • js Dialog 实践分享

    js Dialog 实践分享

    在我们的WebApp项目中,Dialog是个不可或缺的元素,很多页面操作都通过Dialog来进行,今天我们就Dialog显示数据、提交数据做进一步分析
    2012-10-10
  • 温习Javascript基础语法之词法结构

    温习Javascript基础语法之词法结构

    javascript是一门简单的语言,也是一门复杂的语言。这篇文章主要介绍了温习Javascript基础语法之词法结构的相关资料,需要的朋友可以参考下
    2016-05-05
  • javascript 无提示关闭窗口脚本

    javascript 无提示关闭窗口脚本

    在IE7、IE8中,使用JavaScript提供的close()方法都可以关闭当前窗口或标签,但都提示讨厌的对话框,找了下代码,终于可以无提示直接关闭了。
    2009-08-08
  • javascript实现阻止iOS APP中的链接打开Safari浏览器

    javascript实现阻止iOS APP中的链接打开Safari浏览器

    这篇文章主要介绍了javascript实现阻止iOS APP中的链接打开Safari浏览器,这个IOS APP一般是Web APP,否则没法使用本文的代码,需要的朋友可以参考下
    2014-06-06
  • sso跨域写cookie的一段js脚本(推荐)

    sso跨域写cookie的一段js脚本(推荐)

    下面小编就为大家带来一篇sso跨域写cookie的一段js脚本(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • element-ui 时间选择器限制范围的实现(随动)

    element-ui 时间选择器限制范围的实现(随动)

    这篇文章主要介绍了element-ui 时间选择器限制范围(随动),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • 关于字符串和对象互转以及JSON.parse()的坑

    关于字符串和对象互转以及JSON.parse()的坑

    这篇文章主要介绍了关于字符串和对象互转以及JSON.parse()的坑及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • JavaScript通过this变量快速找出用户选中radio按钮的方法

    JavaScript通过this变量快速找出用户选中radio按钮的方法

    这篇文章主要介绍了JavaScript通过this变量快速找出用户选中radio按钮的方法,涉及javascript中this变量的使用技巧,非常具有实用价值,需要的朋友可以参考下
    2015-03-03

最新评论