在 ext grid 中动态显示图片 的问题,使用鼠标移入事件和移出事件,extjs4.0测试通过
使用grid 的鼠标事件:
itemmouseleave(
Ext.view.View this, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObject e, ObjecteOpts )
选项的鼠标移开事件 当鼠标移开选项时触发
Parameters
- this : Ext.view.View
指向Ext.view.View
- record : Ext.data.Model
属于选项的记录
- item : HTMLElement
选项元素
- index : Number
选项索引
- e : Ext.EventObject
事件对象
- eOpts : Object
The options object passed to Ext.util.Observable.addListener.
itemmouseup(
Ext.view.View this, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObject e, ObjecteOpts )
选项的鼠标释放事件 当鼠标释放选项时触发
Parameters
- this : Ext.view.View
指向Ext.view.View
- record : Ext.data.Model
属于选项的记录
- item : HTMLElement
选项元素
- index : Number
选项索引
- e : Ext.EventObject
事件对象
- eOpts : Object
The options object passed to Ext.util.Observable.addListener.
在jsp页面设置全局变量
(function(){
Ext.onReady(function(){
var pictureFile=null;//装载图片
var grid = Ext.create('Ext.grid.Panel',{
title: '信息',
store: store,
height: '100%',
width: Ext.getBody().getWidth()>800?Ext.getBody().getWidth():800,
loadMask: true,
autoScroll:true,
viewConfig: {
autoFill:true
},
columns:[
Ext.create('Ext.grid.RowNumberer'),
{text:'编号',dataIndex:'no',sortable:true,width:80},
{text: "姓名",dataIndex: 'name',sortable: true,width:100},
{text: "性别",dataIndex: 'sex',sortable: true,width:40,
renderer:function(value, cellmeta, record, rowIndex, columnIndex, store)
{
return value=='m'?"男":(value=='f'?"女":"-");
}
},
],
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: '当前第 {0} - {1} 条记录,共 {2} 条',
emptyMsg: "没有任何记录"
}),
renderTo:Ext.getBody(),
listeners:{
itemmouseenter: function(view,record,item,index,event,options){//鼠标移入事件
if(pictureFile){//关闭上一个图片预览,如果存在
pictureFile.close();
}
pictureFile= Ext.create('Ext.window.Window', {
layout: 'fit',
resizable: false,//改变大小
plain: true,//主体背景透明
closable: false,//是否显示关闭
y:-25,//窗口头部隐藏在窗口外,x不设值为居中显示
items:[{
xtype: 'box',//或者xtype: 'component',
width: 70, //宽度
height: 70, //高度
autoEl: {
tag: 'img',//指定为img标签
src: '项目文件路径'+record.get('pictureFile')//指定url路径
}
}]
});
pictureFile.show();
},
itemmouseleave: function(t){//鼠标移除事件
if(pictureFile){//关闭上一个图片预览并值空,如果存在
pictureFile.close();
pictureFile=null;
}
}
}
});
效果图,抱歉第一次发表博客,不太清楚怎么使用,造成没有图片,现在补上了