高度なタブパネルウィザード

Question

私は先進的なTabPanelウィザードを持っており、正しく動作するようには見えません。基本的には4つのタブがあります。各タブは独自のフォームです。タブはそれ自体で検証を行う必要があるため、タブを右に無効にする必要があるかどうか、または次のタブを有効にする必要があるかどうかを判断できます。

私が取り組んでいる主な特徴は、レンダリングされていないタブは、実際にフィールドがallowBlank: falseに設定されているときに有効であると判断し、空の値を持つということです。それから私は値のセットを持っている逆がありますが、それは無効だと思います。

タブパネルの読み込み時にthis.getViewModel().notify()に電話する必要があります。そうでなければ、私の有効化されたフォームは、初期の有効性をチェックすると無効と判断します...しかし、これはバインディング遅れているので、私は今これを処理することができます。

この問題を解決するにはdeferredRender: falseを使用できますが、私の実際のアプリケーションでは、タブがそれぞれかなり進んでいるので、あまり効果がありません。

In my Fiddleの3つのタブが有効になっているはずですが、実際には有効な3つのタブが表示されます。タブは無効だと思うので、isValidがfalseであることをチェックするので、checkValidityメソッドを再起動します（これは、現在のタブが無効になり、ユーザーが続行を強制された場合は右側のタブを無効にします。設計）。コンソールで：

• TAB3は、それが allowBlankに設定されているため、真されていない、それは無効だと思っ：偽、それはTAB4があるため、真されていない、それが有効だと思います
• それにバインドされた値を持っていますallowBlank：falseに設定されていて、値がありません。

洞察力はありますか？私はこれについてひどく間違っていますか？

Answer 1

これは、ビューモデルとバインディングが自分の考えていることをしないために起こります。

最初に - あなたは、このようにフィールドを作成します。

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

フィールドが値なしで最初に作成されます。これはあなたが値を定義していないからです。そしてバインディングはすぐには影響を受けません。パフォーマンス上の理由から、タブがレンダリングされるまで通常はバインドされません（これはレンダリングの動作を延期しない理由です）

タブ3の有効性をチェックすると失敗しますその値はまだ縛られていないからです。

：あなたが最初のタブパネルをレンダリングする場合、この変更により

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

、あなたはこの出力（サンセリフのコメント）を取得する：あなたは、このようにライン24上のログステートメントを変更した場合より明確にこれを見ることができます

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などは有効ではありません。

妥当性は最終的にすべてソートされますが、真から偽に変化するときの状態をチェックするだけです。偽から真ではありません。それはあなたが見る行動を与えます。

これを修正するにはどうすればよいですか？おそらくいくつかの方法があります。おそらく最も効果的なのは、パネルのinitComponent中にviewModelから値を取得し、フィールドを作成するときに明示的にフィールドに割り当てることです。このようにして、これらは最初は正しい状態で作成され、したがって有効性検査に合格します。