Ext js 6.2 怎么实现 tagfield 选中一个选项时将另外两个选项也选中,删除其中一个选项将另外两个也删除,即三个选项需要被同时选中或删除
时间: 2024-03-25 14:39:22 浏览: 104
hookdeploy-ext:实现一个Liferay HookDeployer,它禁止两次重载同一JSP
您可以使用tagfield的`change`事件来实现这个功能。在`change`事件中,您可以获取已选中的选项,然后将它们设置为其他两个选项的值。
下面是一个示例代码:
```javascript
Ext.create('Ext.form.Panel', {
title: 'Tag Field Example',
renderTo: Ext.getBody(),
items: [{
xtype: 'tagfield',
fieldLabel: 'Choose a color',
store: ['Red', 'Green', 'Blue'],
listeners: {
change: function(field, value) {
// 获取已选中的选项
var selectedValues = field.getValue();
// 如果已选中了三个选项
if (selectedValues.length === 3) {
// 将其他两个选项设置为已选中
var otherValues = Ext.Array.difference(field.store.getRange(), selectedValues);
field.setValue(selectedValues.concat(otherValues));
}
// 如果删除了其中一个选项
if (selectedValues.length === 2) {
// 将其他两个选项也删除
var otherValues = Ext.Array.difference(field.store.getRange(), selectedValues);
field.setValue(otherValues);
}
}
}
}]
});
```
这段代码中,我们监听了`change`事件,并在事件中获取已选中的选项。如果已选中了三个选项,我们将其他两个选项也设置为已选中。如果删除了其中一个选项,我们就将其他两个选项也删除。注意,在获取其他两个选项时,我们使用了`Ext.Array.difference`方法获取差集。
阅读全文