Jump to content


Photo

Basic layouts


  • Please log in to reply
10 replies to this topic

#1 mohammad

mohammad

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 657 posts
  • LocationKufur Kassem, Palestine

Posted 12 October 2017 - 04:06 PM

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

 

 


  • 3

#2 bbosnjak

bbosnjak

    Active Member

  • uniGUI Subscriber
  • PipPipPip
  • 52 posts

Posted 12 October 2017 - 04:15 PM

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
  • 2

#3 Eduardo Belo

Eduardo Belo

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 132 posts
  • LocationBrazil

Posted 12 October 2017 - 04:48 PM

Excellent.

 

Thank You.


  • 0

#4 rasaliad

rasaliad

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 104 posts
  • LocationRepublica Dominicana

Posted 12 October 2017 - 11:43 PM

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,


  • 0

#5 _Mehmet_

_Mehmet_

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 478 posts
  • LocationAntalya / Turkey

Posted 13 October 2017 - 06:48 AM

Thank you mohammad


  • 0

#6 Freeman35

Freeman35

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 146 posts

Posted 13 October 2017 - 12:05 PM

Thank you mohammad, so helpful


  • 0

#7 Beginner

Beginner

    Active Member

  • Members
  • PipPipPip
  • 50 posts

Posted 13 October 2017 - 02:23 PM

Big thanks


  • 0

#8 billyChou

billyChou

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 120 posts

Posted 13 October 2017 - 11:18 PM

Thank you mohammad


  • 0

#9 David Lee

David Lee

    Member

  • uniGUI Subscriber
  • PipPip
  • 39 posts

Posted 14 October 2017 - 07:13 AM

Excellent Mohammad !! 

really good job 


  • 0

#10 davor242

davor242

    Member

  • uniGUI Subscriber
  • PipPip
  • 30 posts
  • LocationSweden

Posted 16 October 2017 - 08:35 PM

Excellent work! Thank you very much.


  • 0

#11 rgreat

rgreat

    Active Member

  • uniGUI Subscriber
  • PipPipPip
  • 97 posts

Posted 17 October 2017 - 03:28 PM

Seems like we lose WYSIWYG concept here.

 

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

 

Farshad? :)


  • 0




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users