What's New?

[CLOSED] HBoxLayout not resizing according to window size

  1. #1
    Mar 18, 2011, 10:53 PM

    [CLOSED] HBoxLayout not resizing according to window size

    Hi,

    I just created one panel, textfield and buttons in a panel with flexRatio. While loading all controls are showing in the form, but if I resize page all controls are not resizing automatically to fit in the resizable form. If refresh the page then those are resizing according to flexratio and showing up. Instead of that I need those controls should resize automatically. The same approach in normal table design like each td having width in % of total width, so the table resizes according to form. Is there any properties needs to change in HBOXLayout to support this and also all controls are not aligning properly in vertical direction.

    
<%@ Page Language="VB" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
        'Button4.Hide()
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="resMngr" runat="server" />
    <ext:Panel runat="server" ID="pnlFlexRatio" Height="35" Layout="HBoxLayout" AnchorHorizontal="100%">
            <Defaults>
                <ext:Parameter Name="margins" Value="0 5 0 0" Mode="Value" />
            </Defaults>
            <LayoutConfig>
                <ext:HBoxLayoutConfig Padding="5" Align="Middle" />
            </LayoutConfig>
            <Items>
                <ext:Panel ID="pnlCount" runat="server" Flex="1" Width="20" Height="25"></ext:Panel>
                <ext:Button ID="Button2" runat="server" Text="Button 2" Flex="1" Height="20"/>
                <ext:TextField ID="Button3" runat="server" Text="Button 3" Flex="3" Height="25"/>
                <ext:Button ID="Button4" runat="server" Text="Button 4" Flex="1" Margins="0" Height="20"/>
            </Items>    
    </ext:Panel>
    </form>
</body>
</html>
    Last edited by Daniil; Apr 01, 2011 at 12:28 PM. Reason: [CLOSED]
  2. #2
    Mar 18, 2011, 11:39 PM
    Hi,

    Please set MonitorResize="true" for the panel (pnlFlexRatio)
  3. #3
    Mar 21, 2011, 1:38 PM

    HBoxLayout not resizing according to window size

    Hi Vladimir,

    Thank you, but in html table we can assign width percentage for TDs and we can place controls in side TD with 100% width of control. While resizing the form the table, td and controls inside will resize accordingly and if we hide any control the % of width of TD will show as blank. The same scenario I am trying with HBoxLayout, but if we hide any control like last control, the control before that will stretch up to end of the form. How to achieve that table layout functionality? Can we give width % to cells in table layout?


    Quote Originally Posted by Vladimir View Post
    Hi,

    Please set MonitorResize="true" for the panel (pnlFlexRatio)
  4. #4
    Mar 21, 2011, 3:48 PM
    Hi,

    I would suggest you to still use HBoxLayout and avoid TableLayout as much less weak.

    You could just wrap a Button in a Container.

    Example
    <%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        Button4.Hidden = true;
    }

    protected void Show(object sender, DirectEventArgs e)
    {
        Button4.Show();
    }

    protected void Hide(object sender, DirectEventArgs e)
    {
        Button4.Hide();
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.Net Example</title>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:Panel 
        runat="server" 
        Height="35" 
        Layout="HBoxLayout" 
        MonitorResize="true">
        <Defaults>
            <ext:Parameter Name="margins" Value="0 5 0 0" Mode="Value" />
        </Defaults>
        <LayoutConfig>
            <ext:HBoxLayoutConfig Padding="5" />
        </LayoutConfig>
        <Items>
            <ext:Panel 
                runat="server" 
                Width="20" 
                Height="25" />
            <ext:Button 
                runat="server" 
                Text="Button 2" 
                Height="20" 
                Flex="1" />
            <ext:TextField 
                runat="server" 
                Text="Button 3" 
                Height="25" 
                Flex="3" />
            <ext:Container 
                runat="server" 
                Margins="0" 
                Flex="1" 
                Height="20" 
                Layout="FitLayout">
                <Items>
                    <ext:Button 
                        ID="Button4" 
                        runat="server" 
                        Text="Button 4" />
                </Items>
            </ext:Container>
        </Items>
    </ext:Panel>
    <ext:Button runat="server" Text="Show" OnDirectClick="Show" />
    <ext:Button runat="server" Text="Hide" OnDirectClick="Hide" />
    </form>
</body>
</html>

Similar Threads

  1. Create Window in Desktop (component fail to re-size when window re-size)
    By AIM System Ltd in forum 2.x Help
    Replies: 2
    Last Post: Jul 26, 2012, 2:12 AM
  2. Window Size - Dynamically set size on full screen, etc.
    By Tbaseflug in forum 1.x Help
    Replies: 0
    Last Post: Feb 22, 2010, 12:24 PM
  3. Ensure Window size stays within browser size
    By nootn in forum 1.x Help
    Replies: 0
    Last Post: Dec 10, 2009, 6:54 PM
  4. resizing panel to 100% of Ext.Window
    By principal_X in forum 1.x Help
    Replies: 2
    Last Post: Jun 09, 2009, 3:30 PM
  5. Center ext:window on window resizing
    By matteo in forum Examples and Extras
    Replies: 1
    Last Post: Oct 02, 2008, 11:35 PM

Tags for this Thread

Posting Permissions