Question

我们有一个标记为readOnly的字段很少的表单。

问题是用户可以使用鼠标或键盘选项卡聚焦或导航到这些readOnly字段，我们想要禁止这样做。

不允许这样做的一种方法是将所有这些字段标记为“已禁用”。但是当标记为禁用时，虽然字段无法聚焦，但是这些禁用的字段也不会被提交到服务器，这不是预期的。

因此，我们怎样才能阻止对readOnly字段的关注？

PS：禁止焦点在readOnly字段背后的原因是通过键盘提供更好的导航，因此通过使用tab键用户导航或跳过他可以编辑的那些字段，并忽略所有readOnly字段。

Answer 1

您可以将侦听器添加到侦听焦点事件的基本Field类中，如果该字段是readOnly则可以将焦点放在下一个组件上。

listeners: {
    focus: function(field)
    {                       
        if (field.readOnly)
        {
            field.nextSibling().focus();
        }
    }
}

Answer 2

只需覆盖getSubmitData方法并指定一些其他属性，让被覆盖的方法知道你想提交，不管（比如forceSubmit）：

Ext.define('My.form.Field', {
    override: 'Ext.form.field.Field',

    getSubmitData: function() {
        var me   = this,
            data = null;

        if ( me.disabled && me.readOnly && me.forceSubmit ) {
            data = {};
            data[me.getName()] = '' + me.getValue();
        }
        else {
            return me.callParent();
        }

        return data;
    }
});

然后你可以在你的代码中要求这个类，并设置你需要被禁用的字段，readOnly和forceSubmit：

my field = new Ext.form.field.Text({
    disabled:    true,
    readOnly:    true,
    forceSubmit: true,

    value: 'foo'
});

这应该可以解决问题。

如何在readOnly字段中禁止焦点

2 个答案: