Custom Layout Advice

[hamzafi]

Hi All,

I am currently required to have following

1) Viewport with a button somewhere
2) Button on click add panel to viewport filling out full dimensions of container
3) panel on render has all its components proportionally resize keeping in mind current size of panel (full viewport)
4) Button clicks again another panel should be added to the viewport horizontally adjacent to previous panel, Now both of these panels should occupy 50% space each with their inner components resizing accordingly
3) Button clicks 3rd time a third panel should be added with all occupying 33% space so on so forth


The above is for a max of 5 panels after which the 6th Panel should be added to a new row in the view port, the total panels this viewport can hold should be 10 maximum.

Please advise on how to do this preferably using Sencha Architect if possible?

[hamzafi]

anyone?

[scottmartin]

You could use vbox and hbox layouts to format as described. Each child would use flex to maintain aspect ratio.

Scott.

[hamzafi]

Hey thanks for the reply,

Just a clarification

if my viewport(container) is set to hbox then it only fills vertically, not horizontally, i need the child component upon render to take 100% x and y of the parent.

If 2 child components they take 50%x and 100%y if more than 5 child component they take 20%x and 50%y

y being the vertical and x the horizontal....

And yes i will maintain aspect ratio within my child component using flex.

Can you elaborate a bit more on how do i get the child component to completely fill the container

[scottmartin]

If the parent uses a layout of 'fit', the child will fill container.

Scott.