Ext js 6.2 怎么实现 tagfield 选中一个选项时将另外两个选项也选中,删除其中一个选项将另外两个也删除,即三个选项需要被同时选中或删除
时间: 2024-03-22 22:42:33 浏览: 172
在 Ext JS 6.2 中,可以通过监听 tagfield 的 select 和 beforedeselect 事件来实现选中一个选项时将另外两个选项也选中,删除其中一个选项将另外两个也删除的功能。具体实现步骤如下:
1. 在 tagfield 的配置中添加监听 select 和 beforedeselect 事件的处理函数:
```javascript
{
xtype: 'tagfield',
fieldLabel: '选项',
displayField: 'name',
valueField: 'id',
store: optionStore,
listeners: {
select: 'onSelectOption',
beforedeselect: 'onDeselectOption'
}
}
```
2. 在控制器中定义 onSelectOption 和 onDeselectOption 函数:
```javascript
onSelectOption: function(tagfield, records) {
var optionIds = records.map(function(record) {
return record.get('id');
});
if (optionIds.indexOf(1) !== -1) {
tagfield.setValue([1, 2, 3]);
} else if (optionIds.indexOf(2) !== -1) {
tagfield.setValue([2, 3, 4]);
} else if (optionIds.indexOf(3) !== -1) {
tagfield.setValue([3, 4, 5]);
}
},
onDeselectOption: function(tagfield, record) {
var optionIds = tagfield.getValue();
if (optionIds.indexOf(1) === -1 || optionIds.indexOf(2) === -1 || optionIds.indexOf(3) === -1) {
tagfield.setValue([]);
}
}
```
3. 在 onSelectOption 函数中根据选中的选项设置 tagfield 的值,使得另外两个选项也被选中。在 onDeselectOption 函数中判断删除的选项是否是其中一个,如果是则将另外两个选项也删除。
以上代码仅供参考,具体实现还需要根据具体的业务需求进行调整。
阅读全文