Autoresize panels

[Rav]

Hello,

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?

 

Ravil

[mhmda]

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', {
      border:false,
      width:w,
      height:h,
      layout: { type: 'hbox',align : 'stretch'},
      items:first_panels
  });
  
  
  UniForm1.form.add(first_container);
  UniForm1.form.doLayout();
}

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

[sobakava]

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.

[mhmda]

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.

[sobakava]

I'm using licensed Unigui. 0.99.50.1192_Beta

ExtJS Version 4.2.2.1144

Delphi XE8

 

 

Here is what you can do to replicate this:

 

Open and run the demo.

Chrome : http://127.0.0.1:8011

 

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.