mhmda Posted October 12, 2017 Share Posted October 12, 2017 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 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 Quote Link to comment Share on other sites More sharing options...
bbosnjak Posted October 12, 2017 Share Posted October 12, 2017 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 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 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 3 Quote Link to comment Share on other sites More sharing options...
belo Posted October 12, 2017 Share Posted October 12, 2017 Excellent. Thank You. Quote Link to comment Share on other sites More sharing options...
rasaliad Posted October 12, 2017 Share Posted October 12, 2017 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, Quote Link to comment Share on other sites More sharing options...
mehmet07 Posted October 13, 2017 Share Posted October 13, 2017 Thank you mohammad Quote Link to comment Share on other sites More sharing options...
Freeman35 Posted October 13, 2017 Share Posted October 13, 2017 Thank you mohammad, so helpful Quote Link to comment Share on other sites More sharing options...
Beginner Posted October 13, 2017 Share Posted October 13, 2017 Big thanks Quote Link to comment Share on other sites More sharing options...
billyChou Posted October 13, 2017 Share Posted October 13, 2017 Thank you mohammad Quote Link to comment Share on other sites More sharing options...
david600320@hotmail.com Posted October 14, 2017 Share Posted October 14, 2017 Excellent Mohammad !! really good job Quote Link to comment Share on other sites More sharing options...
davor242 Posted October 16, 2017 Share Posted October 16, 2017 Excellent work! Thank you very much. Quote Link to comment Share on other sites More sharing options...
rgreat Posted October 17, 2017 Share Posted October 17, 2017 Seems like we lose WYSIWYG concept here. Would be nice if result would be visible in design time. Farshad? Quote Link to comment Share on other sites More sharing options...
Abaksoft Posted October 21, 2017 Share Posted October 21, 2017 BRAVO Mohammad. You save us hours...hours...hours ! Much thx. Quote Link to comment Share on other sites More sharing options...
nickosl50 Posted October 22, 2017 Share Posted October 22, 2017 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 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 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 Quote Link to comment Share on other sites More sharing options...
Beginner Posted January 9, 2018 Share Posted January 9, 2018 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 Quote Link to comment Share on other sites More sharing options...
mhmda Posted January 9, 2018 Author Share Posted January 9, 2018 Please show us an image of what you want to achieve Or attach test case. Quote Link to comment Share on other sites More sharing options...
Beginner Posted January 9, 2018 Share Posted January 9, 2018 @mohammad http://dropmefiles.com/D5aHQ Quote Link to comment Share on other sites More sharing options...
mhmda Posted January 10, 2018 Author Share Posted January 10, 2018 hi Quote Link to comment Share on other sites More sharing options...
Beginner Posted January 10, 2018 Share Posted January 10, 2018 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 Quote Link to comment Share on other sites More sharing options...
mhmda Posted January 10, 2018 Author Share Posted January 10, 2018 I am writing a guide book for that, I will publish it in the forum when it is ready, stay tuned :-) 1 3 Quote Link to comment Share on other sites More sharing options...
ChenHaibin Posted January 26, 2018 Share Posted January 26, 2018 thank you Quote Link to comment Share on other sites More sharing options...
mausan Posted May 18, 2018 Share Posted May 18, 2018 Hi!, thanks for this. What about your Guide Book for Layouts handling? Still in progress ? Quote Link to comment Share on other sites More sharing options...
mhmda Posted November 4, 2019 Author Share Posted November 4, 2019 Hi, I have no time to continue this task, but I will in the future, I have commited to projects using Unigui :-) Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.