Extjs 5.0.1：当我们为网格或其任何父级指定边框半径时，滚动时会在网格中获取空白

Question

问题：滚动网格时出现空白。当我们将鼠标悬停在网格上时，该空白就会消失。

步骤：通过 css/style 配置将 border-radius css 属性分配给网格。

示例代码：

Ext.create('Ext.grid.Panel', {
   style:'border-radius:4px;',
});

这是小提琴

注意：这种情况发生在 chrome 版本68.0.3440.42（官方版本）beta（64 位）中。

请建议是否有任何解决方法或任何修复！！

我还想问为什么我们对 x-grid-item-container div 有 transform:translate3d(0px, 0px, 0px) 。

Answer 1

您可以通过使用

overflow: visible;

样式上的

grid

属性来解决此问题。

你可以检查这个工作Fiddle。

代码片段：

Ext.application({
    name: 'Fiddle',

    launch: function () {
        
        Ext.create('Ext.grid.Panel', {
            style: 'border-radius:4px;overflow: visible;',
            title: 'DEMO',
            store: {
                type: 'datastore',
                autoLoad: true
            },
            columns: [{
                text: 'Name',
                dataIndex: 'name',
                flex: 1
            }, {
                text: 'Email',
                dataIndex: 'email',
                flex: 1
            }, {
                text: 'Phone',
                dataIndex: 'phone',
                flex: 1
            }],
            height: 200,
            renderTo: Ext.getBody()
        });
    }
});