ExtJS的Combobox下拉列表增加空选项后，空选项的高度比较小

为ExtJS的Combobox下拉列表增加空选项后，空选项的高度比较小。

 

 解决方法是为Combobox的tpl属性设置template string，并在该template string中添加高度样式定义，例如：

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的值一致。

 

也可以用在{name}后加空字符的方法提供一个假的空白选项，例如：

tpl:'<tpl for=".">' +

         '<div class="x-combo-list-item" >' +

            '{name}&nbsp;' +

         '</div>'+

    '</tpl>'

这样只是在显示渲染的时候在选项后加空字符，不会影响传递到后台的选项数据。
最后，也可以在页面上用css统一规定下拉单选项高度：

.x-combo-list-item { height: 21px;}