2016-11-10 19 views
0

Я хочу, чтобы удалить скроллбар для коробки COMBOXКак удалить скроллбар для комбобокса в extjs2

       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 нет полосы прокрутки наступающем, когда я развернуть те же вещь в нашей среде тестирования я получаю скроллбар как этот enter image description here пожалуйста, предложите мне, как решить эту проблему

+0

Ваш вопрос помечен "Ext4, Ext4.1 и Ext2". Что он? –

+0

он должен работать в extjs2.0, если его работы здесь, я буду переносить то же самое на extjs4 –

ответ

2

для ExtJS 2, вы можете сделать это путем применения пользовательского список CSS класса к listClassComboBox конфигурации и установить этот класс, чтобы заставить 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>

Мои 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

+0

Thanks @Christos –