Extjs实现在Ext.grid列鼠标悬浮显示图片

在 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.

 

Ext.panel.Table
view source

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;
                	}
                }
            }
        });

效果图，抱歉第一次发表博客，不太清楚怎么使用，造成没有图片，现在补上了