普通图像 Extjs 上的动作图标

如何解决普通图像 Extjs 上的动作图标

我正在尝试使用 ext js 4.2.2 版本显示图像。当我尝试将鼠标悬停在现有图像上时，它应该在现有图像上显示一个图标（另一个小图像）并模糊背景以删除图像。我在下面尝试过，但不确定如何在现有图像上渲染图标图像。

Ext.application({
    name: 'fiddle',launch: function () {
        var me = this;
        myWindow = Ext.create('Ext.window.Window',{
            title: 'Test Component animation',width: 500,height: 300,layout: {
                type: 'hBox',align: 'stretch'
            },items: [{
                xtype: 'image',flex: 0.12,height: '80px',width: '80px',margin: '0 10 0 0',src: '',//existing image src
                itemId: 'image',style: {
                    'cursor': 'pointer'
                },listeners: {
                    render: function (f) {
                        this.getEl().on('mouSEOver',function () {

                            this.animate({
                                to: {
                                    opacity: 0.2
                                },listeners: {
                                    afteranimate: function () {
                                        me.mouserOverFunction(f);
                                    },scope: this
                                }
                            });

                        });

                        this.getEl().on('mouSEOut',function () {

                            this.animate({
                                to: {
                                    opacity: 1
                                },listeners: {
                                    beforeanimate: function () {
                                        me.mouSEOutFunction(f);
                                    },scope: this
                                }
                            });

                        });

                    }

                }
            }]
        });

  
    },mouserOverFunction: function (f) {
 f.setSrc('');//new image src
    },mouSEOutFunction: function (f) {
        // My custom logic
        f.setSrc('');//old image src
    }
});