PDA

View Full Version : [CLOSED] StatusBar Text



RCN
Feb 05, 2015, 11:09 PM
On the following example, StatusBar's text overlap its icon, as shown below:

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>

Dimitris
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.

RCN
Feb 06, 2015, 11:23 AM
Thank you Dimitris, please keep me posted.

Dimitris
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?21492-CLOSED-BottomBar-StatusBar-Icon-and-Text-not-arranged-properly

RCN
Feb 06, 2015, 11:56 AM
So, would you say that it's not a issue?

Dimitris
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>

RCN
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>

Dimitris
Feb 06, 2015, 4:17 PM
Sure. You've probably got a point since the icon's CSS will apply to all Accept icons :)

RCN
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>

RCN
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.

RCN
Feb 06, 2015, 4:43 PM
Sure. You've probably got a point since the icon's CSS will apply to all Accept icons :)

Yes i got it. I just expanded because another user could be misled to error.

Dimitris
Feb 09, 2015, 3:22 PM
Thank you Raphael.