ExtJS has a very useful linking mechanism called flex. It works by summing all things in a row or in a column. Then the space is divided using the flexibility value divided by the sum of all the flexibility values. This results in an arrangement as shown below:
The red box is an hbox layout, blocks E and F have preset flexibility values that add up to 3, so E gets 1/3 of the screen width, and F gets 2 / 3rds.
The blue cell is another hbox layout where all 4 parts (AD) have the same fold, each of which gets 25% of the space.
What is not shown is the surrounding vbox layout where the blue box has a bend of 22 and the red box has a bend of 78.
Is there something like this layout in Angular? If this does not happen, how would you put this together in Angular?
Further information based on some answers below:
I want to replace extjs with Angular. For this, I need some functionality that I have in extjs, which I do not know exists in Angular. I found ways to see the size of the screen, resize it to resize the overall size of the display, but I have not yet seen a good example of a directive that essentially analyzes its composite directives for this flexibility value and sets their size based on the size of the change container event. Flex does not work from within the div, it works inside the divs container because it must cross all divs in the container in order to properly divide the space. I have not seen the angular directive that does this yet.
I don't have any development experience with angular yet (I watched a lot of videos from http://egghead.io , you read the documentation and tutorials, listened to this podcast: JSJ-Angular ) and therefore I don't know if this is easy to solve, or difficult decide, or if someone has already decided it. This flexible layout is viciously cool and easy to use, in fact for full-page applications, I'm not sure that there is an easier way to lay them out so that they remain on the whole screen and are obedient to changes in screen size. Mesh systems are great for some things, but they don’t take into account what is addressed to the flex system.
I am trying to figure out if there is a way to jump from extjs to angular without making my life difficult.
Additional Information Discovered:
It looks like flex is now becoming a CSS display: flex type display: flex or display: inline-flex (with prefixes for now)
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
Interesting to view the illustration is called the Holy Grail Layout example . Of course, IE will not implement it correctly or in a timely manner, but my clients do not mind using Chrome if it does its job.