好的，以下是一个
EXT下拉多选搜索组件的示例代码：
```javascript
Ext.define('MyApp.view.MultiSelectCombo', {
extend: '
Ext.form.field.ComboBox',
alias: 'widget.multiselectcombo',
multiSelect: true,
queryMode: 'local',
triggerAction: 'all',
initComponent: function() {
Ext.apply(this, {
tpl: '<tpl for=".">' +
'<div class="x-boundlist-item">' +
'<input type="checkbox" <tpl if="checked">checked="checked"</tpl>>{t
ext}' +
'</div>' +
'</tpl>',
displayTpl: '<tpl for=".">' +
'{[values.checked ? values.t
ext + "," : ""]}' +
'</tpl>'
});
this.callParent();
},
createPicker: function() {
var me = this,
picker = me.callParent(arguments);
picker.on({
itemclick: me.onItemClick,
beforeitemclick: me.onBeforeItemClick,
scope: me
});
return picker;
},
onItemClick: function() {
var me = this,
picker = me.picker,
valueField = picker.valueField,
displayField = picker.displayField,
selectedRecords = picker.getSelectionModel().getSelection(),
value = [],
display = [];
Ext.each(selectedRecords, function(rec) {
value.push(rec.get(valueField));
display.push(rec.get(displayField));
});
me.setValue(value);
me.setRawValue(display.join(', '));
},
onBeforeItemClick: function(view, record, item, index, e) {
var me = this,
checked = !record.get('checked');
record.set('checked', checked);
return false;
}
});
```
这个组件继承自
Ext.form.field.ComboBox，并添加了一些自定义的配置选项，如multiSelect、tpl和displayTpl。
在initComponent方法中，我们定义了一个自定义的模板，用于渲染下拉列表项。模板中包含一个复选框和一个文本标签，文本标签显示下拉列表项的文本。如果下拉列表项被选中，则复选框被选中。
在createPicker方法中，我们添加了一个itemclick事件处理程序，用于更新组件的值和显示文本。我们还添加了一个beforeitemclick事件处理程序，用于阻止默认的选择行为，并更新下拉列表项的选中状态。
使用时，您可以将这个组件添加到您的表单中，并设置数据源和其他必要的配置选项。例如：
```javascript
{
xtype: 'multiselectcombo',
fieldLabel: '选择项',
name: 'items',
store:
Ext.create('
Ext.data.Store', {
fields: ['value', 't
ext'],
data: [
{value: '1', t
ext: '选项1'},
{value: '2', t
ext: '选项2'},
{value: '3', t
ext: '选项3'},
{value: '4', t
ext: '选项4'},
{value: '5', t
ext: '选项5'}
]
})
}
```
这将创建一个下拉多选搜索框，其中包含5个选项，并将选中的值存储在名为“items”的表单字段中。
255
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
