ExtJS 7.x 布局动画上的现代网格选择错误答案

【问题标题】：ExtJS 7.x Modern Grid Selection Bug On Layout AnimationExtJS 7.x 布局动画上的现代网格选择错误
【发布时间】：2021-03-07 09:49:27
【问题描述】：

如何解决？我在使用网格组件的布局卡片动画上发现了一个错误；

会发生什么？当您配置“卡片”类型的布局和“幻灯片”、“封面”等的动画时......行选择（记录）停止工作，当将鼠标悬停在记录上并单击时，检查的 css 会给出错误。

当你简单地将布局改为“卡片”时，网格选择工作正常。

我使用的是 Windows 10，Edge 浏览器；

See the bug on Sencha Fiddle

【问题讨论】：

Linux 上的 Firefox 没有这个问题。 Firefox 上的 Chrome 可以。事件正在被触发它出现。正在应用正确的类。在开发人员控制台中，如果您单击 x-hovered 类的属性之一（取消选择和重新选择），它就会开始正常工作.....就像该类没有正确应用一样。

标签： css extjs cardlayout extjs-grid extjs7

【解决方案1】：

只是网格，dataview似乎没有同样的问题。在 Firefox 上没有收到错误。

也只有 Material 主题，因为它与时尚有关。我不知道如何在煎茶小提琴中导入时尚，所以我无法添加到你的小提琴中。

我发现，如果您在 chrome devtools 中取消选中任何颜色，一个动画的问题就会消失。所以我搞砸了重置颜色，这似乎有效。您必须更改颜色等待 10 毫秒并将其更改回来。您可以更改任何颜色。我正在更改悬停背景颜色，但它可以是任何预定义颜色。我只改变了一种色调，它只持续了 10 毫秒。它只适用于#11111 格式的颜色。

我还没有弄清楚是什么导致了这个问题，但我有一个巨大的解决方法。我相信这可以改进......也没有测试太多。如果您发现了根本问题，请随时发布任何改进。

 items: [{
    xtype: "grid",
    ui: 'default',
    listeners: {
        show: function() {
            let cssVariables = Fashion.css.getVariables();
            let oldColor = cssVariables['hovered-background-color'];
            newColor = parseInt(oldColor, 16);
            newColor = '#' + (((newColor & 0x0000FF) + 1) | ((((newColor >> 8) & 0x00FF) + 1) << 8) | (((newColor >> 16) + 1) << 16)).toString(16);
            cssVariables['hovered-background-color'] = newColor;
            Fashion.css.setVariables(cssVariables);
            Ext.defer(function() {
                cssVariables['hovered-background-color'] = oldColor;
                Fashion.css.setVariables(cssVariables);
            }, 10);
        }
    },
    title: 'Simpsons',
    store: {
        fields: ['name', 'email', 'phone'],
        data: [
            { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
            { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
            { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
            { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
        ]
    },
    columns: [
        { text: 'Name',  dataIndex: 'name', width: 200 },
        { text: 'Email', dataIndex: 'email', width: 250 },
        { text: 'Phone', dataIndex: 'phone', width: 120, flex: 1 }
    ]
}, {

【讨论】：