如何将组合框的长度设置为仅允许两个值之一

Question

我将组合框 minLength 设置为 5。我希望组合框要求长度为 5。如果它长于 5，我希望将 minLength 设置为 10。所以结果应该是：最小长度可以是 5 或 10，没有别的。（ComboBox 不接受长度小于 5 或大于 10 的输入，它也不接受等于 6、7、8 或 9 的长度）。

例如，这是我的代码：

  xtype: 'combobox', 
  minLength: 5,
  maxLength: 10,
  maskRe: /[0-9.-]/,
  validator: function(v) {
    //this only allows numbers and a hyphen to be entered into the combo box,
    //while also requiring 4 digits to be entered after the hyphen 
    //(only if a hyphen is present)
    return /^[0-9]*(-?[0-9]{4})?$/.test(v)? true : 'A Postal Code should only include a hyphen if there are four digits after the hyphen!';
  },

Answer 1

据我所知，没有 built-in 解决方案，但您可以做到。检查下面的代码和 this fiddle，这是针对 ExtJS 7.5 Classic Material，但它可能会被其他版本/工具包采用。

一些注意事项：

你必须设置一个store，即使它是空的，否则不会调用change监听器。（不知道是bug还是feature）
该解决方案使用 ViewModel 并将 minLength 绑定到此。您需要 setMinLength 和 setMaxLength 的原因是 ExtJS 不提供它，绑定需要 getter / setter。
重要提示：由于这不是 'official' 解决方案，因此无法保证它始终有效。

Ext.application({
    name: 'MyApp',
    launch: function () {
        Ext.create('Ext.form.Panel', {
            renderTo: Ext.getBody(),
            items: [{
                xtype: 'combo',
                minLength: 5,
                maxLength: 10,
                maskRe: /[0-9.-]/,
                viewModel: {
                    data: {
                        minLength: 5
                    }
                },
                store: [],
                bind: {
                    minLength: '{minLength}'
                },
                setMinLength: function (v) {
                    this.minLength = v;
                },
                getMinLength: function () {
                    return this.minLength;
                },
                validator: function (v) {
                    return /^[0-9]*(-?[0-9]{4})?$/.test(v) ? true : 'A Postal Code should only include a hyphen if there are four digits after the hyphen!';
                },
                listeners: {
                    change: function (combo, newValue, oldValue, eOpts) {
                        const newMinLength = newValue == null ? 5 : newValue.length >= 5 ? 10 : 5;
                        console.log('New min length will be: ' + newMinLength);
                        combo.getViewModel().set('minLength', newMinLength);
                    }
                }
            }]
        });
    }
});

如何将组合框的长度设置为仅允许两个值之一

How to set length of a combo box to only allow one of two values

extjs

extjs6