如何在extjs2中删除组合框的滚动条

Question

我想要移除通信箱的滚动条。

                                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浏览器中，当我在测试环境中部署相同的东西时，不会出现滚动条，我得到的滚动条如下

请建议我如何解决这个问题。

Answer 1

对于ExtJS 2，可以将自定义列表css类应用于listClass ComboBox配置，并将该类设置为强制使用如下所示的overflow: 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>

​

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

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

​

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>

​

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