高級選項卡面板嚮導

Question

我有一個相當先進的TabPanel我正在開發的嚮導，我似乎無法讓它正常運行。基本上，我有4個選項卡...每個選項卡都是自己的形式，因爲選項卡需要對其自身進行驗證，因此它可以確定是否需要禁用其右側的選項卡，或者是否應啓用下一個選項卡。

我遇到的主要問題是非呈現標籤認爲它是有效的，實際上，它的字段設置爲allowBlank: false，並且它有一個空值。然後是相反的，我設置了一個值，但它認爲它是無效的。

另一個怪癖是，我必須在調用面板加載時調用this.getViewModel().notify() ...否則，當我檢查初始有效性時，我激活的表單認爲它是無效的......儘管如此，我認爲這與綁定有關延遲，所以我現在可以處理這個。

我可以使用deferredRender: false來解決這個問題，但我不想，因爲在我的實際應用程序中，這些選項卡在每個選項卡上都有點不同，所以這不是很高效。

In my Fiddle，你會看到3個選項卡啓用，實際上，它應該已經啓用了4個選項卡，因爲第3個選項卡有來自其模型的數據，但該選項卡認爲它無效。由於該標籤認爲它是無效的，因此我重新啓動了我的checkValidity方法，因爲我檢查isValid是否爲false（這是爲了禁用右側的任何標籤，如果當前標籤變爲無效，並且用戶被迫繼續，這是設計）。在控制檯：

• TAB3認爲這是無效的，因爲它被設置爲 allowBlank這是不正確的：假的，但它綁定了一個值
• TAB4會認爲它是有效的，這是不正確的，因爲它設置爲allowBlank：false並且沒有值

有沒有人有任何見解？我是否在談論這個可怕的錯誤？

Answer 1

發生這種情況是因爲視圖模型和綁定不執行您認爲他們所做的事情。

第一 - 當你創建這樣一個領域：

{ fieldLabel: 'Value3', xtype: 'textfield', name: 'value2', allowBlank: false, 
    bind: { value: '{model1.value2}' } 
} 

領域是沒有價值最初創建。那是因爲你沒有定義任何價值 - 你已經限定了它。綁定不會立即生效。出於性能方面的原因，它通常不會被限制，直到呈現標籤（這就是爲什麼不推遲渲染工作爲什麼）

這最終結果是，當您檢查表3的有效性時，它失敗因爲尚未綁定的值。你可以看到這個更清楚，如果你改變線路24日誌聲明是這樣的：

console.log(form.owner.title, form.getValues(), form.owner.rendered, isValid) 

隨着這一變化，當你第一次呈現在標籤面板，你得到這個輸出（沒有評論）：

afterrender // triggers the view model to notify. 
activate 
checking 
tab1 Object {value: "blah"} true true // Value bound because it was rendered. 
tab2 Object {value: ""} false true 
tab3 Object {value2: ""} false false // Value not bound because it is not rendered 
checking 
tab4 Object {} false true // No properties yet... 

需要注意的是，如果你不叫this.getViewModel().notify()，那麼你會得到這樣的輸出：

afterrender 
activate 
checking 
tab2 Object {} false true 
tab3 Object {} false true 
tab4 Object {} false true 
tab1 Object {value: "blah"} true true 

注意不同的訂單。

那麼這裏發生了什麼？那麼，首先 - 選項卡上的單個表單沒有數據，直到字段值被綁定。沒有字段時，它們被認爲是有效的。

當您調用isValid時，它強制定義字段 - 但它們仍未綁定。所以他們沒有價值，而在tab3的情況下，這使得它無效。由於tab3無效（尚未綁定數據），因此未啓用選項卡4。

如果您不調用viewModel.notify()，那麼在第一次調用checkValidity()期間，它沒有數據約束的tab1。因此，它是無效的（它有字段，但沒有值），tab2等沒有啓用。

有效性最終都會被整理出來 - 但是您只能在從true變爲false時檢查狀態 - 不能爲false。這給出了你看到的行爲。

如何解決這個問題？可能有幾種方法。可能最有效的方法是在面板的initComponent期間從viewModel中獲取值，並在創建它們時將其明確分配給字段。這樣，它們最初以正確的狀態創建，並因此通過了有效性檢查。