0

我想删除组合框的滚动条

                                new Ext.form.ComboBox({
                                    name:'cmbRating',
                                    id:'cmbRat',
                                    store: new Ext.data.SimpleStore({
                                        fields: ["wordRating","wordRatingValue"],
                                        data: [["0","XXXX Word"],["1","AAAAA Word"],["2","SSSSS Word"]]
                                    }),
                                    displayField:'wordRatingValue',
                                    valueField:"wordRating",
                                    mode: 'local',
                                    triggerAction: 'all',
                                    forceSelection: true,
                                    editable: false,
                                    allowBlank: false,
                                    blankText: 'Plase choose a rating.',
                                    fieldLabel: '*Rating',
                                    anchor: '90%'
                                })

这是我正在使用的代码，在本地 IE11 浏览器中，当我在我们的测试环境中部署相同的东西时，没有滚动条出现我得到这样的滚动条 在此处输入图像描述 请建议我如何解决这个问题

4

1 回答 1

2

对于ExtJS 2，您可以通过将自定义列表 css 类应用于配置并将该类设置为强制使用如下样式来实现：listClass ComboBoxoverflow: hidden

Ext.onReady(function() {
  new Ext.form.ComboBox({
    renderTo: 'comboContainer',

    name:'cmbRating',
    id:'cmbRat',
    store: new Ext.data.SimpleStore({
      fields: ["wordRating","wordRatingValue"],
      data: [["0","XXXX Word XXX XXX XXXXXXXX XXXXX AAAAA"],["1","AAAAA Word"],["2","SSSSS Word"],["3","XXXX Word"],["4","AAAAA Word"],["5","SSSSS Word"],["6","XXXX Word"],["7","AAAAA Word"],["8","SSSSS Word"],["0","XXXX Word"],["1","AAAAA Word"],["2","SSSSS Word"],["3","XXXX Word"],["4","AAAAA Word"],["5","SSSSS Word"],["6","XXXX Word"],["7","AAAAA Word"],["8","SSSSS Word 1"]]
    }),
    displayField:'wordRatingValue',
    valueField:"wordRating",
    mode: 'local',
    triggerAction: 'all',
    forceSelection: true,
    editable: false,
    allowBlank: false,
    blankText: 'Plase choose a rating.',
    fieldLabel: '*Rating',
    anchor: '90%',
    listClass: 'x-combo-hide-scrollbars'
  });
});
.x-combo-hide-scrollbars .x-combo-list-inner {
  overflow: hidden !important;
}
<link rel="stylesheet" type="text/css" href="http://zikro.gr/dbg/html/extjs/extjs-2.2.1/css/ext-all.css" />
<script type="text/javascript" src="http://zikro.gr/dbg/html/extjs/extjs-2.2.1/adapter/ext/ext-base.js""> </script>
<script type="text/javascript" src="http://zikro.gr/dbg/html/extjs/extjs-2.2.1/ext-all.js""> </script>
<div id="comboContainer"></div>

我的 ExtJS 2 示例：http: //zikro.gr/dbg/html/extjs/combo-hide-scroll-extjs2.html

对于ExtJS 4，如果我们将其应用于参数，则有一个autoScroll参数允许启用或禁用滚动条listConfig：

Ext.onReady(function() {
  new Ext.form.ComboBox({
    renderTo: 'comboContainer',

    name:'cmbRating',
    id:'cmbRat',
    store: new Ext.data.SimpleStore({
      fields: ["wordRating","wordRatingValue"],
      data: [["0","XXXX Word XXX XXX XXXXXXXX XXXXX AAAAA"],["1","AAAAA Word"],["2","SSSSS Word"],["3","XXXX Word"],["4","AAAAA Word"],["5","SSSSS Word"],["6","XXXX Word"],["7","AAAAA Word"],["8","SSSSS Word"],["0","XXXX Word"],["1","AAAAA Word"],["2","SSSSS Word"],["3","XXXX Word"],["4","AAAAA Word"],["5","SSSSS Word"],["6","XXXX Word"],["7","AAAAA Word"],["8","SSSSS Word"]]
    }),
    displayField:'wordRatingValue',
    valueField:"wordRating",
    mode: 'local',
    triggerAction: 'all',
    forceSelection: true,
    editable: false,
    allowBlank: false,
    blankText: 'Plase choose a rating.',
    fieldLabel: '*Rating',
    anchor: '90%',
    listConfig: {
      autoScroll: false
    }
  });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/resources/ext-theme-classic/ext-theme-classic-all.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/ext-all.js"></script>
<div id="comboContainer"></div>

我的 ExtJS 4 示例：http: //zikro.gr/dbg/html/extjs/combo-hide-scroll.html

于 2016-11-26T03:21:31.253 回答