PDA

View Full Version : [CLOSED] Vertical Toolbar, Center Items



cwolcott
Oct 25, 2012, 5:24 PM
I have a vertical toolbar with items that have arrows and others that do not. How can I center the items (Refresh, Export buttons) in the toolbar?



<%@ 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>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<form id="form1" runat="server">
<div>
<ext:Panel ID="ChartPanel" runat="server" Title="Charts" Icon="ChartBar" Region="South"
Height="240" Split="true" Collapsible="true" Layout="BorderLayout">
<Items>
<ext:Panel runat="server" Region="Center" Layout="BorderLayout">
<DockedItems>
<ext:Toolbar runat="server" Dock="Left" Vertical="true">
<Items>
<ext:SplitButton runat="server" ToolTip="Charts" Icon="ChartLineAdd"
ArrowAlign="Right" MenuAlign="tl-tr">
<Menu>
<ext:Menu runat="server" Title="Chart Types" TitleAlign="Center">
<Items>
<ext:MenuItem ID="MenuItem1" runat="server" Text="Requests By Month" Icon="ChartLine" />
<ext:MenuItem ID="MenuItem2" runat="server" Text="Requests By Type" Icon="ChartBar" />
<ext:MenuItem ID="MenuItem3" runat="server" Text="Requests By Org" Icon="ChartBar" />
<ext:MenuItem ID="MenuItem4" runat="server" Text="Time to Process" Icon="ChartBar" />
</Items>
</ext:Menu>
</Menu>
</ext:SplitButton>
<ext:Button runat="server" ToolTip="Years" Icon="Calendar" ArrowAlign="Right"
MenuAlign="tl-tr">
<Menu>
<ext:Menu runat="server" Title="Request Years" TitleAlign="Center">
<Items>
<ext:CheckboxGroup ID="CheckboxGroup1" runat="server" ColumnsWidths="70,70" Vertical="true">
<Items>
<ext:Checkbox ID="Checkbox1" runat="server" BoxLabel="2012" StyleSpec="font-size: 11px;" />
<ext:Checkbox ID="Checkbox2" runat="server" BoxLabel="2011" Checked="true" StyleSpec="font-size: 11px;" />
<ext:Checkbox ID="Checkbox3" runat="server" BoxLabel="2010" StyleSpec="font-size: 11px;" />
<ext:Checkbox ID="Checkbox4" runat="server" BoxLabel="2009" StyleSpec="font-size: 11px;" />
<ext:Checkbox ID="Checkbox5" runat="server" BoxLabel="2008" StyleSpec="font-size: 11px;" />
<ext:Checkbox ID="Checkbox6" runat="server" BoxLabel="2007" StyleSpec="font-size: 11px;" />
<ext:Checkbox ID="Checkbox7" runat="server" BoxLabel="2006" StyleSpec="font-size: 11px;" />
<ext:Checkbox ID="Checkbox8" runat="server" BoxLabel="2005" StyleSpec="font-size: 11px;" />
<ext:Checkbox ID="Checkbox9" runat="server" BoxLabel="2004" StyleSpec="font-size: 11px;" />
<ext:Checkbox ID="Checkbox10" runat="server" BoxLabel="2003" StyleSpec="font-size: 11px;" />
</Items>
</ext:CheckboxGroup>
</Items>
</ext:Menu>
</Menu>
</ext:Button>
<ext:ToolbarFill runat="server" />
<ext:Button runat="server" Icon="ArrowRefresh" ToolTip="Refresh" />
<ext:Button runat="server" Icon="PageExcel" ToolTip="Export" />
</Items>
</ext:Toolbar>
</DockedItems>
<Items>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
</div>
</form>
</body>
</html>


4976

Daniil
Oct 26, 2012, 5:34 AM
Hi Chris,

I can suggest this way.

1. Setting this option for the Button.

Cls="center-icon"

2. A CSS class definition.

.center-icon .x-btn-icon {
margin-left: 5px;
}

cwolcott
Oct 26, 2012, 1:02 PM
Hi Chris,

I can suggest this way.

1. Setting this option for the Button.

Cls="center-icon"

2. A CSS class definition.

.center-icon .x-btn-icon {
margin-left: 5px;
}

Awesome. I had tried the following property with the buttons:


MarginSpec="0 0 0 5"


It centered it, but when the mouse hoovered over the button the border was also pushed over 5 pixels. With your solution everything looks great. Please close the thread.