如何在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字段禁止焦點

回答

相關問題