Jump to content

Basic layouts


mhmda

Recommended Posts

I think that the most important think that you must understand in developing webapp using unigui (extjs) is the 'layouts', here a basic screen shots to give you an overview how to start with.

 

If I want that my mainform looks like this:

 

project from here: http://3msoft.net/mhmd/layouts_1.rar

 

0.png

 

I don't think that this is impossible or hard to achieve such design, if you look closely you could divide the dashboard to:

 

 

 

 

Keep in mind this:

if the parent layout is 'vbox' then for the children set width: '100%'
if the parent layout is 'hbox' then for the children set height: '100%'

flex: means the percent of width/height (depending in parent layout, if parent layout is 'vbox' then flex means height else means width
flex=1 it will take the entire width/height unless there is another child with flex value <> 0 
flex=1 for more than one child means all children will have the same percentage of width/height
flex=1 for two, means first one will take 50% and second will take 50%
flex=1 for three, means first,second, 3d will take 33% of with/height
flex=0 the width/height will be the same as in design view 

 

4.png

 

 

5.png

 

 

6.png

 

7.png

 

8.png

 

9.png

 

10.png

 

12.png

 

11.png

 

 

  • Upvote 4
Link to comment
Share on other sites

I think that the most important think that you must understand in developing webapp using unigui (extjs) is the 'layouts', here a basic screen shots to give you an overview how to start with.

 

If I want that my mainform looks like this:

 

project from here: http://3msoft.net/mhmd/layouts_1.rar

 

0.png

 

I don't think that this is impossible or hard to achieve such design, if you look closely you could divide the dashboard to:

 

 

 

 

Keep in mind this:

if the parent layout is 'vbox' then for the children set width: '100%'
if the parent layout is 'hbox' then for the children set height: '100%'

flex: means the percent of width/height (depending in parent layout, if parent layout is 'vbox' then flex means height else means width
flex=1 it will take the entire width/height unless there is another child with flex value <> 0 
flex=1 for more than one child means all children will have the same percentage of width/height
flex=1 for two, means first one will take 50% and second will take 50%
flex=1 for three, means first,second, 3d will take 33% of with/height
flex=0 the width/height will be the same as in design view 
4.png

 

 

5.png

 

 

6.png

 

7.png

 

8.png

 

9.png

 

10.png

 

12.png

 

11.png

This is super super super helpful! I love the concise summary and the detailed screenshots to illustrate each step and result.

 

Sent from my SM-P900 using Tapatalk

  • Upvote 3
Link to comment
Share on other sites

Well... I just want to say Thank you,  

 

Thanks for your help, there is a power behind the layout, to make beauty and flex GUI, but not all of us know about it, or how to use it. Your tutorials are very useful and appreciate. Thanks again.

 

Regards,

Link to comment
Share on other sites

I think that the most important think that you must understand in developing webapp using unigui (extjs) is the 'layouts', here a basic screen shots to give you an overview how to start with.

 

If I want that my mainform looks like this:

 

project from here: http://3msoft.net/mhmd/layouts_1.rar

 

0.png

 

I don't think that this is impossible or hard to achieve such design, if you look closely you could divide the dashboard to:

 

 

 

 

Keep in mind this:

if the parent layout is 'vbox' then for the children set width: '100%'
if the parent layout is 'hbox' then for the children set height: '100%'

flex: means the percent of width/height (depending in parent layout, if parent layout is 'vbox' then flex means height else means width
flex=1 it will take the entire width/height unless there is another child with flex value <> 0 
flex=1 for more than one child means all children will have the same percentage of width/height
flex=1 for two, means first one will take 50% and second will take 50%
flex=1 for three, means first,second, 3d will take 33% of with/height
flex=0 the width/height will be the same as in design view 

4.png

 

 

5.png

 

 

6.png

 

7.png

 

8.png

 

9.png

 

10.png

 

12.png

 

11.png

 

Thank you very much for your excellent post.

 

I wonder if I had 3  uniedit components  layed horizontally next to each  other inside  a panel how could I arrange them in terms of layout config in order to appear vertically when the width of the browser gets smaller.

 

 

Thank you very much.

 

Nick Lazidis

Link to comment
Share on other sites

  • 2 months later...

Hi everybody,

mohammad

Can you help me how design right?

 

I have MainForm, Frame_child

 

Mainform layot = hbox

 

in main form have 3 panel

 

1 panel layot = vbox and width =100%  (for the top)

2 panel layot = absolute and height = 100% (left sidebar)

3 panel layot = absolute and hight =100% and flex =1 (center)

 

 

Frame layot = hbox

in frame 2 panel

1 panel layot = vbox and width =100%

2 panel layot = absolute and heigh = 100%

 

But in MainForm not properly show  Frame_child in  panel 3

Link to comment
Share on other sites

  • 3 weeks later...
  • 3 months later...
  • 1 year later...

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...