forms - 如何在只读字段上禁止焦点

Question

我们有一个表单，其中很少有标记为只读的字段。

问题是用户能够使用鼠标或键盘选项卡聚焦或导航到这些只读字段，我们希望禁止这样做。

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

因此，我们如何防止对 readOnly 字段的关注？

PS：不允许关注只读字段的原因是为了通过键盘提供更好的导航，以便通过使用 Tab 键，用户只能导航或跳转他可以编辑的那些字段，并且所有只读字段都会被忽略。

Answer 1

您可以将侦听器添加到侦听焦点事件的基 Field 类，然后如果该字段是只读的以关注下一个组件。

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;
    }
});

然后你可以在你的代码中要求这个类，并设置你需要被禁用、只读和强制提交的字段：

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

    value: 'foo'
});

这应该够了吧。