Jump to content
uniGUI Discussion Forums
mhmda

Basic layouts

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

Share this post


Link to post
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

Share this post


Link to post
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,

Share this post


Link to post
Share on other sites

Seems like we lose WYSIWYG concept here.

 

Would be nice if result would be visible in design time.

 

Farshad? :)

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Please show us an image of what you want to achieve Or attach test case.

Share this post


Link to post
Share on other sites

Now it works just fine, please consider this:

 

  • DO NOT USE 'Align' property at all leave it 'alNone'
  • Set 'Layout' = 'vbox' for Dashboardform
  • Set flex = 1 for the red panel

Project attached.

YAPS.rar

Share this post


Link to post
Share on other sites

Thank you for your effort

And where i can read about flex layot theme?

In unigui too many option about layot config for me :)

I don't know when use hhox or vbox or form,border , region etc

Share this post


Link to post
Share on other sites

I am writing a guide book for that, I will publish it in the forum when it is ready, stay tuned :-)

  • Upvote 3

Share this post


Link to post
Share on other sites

Hi!, thanks for this.

What about your Guide Book for Layouts handling? Still in progress ?

Share this post


Link to post
Share on other sites

×