ExtJs的ComboBox加空选项时,选项高度的问题

为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的值一致。
修改后效果如下:
ExtJs的ComboBox加空选项时,选项高度的问题 - 红豆小生 -
也可以用在{name}后加空字符的方法提供一个假的空白选项,例如:
tpl:'<tpl for=".">' +
	'<div class="x-combo-list-item" >' +
            '{name}&nbsp;' +
	'</div>'+
    '</tpl>'
这样只是在显示渲染的时候在选项后加空字符,不会影响传递到后台的选项数据。
最后,也可以在页面上用css统一规定下拉单选项高度:
.x-combo-list-item { height: 21px;}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ExtJS 6.2.0 中,`TextArea` 组件本身并没有内置的可选项功能,类似于 `ComboBox` 组件。但是,您可以通过自定义的方式实现类似的效果。 一种常见的方法是使用 `TextArea` 组件结合 `Menu` 组件来创建一个可选择的下拉菜单。当用户选择菜单项,将选项的值插入到 `TextArea` 中。 以下是一个示例代码: ```javascript // 创建一个 TextArea 组件 var textArea = Ext.create('Ext.form.field.TextArea', { // 配置项... }); // 创建一个下拉菜单 var menu = Ext.create('Ext.menu.Menu', { items: [ { text: 'Option 1', value: 'Option 1' }, { text: 'Option 2', value: 'Option 2' }, { text: 'Option 3', value: 'Option 3' } ], listeners: { click: function (menu, item) { // 将选项的值插入到 TextArea 中 var currentValue = textArea.getValue(); var newValue = currentValue ? currentValue + '\n' + item.value : item.value; textArea.setValue(newValue); } } }); // 将下拉菜单绑定到 TextArea 的特定事件上,例如点击事件 textArea.on('click', function () { menu.showBy(textArea); }); ``` 在这个示例中,我们首先创建了一个 `TextArea` 组件和一个下拉菜单 `Menu`。在菜单项被点击,我们将选项的值插入到 `TextArea` 中。然后,我们将下拉菜单绑定到 `TextArea` 的特定事件上(例如点击事件),当用户点击 `TextArea` 下拉菜单将显示在 `TextArea` 的位置上。 请注意,这只是一种实现可选项效果的方式,您可以根据实际需求进行调整和扩展。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值