鼠標懸停時如何在面板上更改圖像-ExtJs？

Question

我正在嘗試更改mouseOver和mouseLeave時更改每個面板的圖像。

如果我將鼠標懸停在面板上（圖像），則該圖像應替換為新的圖像（任何圖像）。 例如，具有HTML5圖像的第一個面板應更改為新圖像，如果我單擊鼠標，則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'
    }
     ....
     .....

注意：為了簡單起見，我僅使用字體超贊圖像，但它們可以是任何類型的圖像，例如.png，.svg等

Answer 1

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

在此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()
});