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";
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实现文件或图片上传记录，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-08-08
这篇文章主要介绍了关于WebAssembly编译出来的.wasm文件js如何调用,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-11-11
在我们的WebApp项目中，Dialog是个不可或缺的元素，很多页面操作都通过Dialog来进行，今天我们就Dialog显示数据、提交数据做进一步分析2012-10-10
javascript是一门简单的语言，也是一门复杂的语言。这篇文章主要介绍了温习Javascript基础语法之词法结构的相关资料,需要的朋友可以参考下2016-05-05
在IE7、IE8中，使用JavaScript提供的close()方法都可以关闭当前窗口或标签，但都提示讨厌的对话框，找了下代码，终于可以无提示直接关闭了。2009-08-08
javascript实现阻止iOS APP中的链接打开Safari浏览器
这篇文章主要介绍了javascript实现阻止iOS APP中的链接打开Safari浏览器,这个IOS APP一般是Web APP,否则没法使用本文的代码,需要的朋友可以参考下2014-06-06
下面小编就为大家带来一篇sso跨域写cookie的一段js脚本(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
这篇文章主要介绍了element-ui 时间选择器限制范围（随动）,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
这篇文章主要介绍了关于字符串和对象互转以及JSON.parse()的坑及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
JavaScript通过this变量快速找出用户选中radio按钮的方法
这篇文章主要介绍了JavaScript通过this变量快速找出用户选中radio按钮的方法,涉及javascript中this变量的使用技巧,非常具有实用价值,需要的朋友可以参考下2015-03-03
最新评论