extjsextjs4extjs4.1extjs2

How to remove scrollbars for a combobox in extjs2

I want to remove the scrollbars for the combox box

                                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%'
                                })

this is the code i am using, in local IE11 browser no scrollbars are coming when i deploy the same thing in our testing environment i am getting the scrollbars like this enter image description here please suggest me how to resolve this issue

Solution

  • For ExtJS 2, you can do it by applying custom list css class to the listClass ComboBox config and set that class to force an overflow: hidden style like this:

    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 example: http://zikro.gr/dbg/html/extjs/combo-hide-scroll-extjs2.html

    For ExtJS 4, there is the autoScroll parameter that allows to enable or disable the scrollbars if we apply it to the listConfig parameters:

    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 example: http://zikro.gr/dbg/html/extjs/combo-hide-scroll.html