ナビゲーションにツリーを使用する Ext JS のアプリケーションに取り組んでいます。中央のペイン (ボーダー レイアウトを使用) では、カード ビューを使用します。ツリー上のノードを選択すると、表示されるカードが変わります。各カードには、まったく異なるコンポーネントが含まれている場合があります。
これまでのところ、これを行うのはそれほど難しくありません。しかし、ここで問題です。一部のカードは、特定の条件が満たされた場合にのみ表示されます。たとえば、ユーザーがアップロードされた CSV ファイルを表示できるカードがあります。このカードは、ユーザーがツリーの [View CSV file] ノードをクリックすると表示されます。ただし、ユーザーがまだ CSV ファイルをアップロードしておらず、そのノードをクリックした場合は、代わりにファイル アップロード フィールドを含むカードを表示して、ユーザーが CSV ファイルをアップロードできるようにしたいと考えています。
現在、コントローラーの初期化に次のものがあります。
this.control({
'nav-tree': {
select: {
fn: function(model, record, index){
record.handler();
},
scope: this
}
}
})
record.handler()
私のモデルで定義された関数で、モデルからプロパティ cardId を読み取り、レイアウトをその ID を持つカードに切り替えます (他にもいくつかのことを行います)。
CSV ファイルがアップロードされているかどうかを確認し、適切なカードをロードするために、ハンドラー関数に一連の if ステートメントをスローできることはわかっていますが、その方法には少なくとも 2 つの欠点があります。
(1) 非常に洗練されていない。(2) チェックしている条件がより複雑になり、if ステートメントが読みにくくなり、管理が難しくなる。
この問題に対して、Ext JS に適したより良い解決策があることを願っています。