鼠标悬停时如何更改面板上的图像 - ExtJs？

Question

我正在尝试在执行 mouseOver 和 mouseLeave 时更改每个面板 的图像。

如果我在面板（图像）上执行 鼠标悬停，则该图像应替换为新图像（任何图像）。例如，具有 HTML5 图像的第一个面板应该更改为新图像，如果我执行 mouseleave，HTML5 图像应该再次显示。关于如何做到这一点的任何想法？提前非常感谢。

这是工作代码：FIDDLE

    layout: {
    type: 'accordion',
    titleCollapse: false
     },
     items: [{
    title: '<i class="fa fa-html5" style="font-size:50px;color:black;" id="developmentIcon"></i>',
     xtype: 'panel-details'
     },{
     title: '<i  class="fa fa-wrench" style="font-size:50px;color:black;" id="developmentIcon"></i>',
    xtype: 'panel-details'
    }
     ....
     .....

注意： 为了简单起见，我只是使用 font awesome 图片，但它们可以是任何类型的图片，例如 .png、.svg 等

Answer 1

您可以在grid 的afterrender 事件上使用panel.getHeader().getEl().on('mouseover') 和panel.getHeader().getEl().on('mouseleave') 方法。

在这个 FIDDLE 中，我使用您的代码创建了一个演示。你可以在这里查看它是如何工作的。希望这将帮助您或指导您解决问题或实现您的要求。

Ext.create('Ext.data.Store', {
    storeId: 'problemListStoreDetails',
    fields: ['name', 'email', 'phone'],
    data: [{
        value1: 'Value 1',
        value2: "Active",
        value3: "11/2006"
    }, {
        value1: 'Value2',
        value2: "Inactive",
        value3: "1/1/1998"
    }, {
        value1: 'Value3',
        value2: "Active",
        value3: "5/2017"
    }, {
        value1: 'Value4',
        value2: "pending",
        value3: "11/2017"
    }, {
        value1: 'Value5',
        value2: "Historic",
        value3: "1/9/2000"
    }]
});
Ext.define('MyApp.MyClass', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.panel-details',
    store: Ext.data.StoreManager.lookup('problemListStoreDetails'),
    width: 300,
    columns: {
        defaults: {
            sortable: false,
            hideable: true,
            menuDisabled: true,
            draggable: false,
            style: {
                fontWeight: 'bold'
            }
        },
        items: [{
            text: "Column1",
            dataIndex: 'value1',
            menuDisabled: true
        }, {
            text: "Column2",
            dataIndex: 'value2',
            menuDisabled: true,
            align: 'center'
        }, {
            text: 'Column3',
            dataIndex: 'value3',
            menuDisabled: true,
            align: 'center',
            flex: 1
        }]
    },
    listeners: {
        afterrender: function (cmp) {
            var me = this,
                header = cmp.getHeader().getEl();
            //mouse enter event
            header.on('mouseover', function (e) {
                var targ = e.target.querySelector('i.x-custom-icons'),
                    classList = targ ? targ.classList : null;

                if (targ) {
                    switch (targ.getAttribute('index')) {
                    case "0":
                        classList.remove('fa-html5')
                        break;
                    case "1":
                        classList.remove('fa-wrench');
                        break;
                    case "2":
                        classList.remove('fa-bar-chart');
                        break;
                    case "3":
                        classList.remove('fa-align-justify');
                        break;
                    }
                    //I have used only one icon, only for demo you can use different icons on basis of your requirement.
                    classList.add('fa-check');
                    this.lastTarget = targ;
                }
            }, me);

            //mouseleave event
            header.on('mouseleave', function (e) {
                if (this.lastTarget) {
                    var targ = this.lastTarget,
                        classList = targ.classList;
                    //remvoe icon on mouse leave
                    classList.remove('fa-check');
                    switch (targ.getAttribute('index')) {
                    case "0":
                        classList.add('fa-html5')
                        break;
                    case "1":
                        classList.add('fa-wrench');
                        break;
                    case "2":
                        classList.add('fa-bar-chart');
                        break;
                    case "3":
                        classList.add('fa-align-justify');
                        break;
                    }
                    this.lastTarget = null;
                }
            }, me);
        }
    }
});

Ext.create('Ext.panel.Panel', {
    title: 'Accordion Layout',
    autoHeight: true,
    fill: false,
    layout: {
        type: 'accordion',
        titleCollapse: false
    },
    bodyPadding: 10,
    defaults: {
        xtype: 'panel-details'
    },
    items: [{
        title: '<i index="0" class="fa fa-html5 x-custom-icons" ></i>'
    }, {
        title: '<i index="1" class="fa fa-wrench x-custom-icons" ></i>'
    }, {
        title: '<i  index="2" class="fa fa-bar-chart x-custom-icons" ></i>',
    }, {
        title: '<i  index="3" class="fa fa-align-justify x-custom-icons"></i>'
    }],
    renderTo: Ext.getBody()
});