ExtJS には、flex と呼ばれる非常に便利なレイアウト メカニズムがあります。行または列のすべてのものを合計することで機能します。次に、フレックス値をすべてのフレックス値の合計で割った値を使用して、スペースが分割されます。これにより、次のようなレイアウトになります。
赤いボックスは hbox レイアウトで、ブロック E と F には指定されたフレックス値があり、合計すると 3 になるため、E は画面の幅の 1/3 になり、F は 2/3 になります。
青いボックスは別の hbox レイアウトで、4 つのピース (AD) はすべて同じフレックスを持ち、それぞれが 25% のスペースを占めます。
表示されていないのは、青いボックスのフレックスが 22 で、赤いボックスのフレックスが 78 の周囲の vbox レイアウトです。
Angular でこの種のレイアウトのようなものはありますか? ない場合、これを Angular でどのようにまとめますか?
以下の回答のいくつかに基づく追加情報:
extjs を Angular に置き換えられるようにしたいです。そのためには、Angular に存在することを知らない extjs にあるいくつかの機能が必要です。画面サイズを監視し、変更して全体的な表示サイズを調整する方法を見つけましたが、このフレックス値の構成ディレクティブを本質的に内省し、サイズに基づいてサイズを設定するディレクティブの良い例をまだ見ていませんコンテナの変更イベント。Flex は div の内側からは機能しません。スペースを正しく分割するには、コンテナー内のすべての div を通過する必要があるため、div のコンテナー内で機能します。これを行う角度ディレクティブはまだ見たことがありません。
私はまだ Angular での実際の開発経験がありません ( http://egghead.ioから多くのビデオを見て、ドキュメントとチュートリアルを読んで、このポッドキャストを聞いた: JSJ-Angular ) 。これが解決しやすいものなのか、解決が難しいものなのか、または誰かがすでに解決したものなのかを知ってください。このフレックス レイアウトは非常にクールで使いやすいです。実際、フル ページ アプリの場合、フル スクリーンを維持し、画面サイズの変更に順応できるようにレイアウトする簡単な方法があるかどうかはわかりません。グリッド システムはいくつかの点で優れていますが、フレックス システムが対応しているものには対応していません。
私の人生を本当に難しくすることなく、extjsからAngularに飛躍する方法があるかどうかを確認しようとしています.
追加の発見情報:
flex は現在、CSS の形式display: flexまたはdisplay: inline-flex(現時点では接頭辞付きで)表示タイプになりつつあるようです。
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
イラストがそれを と呼んでいるのを見るのは興味深いHoly Grail Layout exampleです。もちろん、IE はそれを適切に実装したり、タイムリーに実装したりすることはありませんが、私の顧客は、Chrome で問題が解決するのであれば、Chrome を使用することを気にしません。