ext ComboBox 不可编辑
时间: 2023-08-18 12:22:21 浏览: 79
如果您需要 Ext ComboBox 组件不可编辑,即用户不能手动输入选项,可以将 `editable` 属性设置为 `false`。这样,用户只能通过下拉列表选择选项,而不能手动输入。
以下是一个示例代码:
```javascript
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
displayField: 'state',
valueField: 'abbr',
editable: false, // 设置为 false,禁止用户手动输入选项
renderTo: Ext.getBody()
});
```
在上面的示例中,`editable` 属性被设置为 `false`,这将禁止用户手动输入选项。
相关问题
mfc combobox设置不可编辑
要设置MFC ComboBox控件不可编辑,可以使用CComboBox类的EnableWindow函数。将该函数的参数设置为FALSE即可禁用ComboBox的编辑功能。下面是一个示例代码:
```c++
CComboBox comboBox; // 声明一个ComboBox对象
comboBox.Create(WS_CHILD|WS_VISIBLE|CBS_DROPDOWNLIST, CRect(0,0,100,100), pParentWnd, IDC_COMBO_BOX);
// 设置ComboBox为DropDownList风格,创建ComboBox控件
comboBox.AddString(L"选项1");
comboBox.AddString(L"选项2");
comboBox.AddString(L"选项3");
// 添加ComboBox的选项
comboBox.SetCurSel(0); // 设置默认选中第一项
comboBox.EnableWindow(FALSE); // 禁用ComboBox的编辑功能
```
在上述代码中,EnableWindow函数被用于禁用ComboBox的编辑功能。你可以根据自己的需要来调整ComboBox的样式和选项。
Ext combobox 下拉多选框带搜索功能
ExtJS的combobox组件本身并不支持多选和搜索功能,但是可以通过扩展来实现这些功能。以下是一个基于ExtJS 6.5版本的下拉多选框带搜索功能的示例代码:
```javascript
Ext.define('MyApp.view.MultiSelectComboBox', {
extend: 'Ext.form.field.ComboBox',
xtype: 'multiselectcombo',
multiSelect: true,
delimiter: ',',
triggerAction: 'all',
queryMode: 'remote',
queryParam: 'search',
minChars: 1,
createPicker: function() {
var me = this,
picker,
menuCls = Ext.baseCSSPrefix + 'menu',
opts = Ext.apply({
pickerField: me,
selModel: {
mode: 'SIMPLE'
},
floating: true,
hidden: true,
ownerCt: me.ownerCt,
cls: me.el.up('.' + menuCls) ? menuCls : '',
store: me.store,
displayField: me.displayField,
focusOnToFront: false,
pageSize: me.pageSize
}, me.listConfig, me.defaultListConfig);
picker = me.picker = Ext.create('Ext.view.BoundList', opts);
me.mon(picker.getSelectionModel(), {
'beforeselect': me.onBeforeSelect,
'beforedeselect': me.onBeforeDeselect,
scope: me
});
me.mon(picker, {
itemclick: me.onItemClick,
refresh: me.onListRefresh,
scope: me
});
me.mon(picker.getSelectionModel(), 'selectionchange', me.onListSelectionChange, me);
return picker;
},
initComponent: function() {
var me = this;
me.callParent(arguments);
me.on('change', me.onChange, me);
},
onChange: function(combo, newValue, oldValue) {
var me = this,
delimiter = me.delimiter,
values = newValue.split(delimiter),
store = me.getStore(),
valueField = me.valueField,
displayField = me.displayField,
rec, i, len, value;
store.clearFilter();
store.filter(function(record) {
return Ext.Array.contains(values, record.get(displayField));
});
me.setValue(values.join(delimiter));
},
onBeforeDeselect: function(list, record) {
return !this.readOnly;
},
onBeforeSelect: function(list, record) {
return !this.readOnly;
},
onItemClick: function(view, record, item, index, e) {
var me = this,
delimiter = me.delimiter,
displayField = me.displayField,
valueField = me.valueField,
value = record.get(displayField),
oldValue = me.getValue(),
values, index;
if (!Ext.isDefined(oldValue)) {
oldValue = '';
}
values = oldValue.split(delimiter);
index = Ext.Array.indexOf(values, value);
if (index > -1) {
values.splice(index, 1);
} else {
values.push(value);
}
me.setValue(values.join(delimiter));
me.fireEvent('select', me, [record]);
}
});
```
这个组件继承自Ext.form.field.ComboBox,并添加了以下属性和方法:
- multiSelect:是否启用多选功能,缺省为false。
- delimiter:多选时使用的分隔符,缺省为逗号。
- createPicker:重写父类的createPicker方法,用于创建下拉框的选择器。这里使用了Ext.view.BoundList组件来实现多选和搜索功能。
- onChange:重写父类的onChange方法,在值改变时更新选择器中选中的项。
- onItemClick:处理选择器中的选项点击事件,实现多选功能。
使用这个组件时,只需将xtype设置为'multiselectcombo'即可,例如:
```javascript
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
width: 400,
items: [{
xtype: 'multiselectcombo',
fieldLabel: 'Select',
name: 'select',
store: ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5']
}]
});
```
这个示例中,使用了一个简单的字符串数组作为数据源。实际应用中,可以使用Ext.data.Store来加载数据,并设置queryMode为'remote',通过AJAX请求服务器端进行搜索。