What's New?

[CLOSED] Placing controls in the middle of Toolbar container

  1. #1
    Jan 06, 2013, 3:55 AM

    [CLOSED] Placing controls in the middle of Toolbar container

    Hi,

    Please suggest a proper layout to ensure that controls are positioned in the center of the Toolbar container. I'd like to make sure that irrespective of the width of the panel, the toolbar controls are always placed in the middle as a group. Something similar to the text-align:center; styling for the Toolbar.
    Last edited by Daniil; Jan 07, 2013 at 12:59 PM. Reason: [CLOSED]
  2. #2
    Jan 07, 2013, 8:33 AM
    Hi Vadym,

    What about HBoxLayout?

    Example
    <ext:Toolbar runat="server">
    <LayoutConfig>
        <ext:HBoxLayoutConfig Pack="Center"/>
    </LayoutConfig>
    <Items>
        <ext:Button runat="server" Text="Button 1" />
        <ext:Button runat="server" Text="Button 2" />
    </Items>
</ext:Toolbar>
    P.S. Happy New Year!:)
  3. #3
    Jan 07, 2013, 11:54 AM
    Hi Daniil,

    Happy New Year to you, too!:)
    Thanks for the suggestion! I guess I have to examine the structure and contents of some of my div elements on the page since LayoutConfig causes a few client side errors. Below's a (heavily) stripped down code snippet that works well producing the centered layout.

    Update: I figured it out. I can't have a ToolbarFill control among the Toolbar items with the centered layout, which obviously makes sense. Please mark this thread as closed.

    <%@ 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">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <ext:ResourceManager ID="ResourceManager1" runat="server" DirectMethodNamespace="X" />
    <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
    <ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Style" />
</head>
<body>
    <form runat="server">
    <ext:Panel runat="server" Layout="FormLayout" Width="900" Height="795">
        <TopBar>
            <ext:Toolbar ID="Toolbar2" runat="server">
                <Items>
					<ext:Button runat="server" Text="Button 0"></ext:Button>					
                </Items>
            </ext:Toolbar>
        </TopBar>
        <Items>
            <ext:ColumnLayout ID="ColumnLayout1" runat="server" Split="false" FitHeight="true">
                <Columns>
                    <ext:LayoutColumn ColumnWidth="0.65">
                        <ext:Panel runat="server" ID="Panel1" Border="true" Frame="false" Layout="BorderLayout">
                            <Content>
                                <ext:Panel runat="server" ID="Panel2" Border="false" Frame="false" Layout="FitLayout" Region="Center">
                                    <Content>
                                        <div id="div1"></div>
                                    </Content>
                                    <BottomBar>
                                        <ext:Toolbar ID="Toolbar1" runat="server">
                                            <LayoutConfig>
                                                <ext:HBoxLayoutConfig Pack="Center" />
                                            </LayoutConfig>
                                            <Items>
												<ext:Button runat="server" Text="Button 1" />
												<ext:Button runat="server" Text="Button 2" />
                                            </Items>
                                        </ext:Toolbar>
                                    </BottomBar>
                                </ext:Panel>
                                <ext:Panel runat="server" Border="false" Frame="false" Layout="FitLayout" Region="South">
                                    <Content>
                                        <div id="div2"></div>
                                    </Content>
                                </ext:Panel>
                            </Content>
                        </ext:Panel>
                    </ext:LayoutColumn>
                    <ext:LayoutColumn ColumnWidth="0.35">
                        <ext:Panel ID="Panel3" runat="server" Title="Some options" Border="true" Frame="false" Layout="FitLayout">
                            <Content>
                                <div id="div3"></div>
                            </Content>
                        </ext:Panel>
                    </ext:LayoutColumn>
                </Columns>
            </ext:ColumnLayout>
        </Items>
    </ext:Panel>
    </form>
    <ext:Window ID="Window1" runat="server" Title="Some Error" Icon="Error"
        Height="185px" Resizable="false" Width="350px" BodyStyle="background-color: #fff;"
        Padding="5" Hidden="true" Closable="false" Draggable="false" Modal="true">
        <Content>
            Error!
        </Content>
        <BottomBar>
            <ext:StatusBar runat="server">
                <Items>
                    <ext:ToolbarFill>
                    </ext:ToolbarFill>
                    <ext:Button runat="server" Text="Refresh"></ext:Button>
                </Items>
            </ext:StatusBar>
        </BottomBar>
    </ext:Window>
</body>
</html>
    Last edited by vadym.f; Jan 07, 2013 at 12:05 PM.
  4. #4
    Jan 07, 2013, 12:59 PM
    Yes, ToolbarFill makes sense with only the default ToolbarLayout.

    In the context of the HBoxLayout a ToolbarFill can be replaced with a BoxComponent with Flex="1".
  5. #5
    Jan 08, 2013, 2:50 PM
    Quote Originally Posted by Daniil View Post
    Yes, ToolbarFill makes sense with only the default ToolbarLayout.

    In the context of the HBoxLayout a ToolbarFill can be replaced with a BoxComponent with Flex="1".
    Hi Daniil,

    Could you advise how to use the BoxComponent with Pack="Center" if I want my last button to sit at the right end of the toolbar? Somehow, it ends up at the beginning.

    <ext:BoxComponent runat="server" Flex="1"></ext:BoxComponent>
<ext:Button ID="Button1" runat="server" Icon="Accept" Width="24" ></ext:Button>
  6. #6
    Jan 08, 2013, 2:57 PM
    Seems Pack="Center" doesn't work well in that case.

    What about this?

    Example
    <ext:Toolbar runat="server" Layout="HBoxLayout">
    <Items>
        <ext:BoxComponent runat="server" Flex="1" />
        <ext:Button runat="server" Text="Button 1" />
        <ext:BoxComponent runat="server" Flex="1" />
        <ext:Button runat="server" Text="Button 2" />
    </Items>
</ext:Toolbar>
  7. #7
    Jan 08, 2013, 3:09 PM
    Sorry, I couldn't follow. Here's my toolbar setup:

    <ext:Toolbar ID="Toolbar1" runat="server">
<LayoutConfig>
        <ext:HBoxLayoutConfig Pack="Center" />
</LayoutConfig>
<Items>
<ext:Button ID="Button1" runat="server"></ext:Button>
<ext:Button ID="Button2" runat="server"></ext:Button>
<ext:Button ID="Button3" runat="server"></ext:Button>
</Items>
</ext:Toolbar>
    Where should I place the BoxComponent such that Button1 and Button2 stay in the middle and Button3 is at the right end of the Toolbar?
  8. #8
    Jan 08, 2013, 3:15 PM
    Here you are.

    Example
    <ext:Toolbar runat="server" Layout="HBoxLayout">
    <Items>
        <ext:BoxComponent runat="server" Flex="1" />
        <ext:Button runat="server" Text="Button 1" />
        <ext:Button runat="server" Text="Button 2" />
        <ext:BoxComponent runat="server" Flex="1" />
        <ext:Button runat="server" Text="Button 3" />
    </Items>
</ext:Toolbar>
  9. #9
    Jan 08, 2013, 3:21 PM
    Awesome! That works and I don't even need ext:HBoxLayoutConfig anymore. Thanks Daniil!
  10. #10
    Jan 08, 2013, 3:24 PM
    Glad to help!

    Quote Originally Posted by vadym.f View Post
    I don't even need ext:HBoxLayoutConfig anymore.
    But you do need Layout="HBoxLayout" instead:)

Similar Threads

  1. [CLOSED] [#111] How to filter combo box data using the text that exists in the middle
    By sailendra in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: Mar 14, 2013, 11:55 AM
  2. [CLOSED] [2.0] Dynamically Removing controls from a Container
    By FVNoel in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 13, 2012, 2:28 PM
  3. [CLOSED] Can't iterate through an EXT.CONTAINER in DirectEvent to get dynamic controls
    By dmoore in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 22, 2011, 4:33 PM
  4. [CLOSED] Problem placing Custom control on Top bar of Panel
    By sriram in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Nov 14, 2010, 12:57 AM
  5. Placing checkbox in the dropdown List
    By n_s_adhikari@rediffmail.com in forum 1.x Help
    Replies: 1
    Last Post: Apr 24, 2010, 7:39 PM

Tags for this Thread

Posting Permissions