如何设置组合框的长度以仅允许两个值中的一个

fwzugrvs  于 2022-09-26  发布在  其他
关注(0)|答案(1)|浏览(106)

我将combobox的minLength设置为5。我希望combobox要求长度为5。如果长度大于5,我希望minLengton设置为10。因此结果应该是:最小长度可以是5或10,其他都可以。(组合框不接受长度小于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!';
  },
ny6fqffe

ny6fqffe1#

据我所知,没有内置的解决方案,但你可以做到。检查下面的代码和这个提琴,这是针对ExtJS7.5 Classic Material的,但它可能会被其他版本/工具包所采用。
一些注意事项:

  • 您必须设置store,即使它为空,否则将不会调用change侦听器。(我不知道这是一个bug还是一个特性。)
  • 该解决方案使用ViewModel并将minLength绑定到此。需要setMinLengthsetMaxLength的原因是ExtJS没有提供,绑定需要getter/setter。
    *重要:由于这不是一个“官方”解决方案,因此无法保证它始终有效。
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);
                    }
                }
            }]
        });
    }
});

相关问题