What's New?

[CLOSED] StatusBar Text

Page 1 of 2 12 LastLast
  1. #1
    Feb 05, 2015, 11:09 PM

    [CLOSED] StatusBar Text

    On the following example, StatusBar's text overlap its icon, as shown below:

    Click image for larger version.  Name: sb001.png  Views: 13  Size: 2.7 KB  ID: 20521

    <!DOCTYPE html>
<html>
<head id="Head1" runat="server">
</head>
<body>
    <ext:ResourceManager runat="server" ScriptMode="Debug" />
    <ext:GridPanel Title="Ext.Net" Width="500" Height="200" Border="true" runat="server">
        <ColumnModel runat="server">
            <Columns>
                <ext:Column Text="ID" DataIndex="ID" runat="server" />
                <ext:Column Text="Name" DataIndex="Name" runat="server" />
            </Columns>
        </ColumnModel>
        <BottomBar>
            <ext:StatusBar Text="Ext.Net" Icon="Accept" runat="server" />
        </BottomBar>
    </ext:GridPanel>
</body>
</html>
    Last edited by Dimitris; Feb 09, 2015 at 3:23 PM. Reason: [CLOSED]
  2. #2
    Feb 06, 2015, 11:14 AM
    Confirmed. Will take a look.

    --

    Setting the .x-toolbar-text-default padding properly quick fixes it:

        <style>
        .x-toolbar-text-default
        {
            padding: 0px 18px;
        }
    </style>
    The default value of 4px makes no room for the (optional) icon. A real solution will be to provide space for an icon, if any.
    Last edited by Dimitris; Feb 06, 2015 at 11:32 AM.
  3. #3
    Feb 06, 2015, 11:23 AM
    Thank you Dimitris, please keep me posted.
  4. #4
    Feb 06, 2015, 11:42 AM
    I just remembered the same thing happened with v.2 as well. Here is the related discussion:

    http://forums.ext.net/showthread.php...anged-properly
  5. #5
    Feb 06, 2015, 11:56 AM
    So, would you say that it's not a issue?
  6. #6
    Feb 06, 2015, 3:05 PM
    As far as I know, the icon CSS should be configured manually. Actually, it is better to configure the left padding in the icon's CSS. This way, the text is properly positioned whether there is an icon or not:

    CSS for the Accept icon

    <style>
    .icon-accept
    {
        padding-left: 25px;
    }
</style>
    StatusBar markup

    <BottomBar>
    <ext:StatusBar ID="StatusBar1" runat="server" Text="Ext.Net" Icon="Accept" />
</BottomBar>
  7. #7
    Feb 06, 2015, 3:48 PM
    In my opinion it's not correct to set icon-accept.

    I would use the following instead
    <!DOCTYPE html>
<html>
<head id="Head1" runat="server">
    <style>
        .statusBar .x-toolbar-text-default {
            padding-left: 25px;
        }
    </style>
</head>
<body>
    <ext:ResourceManager runat="server" ScriptMode="Debug" />
    <ext:GridPanel Title="Ext.Net" Width="500" Height="200" Border="true" runat="server">
        <ColumnModel runat="server">
            <Columns>
                <ext:Column Text="ID" DataIndex="ID" runat="server" />
                <ext:Column Text="Name" DataIndex="Name" runat="server" />
            </Columns>
        </ColumnModel>
        <BottomBar>
            <ext:StatusBar Cls="statusBar" Text="Ext.Net" Icon="Accept" runat="server"  />
        </BottomBar>
    </ext:GridPanel>
</body>
</html>
  8. #8
    Feb 06, 2015, 4:17 PM
    Sure. You've probably got a point since the icon's CSS will apply to all Accept icons :)
  9. #9
    Feb 06, 2015, 4:19 PM
    In addition, it's possible to overcome the issue presented above by doing the following:

    <ext:StatusBar Icon="Accept" Text="Ext.Net" runat="server">
    <Listeners>
        <AfterRender Handler="item.statusEl.addCls('x-status-busy-base')" />
    </Listeners>
</ext:StatusBar>
  10. #10
    Feb 06, 2015, 4:35 PM
    To whom it may concern, x-status-busy-base cls is applied to StatusBar's statusEl when a icon is set and the cls is removed when icon is set to empty.
    <!DOCTYPE html>
<html>
<head id="Head1" runat="server">
    <script type="text/javascript">
        var DocumentReady = function () {
            Ext.net.ResourceMgr.registerIcon("Accept");
        }

        var SetIcon = function () {
            App._sb.setIcon("icon-accept");
        }

        var ClearIcon = function () {
            App._sb.setIcon("");
        }
    </script>
</head>
<body>
    <ext:ResourceManager runat="server" ScriptMode="Debug">
        <Listeners>
            <DocumentReady Handler="DocumentReady()" />
        </Listeners>
    </ext:ResourceManager>
    <ext:GridPanel Title="Ext.Net" Width="500" Height="200" Border="true" runat="server">
        <ColumnModel runat="server">
            <Columns>
                <ext:Column Text="ID" DataIndex="ID" runat="server" />
                <ext:Column Text="Name" DataIndex="Name" runat="server" />
            </Columns>
        </ColumnModel>
        <Buttons>
            <ext:Button Text="Set Icon" runat="server">
                <Listeners>
                    <Click Handler="SetIcon()" />
                </Listeners>
            </ext:Button>
            <ext:Button Text="Clear Icon" runat="server">
                <Listeners>
                    <Click Handler="ClearIcon()" />
                </Listeners>
            </ext:Button>
        </Buttons>
        <BottomBar>
            <ext:StatusBar ID="_sb" Text="Ext.Net" runat="server" />
        </BottomBar>
    </ext:GridPanel>
</body>
</html>



    The following information is intended for informative purposes only.

    Since there is no limit to imagination, to foresee all possible scenarios:

    But if we replace ClearIcon function by the following, the x-status-busy-base cls is not removed from StatusBar's statusEl.

    var ClearIcon = function () {
    App._sb.setIcon("icon-none");
}
    it would be possible to overcome by doing the following:
    Ext.ux.statusbar.StatusBar.override({
    setIcon: function (cls) {
        if (cls == "icon-none") {
            cls = '';
        }
        this.callParent(arguments);
    }
});
    Thanks Dimitris, please mark this thread as closed.
    Last edited by RCN; Feb 06, 2015 at 7:12 PM.
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] BottomBar-StatusBar Icon and Text not arranged properly
    By CarpFisher in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Feb 06, 2015, 12:03 PM
  2. [CLOSED] Ext.ux.statusbar.StatusBar - tbFill issue
    By supera in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 08, 2013, 3:48 PM
  3. [CLOSED] How to display text on a GridPanel's StatusBar on the left hand side?
    By hgouw in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Nov 09, 2011, 4:58 AM
  4. [CLOSED] Multiline Text Problem in StatusBar
    By thedarklord in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 23, 2009, 4:13 PM
  5. [CLOSED] Change color of text in <ext:StatusBar
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 11
    Last Post: Nov 28, 2008, 7:16 AM

Posting Permissions