(加分)Extjs grid中鼠标触发事件
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了(加分)Extjs grid中鼠标触发事件相关的知识，希望对你有一定的参考价值。
我想要让鼠标指向grid的每一行的时候 在鼠标下方显示一个浮框 显示的是这一行 的信息 将字体加大 这是我的代码 在这基础上该怎么做啊 帮我写一下希望能写出详细的注释 我是个菜鸟 会加分的
<script type="text/javascript">
Ext.onReady(function()
var cm = new Ext.grid.ColumnModel([
header:'编号',dataIndex:'id',width:35,
header:'名称',dataIndex:'name',width:80,
header:'描述',dataIndex:'descn',width:120
]);
var data = [
['1','name1','descn1'],
['2','name2','descn2'],
['3','name3','descn3'],
['4','name4','descn4'],
['5','name5','descn5']
];
var store = new Ext.data.Store(
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader(, [
name: 'id',
name: 'name',
name: 'descn'
])
);
store.load();
var grid = new Ext.grid.GridPanel(
autoHeight: true,
renderTo: 'grid',
store: store,
cm: cm,
viewConfig:
forceFit: true
);
var win = new Ext.Window(
id:'window',
el:'window-win',
layout:'fit',
width:500,
height:270,
closeAction:'hide',
items: [grid]
);
win.show();
);
</script>
</head>
<body>
<div id="window-win">
<div id="grid"></div>
</body>
</html>
太感谢了 这就给你分 还有些细节想要问您 我加您百度好友吧 现在公司要用这个东西 都是刚开始研究 没有系统的 学过都是 用到什么就看什么 以后还点多向您讨教
<head>
<title>Debug Console</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="debug.css" />
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function()
var cm = new Ext.grid.ColumnModel([
header:'编号',dataIndex:'id',width:35,
header:'名称',dataIndex:'name',width:80,
header:'描述',dataIndex:'descn',width:120
]);
var data = [
['1','name1','descn1'],
['2','name2','descn2'],
['3','name3','descn3'],
['4','name4','descn4'],
['5','name5','descn5']
];
var store = new Ext.data.Store(
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader(, [
name: 'id',
name: 'name',
name: 'descn'
])
);
store.load();
var grid = new Ext.grid.GridPanel(
autoHeight: true,
renderTo: 'grid',
store: store,
cm: cm,
viewConfig:
forceFit: true
);
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);
);
var win = new Ext.Window(
id:'window',
el:'window-win',
layout:'fit',
width:500,
height:270,
closeAction:'hide',
items: [grid]
);
win.show();
Ext.QuickTips.init();//注意，提示初始化必须要有
);
</script>
</head>
<body>
<div id="window-win">
<div id="grid"></div>
</body>
</html>
--------------------------------------------------------------
我比较爱好ext，曾经写了不少这方面的代码，
以上代码是现写的，调试通过，
以后大家可以讨论讨论本回答被提问者采纳
extjs3.x 在grid表格里添加超链接点击事件，并触发有效。
例如：
var qdGridColumns = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer({ width : 28 }),
{
header : ‘下载‘,
dataIndex : ‘load‘,
width : 120,
align : ‘center‘,
renderer : function(value, metaData, record){
return "<a href=‘#‘>下载</a>"; //超链接字样，点击触发GridPanel里的触发（cellclick）事件，然后在该事件里做判断，
}
,
{
header : ‘发布人‘,
dataIndex : ‘username‘,
width : 200,
align : ‘center‘,
renderer : function(v){return v;}
}
,
{
header : ‘发布时间‘,
dataIndex : ‘datetime‘,
width : 220,
align : ‘center‘,
renderer : function(v){return v;}
}
]);
//panel里的单元格点击事件 ：
var qdGridPanel = new Ext.grid.GridPanel({
title : ‘<span class="commoncss">【文件发布明细】</span>‘,
region : ‘east‘,
store : qdGridStore,
cm : qdGridColumns,
height : 300,
width : 620,
stripeRows : true,
trackMouseOver : true,
loadMask : true,
frame : true,
clicksToEdit : 1,
listeners: {
// cellclick: function( thi, td, cellIndex, record, tr, rowIndex, e, eOpts) {
cellclick: function(grid, rowIndex, columnIndex, e) {
//点击到的单元格列的角标
//console.log(columnIndex);
//点击单元格列的名字，此处为name=‘load‘
var name = grid.getColumnModel().getDataIndex(columnIndex);
//console.log(name);
var record = grid.getStore().getAt(rowIndex);//获取该行的数据
var filepath = record.data.filepath//获取该行某个列的值
// var data = record.get(name);//根据名字获取某列的值
if(name==‘load‘){ //也可根据 columnIndex 列的角标判断是否是该列----该方法当列角标改变容易出错；
alert(123); //此处添加你的点击事件所要触发的方法，或业务
}else{
return ;
}
}
}
});
以上是关于(加分)Extjs grid中鼠标触发事件的主要内容，如果未能解决你的问题，请参考以下文章