extjs - How to remove scrollbars for a combobox in extjs2 -
i want remove scrollbars 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 rating.', fieldlabel: '*rating', anchor: '90%' })
this code using, in local ie11 browser no scrollbars coming when deploy same thing in our testing environment getting scrollbars please suggest me how resolve issue
for extjs 2, can applying custom list css class listclass
combobox
config , set class force overflow: hidden
style 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 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 autoscroll
parameter allows enable or disable scrollbars if apply 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 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
Comments
Post a Comment