Question

我将ExtJS 6组合框渲染到某个dom元素，问题是当我展开这个组合框并开始使用鼠标滚轮时，这个下拉列表不能正确定位。它看起来像这样：

在

正如您在第二个屏幕上看到的，下拉列表远离组件。

不幸的是，我无法提供一些简短的可重现的例子，因为我使用了一些第三方窗口组件，其中我尝试渲染ExtJS组件。但我仍然希望，有人知道一些可能有助于解决这个问题的组合框配置。

修改

这是一个重现错误的最小化示例：

<!doctype html>
<html>
<head>
<title>Demo</title>
<link rel="stylesheet" href="../ext-6.2.2/build/classic/theme-triton/resources/theme-triton-all.css" type="text/css" />
<script src="../ext-6.2.2/build/ext-all.js"></script>    
<style>
    .uk-modal {
        z-index: 1304;
        background: rgba(0,0,0,.5);
        overflow: auto !important;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
    .uk-open .uk-modal-dialog {
        height: 1000px;
        width: 600px;
        padding: 24px;
        display: block !important;
        position: relative;
        margin: 50px auto;            
        background: rgba(255,255,255,1);
    }
</style>
</head>
<body style="margin:0; padding:0">
<div class="uk-modal uk-open">
    <div class="uk-modal-dialog">
        <div id="combobox"></div>
    </div>
</div>
<script>
Ext.application({
    name : 'Demo',
    appFolder: '.',
    autoCreateViewport: false,
    launch: function(){
        var states = Ext.create('Ext.data.Store', {
            fields: ['abbr', 'name'],
            data : [
                {"abbr":"AL", "name":"Alabama"},
                {"abbr":"AK", "name":"Alaska"},
                {"abbr":"AZ", "name":"Arizona"}
            ]
        });
        Ext.create('Ext.form.ComboBox', {
            fieldLabel: 'Choose State',
            store: states,
            queryMode: 'local',
            displayField: 'name',
            valueField: 'abbr',
            renderTo: 'combobox'
        });
    }
});
</script>
</body>

就是这样。请注意.uk-open .uk-modal-dialog height样式，它应该足够大，以便您可以使用鼠标滚轮向下滚动。

Answer 1

您可以尝试删除样式中position: fixed;的{{1}}。至少在简化示例中，它不是必需的，而是导致错误。

Combobox下拉列表错误

1 个答案: