Rav Posted August 2, 2015 Share Posted August 2, 2015 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 Quote Link to comment Share on other sites More sharing options...
mhmda Posted August 16, 2015 Share Posted August 16, 2015 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 Quote Link to comment Share on other sites More sharing options...
sobakava Posted August 17, 2015 Share Posted August 17, 2015 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. Quote Link to comment Share on other sites More sharing options...
mhmda Posted August 17, 2015 Share Posted August 17, 2015 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. Quote Link to comment Share on other sites More sharing options...
sobakava Posted August 17, 2015 Share Posted August 17, 2015 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. 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.