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 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: '' }, { title: '' }, { title: '', }, { title: '' }], renderTo: Ext.getBody() });事件中使用panel.getHeader().getEl().on('mouseover')和panel.getHeader().getEl().on('mouseleave')方法。

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

GLuint FramebufferName = 0;
glGenFramebuffers(1, &FramebufferName);
glBindFramebuffer(GL_FRAMEBUFFER, FramebufferName);

// The texture we're going to render to
GLuint renderedTexture;
glGenTextures(1, &renderedTexture);
glBindTexture(GL_TEXTURE_2D, renderedTexture);

glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB32UI, windowWidth, windowHeight, 0, GL_RGB_INTEGER, GL_UNSIGNED_INT, 0);

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);

glFramebufferTexture(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, renderedTexture, 0);

// The depth buffer
GLuint depthrenderbuffer;
glGenRenderbuffers(1, &depthrenderbuffer);
glBindRenderbuffer(GL_RENDERBUFFER, depthrenderbuffer);
glRenderbufferStorage(GL_RENDERBUFFER, GL_DEPTH_COMPONENT, windowWidth, windowHeight);
glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_DEPTH_ATTACHMENT, GL_RENDERBUFFER, depthrenderbuffer);

GLenum DrawBuffers[1] = { GL_COLOR_ATTACHMENT0 };
glDrawBuffers(1, DrawBuffers); // "1" is the size of DrawBuffers

glBindFramebuffer(GL_FRAMEBUFFER, FramebufferName);

render_scene();

glBindFramebuffer(GL_FRAMEBUFFER, 0);

    glBindBuffer(GL_READ_BUFFER, FramebufferName);
    glReadBuffer(GL_COLOR_ATTACHMENT0);

    GLuint data[3];
    for (int i=0; i < windowWidth; i++)
        for (int j = 0; j < windowHeight; j++)
        {
            glReadPixels(i, j, 1, 1, GL_RGB32UI, GL_UNSIGNED_INT, data);

            if (data[0] == 1 && data[1] == 2 && data[2] == 3)
                int a = 1;
        }

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

1 个答案: