[CLOSED] ToolbarSpacer fixed?

  1. #1

    [CLOSED] ToolbarSpacer fixed?

    To space out the buttons I did this:

    <ext:StatusBar ID="StatusBar1" runat="server" Flat="true" ClassicButtonStyle="true" Height="40"    >
                                <Items>
                                     <ext:Button ID="Button1" Icon="Add" runat="server" Text="Inserisci" >  
                                     </ext:Button>
                                      <ext:ToolbarSpacer Width="10"></ext:ToolbarSpacer>
                                     <ext:Button ID="Button2" Icon="ApplicationFormAdd" runat="server" Text="Duplica">
                                      </ext:Button>
                                      <ext:ToolbarSpacer Width="10"></ext:ToolbarSpacer>
                                    <ext:Button ID="Button3" Icon="ApplicationEdit" runat="server" Text="Modifica">
                                    </ext:Button>
                                   
                                        <ext:ToolbarSpacer Width="10"></ext:ToolbarSpacer>
    
                                     <ext:Button ID="Button4" Icon="Delete" runat="server" Text="Elimina">  
                                     </ext:Button>
                                </Items>
                            </ext:StatusBar>
    alternatives exist?
    I am forced to enter ToolbarSpacer?
    Can I set a spacer by default?
    For example, with margins not working
    <ext:Button ID="Button2" Icon="ApplicationFormAdd" Margins="10 10 10 10" runat="server" Text="Duplica" Visible="false">
    my problem is that if I make a button hide, spaces are wrong
    Last edited by Daniil; Oct 12, 2010 at 1:03 PM. Reason: Please use [code] tags, [CLOSED]
  2. #2
    Hi,

    Seems there is an issue with StatusBar.

    This code works fine with <ext:Toolbar>, but doesn't work with <ext:StatusBar>.
    We're investigating.

    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">
    <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:StatusBar  runat="server" ClassicButtonStyle="true">
            <LayoutConfig>
                <ext:HBoxLayoutConfig DefaultMargins="0 10 0 0"/>            
            </LayoutConfig>
            <Items>
                <ext:Button runat="server" Text="Button1" />
                <ext:Button runat="server" Text="Button2" />
                <ext:Button runat="server" Text="Button3" />
            </Items>
        </ext:StatusBar>
        </form>
    </body>
    </html>
  3. #3
    Hi,

    StatusBar doesn't use layout therefore Margins is not acceptable for StatusBar. Please use Toolbar instead StatusBar
    Vladimir Shcheglov
    Sr. Developer
  4. #4
    I used the status bar to get the right alignment.
    I can align with the toolbar buttons to the right?

    to start with the buttons are not visible as I do?

    This situation could exercise a bug
     <ext:Button ID="Button1" Icon="Add" runat="server" Text="Inserisci" Hidden="true"></ext:Button>
    by setting the hidden property to true the other buttons disappear

    
    <ext:Toolbar ID="StatusBar1"  runat="server" Flat="true" ClassicButtonStyle="true" Height="40">
        <LayoutConfig>             
            <ext:HBoxLayoutConfig DefaultMargins="0 10 0 0"/>                     
        </LayoutConfig> 
        <Items>
            <ext:Button ID="Button1" Icon="Add" runat="server" Text="Inserisci" Hidden="true"></ext:Button>                  
            <ext:Button ID="Button2" Icon="ApplicationFormAdd" runat="server" Text="Duplica"></ext:Button>
            <ext:Button ID="ButtonElimina" Icon="Delete" runat="server" Text="Elimina"></ext:Button>                       
            <ext:Button ID="ButtonModifica" Icon="ApplicationEdit" runat="server" Text="Modifica"></ext:Button>
            <ext:Button ID="ButtonSalva" Icon="Disk" runat="server" Text="Salva"></ext:Button>
        </Items>
    </ext:Toolbar>
  5. #5
    Hi,

    To get right align please set the Pack property to End.

    Example
    <ext:Toolbar runat="server" ClassicButtonStyle="true">
        <LayoutConfig>
            <ext:HBoxLayoutConfig DefaultMargins="0 10 0 0" Pack="End" />
        </LayoutConfig>
        <Items>
            <ext:Button ID="Button1" runat="server" Text="Button1" />
            <ext:Button ID="Button2" runat="server" Text="Button2" />
        </Items>
    </ext:Toolbar>
    We're investigating the issue with a hidden button. It appears when the DefaultMargins property is used.
    Here is a test case.

    Toolbar's hidden button issue
    <%@ 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>Toolbar's hidden button issue</title>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:DisplayField runat="server" Text="Toolbar without DefaultMargins" />
        <ext:Toolbar runat="server">
            <Items>
                <ext:Button runat="server" Text="Button1" />
                <ext:Button runat="server" Text="Button2" Hidden="true" />
            </Items>
        </ext:Toolbar>
        <ext:DisplayField runat="server" Text="Toolbar with DefaultMargins" />
        <ext:Toolbar runat="server">
            <LayoutConfig>
                <ext:HBoxLayoutConfig DefaultMargins="0 10 0 0" />
            </LayoutConfig>
            <Items>
                <ext:Button runat="server" Text="Button3" />
                <ext:Button runat="server" Text="Button4" Hidden="true" />
            </Items>
        </ext:Toolbar>
        </form>
    </body>
    </html>
  6. #6
    Hi,

    It seems that our previous suggestion (to use HBoxLayoutConfig for Toolbar) is not correct. LayoutConfig forces to use HBox layout but that layout doesn't support hidden items.

    Please set margins individually for buttons in the toolbar (as StyleSpec="margin-right:20px;" )
    <ext:Toolbar ID="StatusBar1"  runat="server">                
                    <Items>
                        <ext:Button ID="Button1" Icon="Add" runat="server" Text="Inserisci" StyleSpec="margin-right:20px;" Hidden="true"></ext:Button>                  
                        <ext:Button ID="Button2" Icon="ApplicationFormAdd" runat="server" Text="Duplica"></ext:Button>
                        <ext:Button ID="ButtonElimina" Icon="Delete" runat="server" Text="Elimina"></ext:Button>                       
                        <ext:Button ID="ButtonModifica" Icon="ApplicationEdit" runat="server" Text="Modifica"></ext:Button>
                        <ext:Button ID="ButtonSalva" Icon="Disk" runat="server" Text="Salva"></ext:Button>
                    </Items>
             </ext:Toolbar>
    Vladimir Shcheglov
    Sr. Developer
  7. #7
    ok and to align all the buttons to the right as I do?
  8. #8
    Hi,

    ok and to align all the buttons to the right as I do?
    Just add <ext:ToolbarFill /> to the Items before buttons which should be right aligned
    ToolbarFill is demonstraed in the following sample

    http://examples1.ext.net/#/Toolbar/Menu/Overview/
    Last edited by geoffrey.mcgill; Oct 11, 2010 at 3:46 PM.
    Vladimir Shcheglov
    Sr. Developer

Similar Threads

  1. [CLOSED] Some icons repeat - was fixed in 1.0
    By anup in forum 2.x Premium Help
    Replies: 2
    Last Post: May 27, 2012, 10:27 PM
  2. [CLOSED] Portlet Fixed Size
    By Zarzand in forum 1.x Premium Help
    Replies: 5
    Last Post: Jun 18, 2009, 5:11 PM
  3. [CLOSED] ToolbarSpacer
    By reinout.mechant@imprss.be in forum 1.x Help
    Replies: 4
    Last Post: May 08, 2009, 7:52 AM
  4. [CLOSED] ToolbarSpacer width
    By randy85253 in forum 1.x Premium Help
    Replies: 3
    Last Post: Jan 12, 2009, 5:34 AM
  5. Replies: 2
    Last Post: Jan 08, 2009, 4:56 AM

Posting Permissions