如何在readOnly字段禁止焦点

我们有一个窗体，只有几个字段标记为只读。如何在readOnly字段禁止焦点

问题是用户能够使用鼠标或键盘选项卡来关注或导航到这些只读字段，并且我们想要禁止此操作。

不允许这样做的一种方法是将所有这些字段标记为“禁用”。但是，当标记为禁用时，尽管字段不能被聚焦，但是这些禁用的字段也不会被提交给服务器，这不是所期望的。

因此，我们如何才能防止重点只readOnly领域？

PS：在readOnly字段禁止焦点的原因是通过键盘提供更好的导航，以便通过使用Tab键用户导航或仅跳过可编辑的所有字段，并且所有readOnly字段都会被忽略。

来源

2012-07-31 netemp

将设置您要关注的字段的tabIndex帮助 – gunnx 2012-07-31 08:25:16

@gunnx：感谢Gunnx，实际上设置tabindex使事情具体和上下文，我们不幸有大约300个表单，并试图对这个问题有一个更一般的解决方案。对此有何想法？ – netemp 2012-07-31 08:30:15

请停止在标题中添加标签。无需在标题前加上ExtJS：或ExtJs 4.1：这就是标签的用途。 – meagar 2012-08-05 21:32:33

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

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

来源

2012-07-31 08:59:50 gunnx

是真的，我们只是试图这样做，但是如果下一个兄弟不存在，这就不幸停止工作，也就是说，如果该字段当前是屏幕中的最后一个，并且旁边有按钮。在这种情况下，焦点只会在该领域消失，不会离开它。我们还尝试了nextNode（），但是也得到了相同的结果。任何其他想法？感谢时间到目前为止。 – netemp 2012-07-31 09:02:56

您可以指定field.nextSibling（）的结果并测试是否为null。 var nextField = field.nextSibling（）; – gunnx 2012-07-31 09:09:34

是的..我们已经使用它，通过这个测试，我们可以确定下一个字段是否存在，并调用函数来相应地进行聚焦，但主要问题是如果我们有一个没有任何字段的禁用字段兄弟会，那么焦点就会说在该字段后面存在的按钮，但是在这种情况下，焦点停留在同一个字段而不是按钮上。 – netemp 2012-07-31 09:11:58

只是覆盖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' 
});

这应该可以做到。

来源

2012-07-31 18:00:17

如何在readOnly字段禁止焦点

回答

相关问题