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

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

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


你可能感兴趣的:(Extjs4)