Jump to content

Autoresize panels


Recommended Posts


I have one container panel which is the parent of three panels with two splitters between them (image is attached). I want that width of all the internal panels to be the same whenever the container panel is resized. How to do it properly? First I thought that it should be handled in the main form's "onresize" event, but it is called before its width is changed ("onresizing" is more appropriate name for this event). Also the container panel can change its width without the main form is resized but it doesn't have the "onresize" event. And the last question: can this autoresizing be done without server intervention, on the client side only?




Link to comment
Share on other sites

  • 2 weeks later...

You need to implement the 'layout' property for the container (hbox) and set the 'flex' property for the three panels.


But we have to wait until Farshad implement this in Desktop applications (in mobile- unitouch it's exists).


You can see this post: http://forums.unigui.com/index.php?/topic/5437-panel-layout-property-and-flex-property/?hl=flex


For now you may use extra js code in client side to achieve what you want, here an example for your case:

function window.afterrender(sender, eOpts)
  Ext.apply(UniForm1.UniPanel1, {flex:1});
  Ext.apply(UniForm1.UniPanel2, {flex:1}); 
  Ext.apply(UniForm1.UniPanel3, {flex:1});
  var w=$(window).width();
  var h=$(window).height();  
  var first_panels  = UniForm1.containerxxx.removeAll(false);

  var first_container = Ext.create('Ext.panel.Panel', {
      layout: { type: 'hbox',align : 'stretch'},

It's working great but you need extra code...I hope Farshad will implement this soon :-)


You can download attached project http://3msoft.net/mhmd/Layout_Flex.rar.


I hope this will help you

Link to comment
Share on other sites

Hello mohammad,


Thank you for sharing this.


I'm not sure about the intention of the demo project you have uploaded but when I run it, I get this:







Left and right panels are invisible and when I scroll the page with scrollbars of Chrome, it looks like this.


I'm still looking for a solution to implement that works exactly like HTML tables with specified absolute or relative widths to arrange my controls.

Link to comment
Share on other sites

Which extjs ver. you use and which unigui ver.??


The idea here is:


1. Remove all child panels from parent and save them in an array of objects. 

2. Set flex property for every child (panel) as you wish.

3. Create a new parent panel with specific 'layout' property (because you can't change 'layout' dynamically at run time of existing control -  parent).

4. Attach the child panels which been saved in array to the new parent.

5. Add the new parent to the form.

6. Refresh the form to display the new components.


* The case become more complicated when you have nested panels.

Link to comment
Share on other sites

I'm using licensed Unigui.

ExtJS Version

Delphi XE8



Here is what you can do to replicate this:


Open and run the demo.

Chrome :


It starts with a pop up saying "736" , then Click on Unibutton1,  and the picture above appears.

At first, Toolbar and Center panel fills whole browser client area.


Shrink the browser window size (Using the mouse. Not using Maximize icon or double clicking to the toolbar) and scroll bars start to appear. Scroll the page and in my case, the panels does not resize.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...