extjs 04_grid 单击事件新发现_javascript技巧

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";

时间: 2024-11-16 20:34:16

extjs 04_grid 单击事件新发现_javascript技巧的相关文章

Vue.js每天必学之方法与事件处理器_javascript技巧

方法处理器 可以用 v-on 指令监听 DOM 事件: <div id="example"> <button v-on:click="greet">Greet</button> </div> 我们绑定了一个单击事件处理器到一个方法 greet.下面在 Vue 实例中定义这个方法: var vm = new Vue({ el: '#example', data: { name: 'Vue.js' }, // 在 `met

JavaScript Event学习第三章 早期的事件处理程序_javascript技巧

这些古老的浏览器只支持一种注册事件处理程序的方法,这个方法是Netscape发明的.因为Netscape先发制人,所以如果微软也想做支持JavaScript事件的浏览器就得跟着Netscape走,所以这里没有兼容性的问题.所以这种模式在任何支持JavaScript的浏览器都能运行---除了Mac上的IE3,他根本就不支持事件. 注册事件处理程序 在内联式的事件注册模型中,事件处理程序就像是一个HTML元素的属性,比如: <A HREF="somewhere.html" onCli

浅析javascript中的事件代理_javascript技巧

本文的主要内容是根据前不久面试某家公司Web前端开发岗位,面试时做的一道数组去重问题的解题思路进行整理的,分享给大家. 题目本身很简单:一个ul中有一千个li,如何给这一千个li绑定一个鼠标点击事件,当鼠标点击时alert出这个li的内容和li的位置坐标xy, <ul id="ulItem"> <li id="li1">1</li> <li id="li2">2</li> <li

JS实现鼠标单击与双击事件共存_javascript技巧

一直都认为在Web开发中,双击事件都是少至又少地使用,直到最近项目需要,要在一个按钮上绑定单击与双击两件事件.开始也觉得不就是给按钮绑下两个事件而已罢了--只是后来才明白,是我想得太简单,在双击事件触发的同时也会触发单击的~囧 通过一番研究后,终于利用JS中"setTimeout"延时执行方法的办法,将单击延迟300毫秒执行才解决了,代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit

JavaScript事件学习小结(一)事件流_javascript技巧

相关阅读: JavaScript事件学习小结(五)js中事件类型之鼠标事件 http://www.jb51.net/article/86259.htm JavaScript事件学习小结(一)事件流 http://www.jb51.net/article/86261.htm javaScript事件学习小结(四)event的公共成员(属性和方法) http://www.jb51.net/article/86262.htm JavaScript事件学习小结(二)js事件处理程序 http://www

javascript 鼠标事件总结_javascript技巧

常见的有以下8个: mousedown:鼠标的键钮被按下. mouseup:鼠标的键钮被释放弹起. click:单击鼠标的键钮. dblclick:鼠标的键钮被按下. contextmenu :弹出右键菜单. mouseover:鼠标移到目标的上方. mouseout:鼠标移出目标的上方. mousemove:鼠标在目标的上方移动. mousedown事件与mouseup事件可以说click事件在时间上的细分,顺序是mousedown => mouseup => click.因此一个点击事件,

javascript实现简单的on事件绑定_javascript技巧

实现一个简单的on和off方法 介绍: Event对象:    funcList: {}, //保存delegate所绑定的方法      ieFuncList :{} //保存ie下的绑定方法 Event 对象中的 on, off 方法,主要调用 Event.addEvent, Event.delegateHandle这两个方法    Event.addEvent: 调用底层的addEventListener添加监听事件    Event.delegateHandle: 当发生事件之后,随着事

Javascript前端UI框架Kit使用指南之kitjs事件管理_javascript技巧

从今天这章开始,我将会着重介绍KitJs的事件管理的内容,尽量用浅显的语言给大家揭露主流的js框架是如何在内部实现自己独立的事件管理功能的. (一)普通的Dom事件 我们一般可以通过支持在HTML写上事件 <a onclick="alert(1)">测试</a> 或者取到dom对象后绑定 document.getElementById('a').onclick=function(){alert(1)} 或者二级事件 document.getElementById

javascript event 事件解析_javascript技巧

event对象只在事件发生的过程中才有效. event的某些属性只对特定的事件有意义.比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义. 例子 下面的例子检查鼠标是否在链接上单击,并且,如果shift键被按下,就取消链接的跳转. <HTML> <HEAD><TITLE>Cancels Links</TITLE> <SCRIPT LANGUAGE="JScript&qu