为ExtJS的Combobox下拉列表增加空选项后,空选项的高度比较小。
![ExtJs的ComboBox加空选项时,选项高度的问题 - 红豆小生 -](http://img2.ph.126.net/pOWx8LDYc0sZBh2TzBIpmA==/6608197923841514447.jpg)
new Ext.form.ComboBox({ name: 'gender', triggerAction: 'all', editable: false, disabled:false, mode: 'local', displayField: 'name', valueField: 'value', store:genderStore, tpl:'<tpl for=".">' + '<div class="x-combo-list-item" style="height:12px;">' + '{name}' + '</div>'+ '</tpl>' })注意{name}要和displayField的值一致。
修改后效果如下:
![ExtJs的ComboBox加空选项时,选项高度的问题 - 红豆小生 -](http://img0.ph.126.net/lROTO2tnzGKzJJYAgnGsbw==/6599281984052350230.jpg)
也可以用在{name}后加空字符的方法提供一个假的空白选项,例如:
最后,也可以在页面上用css统一规定下拉单选项高度:
tpl:'<tpl for=".">' + '<div class="x-combo-list-item" >' + '{name} ' + '</div>'+ '</tpl>'这样只是在显示渲染的时候在选项后加空字符,不会影响传递到后台的选项数据。
最后,也可以在页面上用css统一规定下拉单选项高度:
.x-combo-list-item { height: 21px;}