Apr 24, 2020, 5:27 PM
[CLOSED] Item in toolbar is misaligned on first load using EXT 5
The checkbox in the image above is misaligned when you first open the page in Chrome. If you resize the window it immediately corrects its alignment to be even (vertically) with its neighbors.
This does not happen in our old EXT 2.5.3 version and doesn't happen in Edge either. It seems that the toolbar control throws away any explicit margin or padding specs?
Below is the markup for this page, the offending control is in the lower half, "ckisall" checkbox.
Thanks...
<ext:Panel runat="server" AutoScroll="true" Layout="FitLayout" Border="false">
<TopBar>
<ext:Toolbar runat="server" Padding="10">
<Items>
<ext:Hidden ID="idCustNo" Text="" runat="server" />
<ext:Label runat="server" Text="From:"></ext:Label>
<ext:ToolbarSpacer runat="server"></ext:ToolbarSpacer>
<ext:DateField runat="server" ID="idFromDate" Text="From" />
<ext:ToolbarSpacer runat="server"></ext:ToolbarSpacer>
<ext:Label runat="server" Text="To:"></ext:Label>
<ext:ToolbarSpacer runat="server"></ext:ToolbarSpacer>
<ext:DateField runat="server" ID="idToDate" />
<ext:ToolbarSpacer runat="server"></ext:ToolbarSpacer>
<ext:Label runat="server" Text="Customer:"></ext:Label>
<ext:ToolbarSpacer runat="server"></ext:ToolbarSpacer>
<ext:TextField ID="txtCustomer" ReadOnly="true" runat="server" Width="275"></ext:TextField>
<ext:ToolbarSpacer runat="server"></ext:ToolbarSpacer>
<ext:Button ID="btnFindCustomer" runat="server" AnchorHorizontal="100%" MarginSpec="10 0 0 0" Icon="Find"></ext:Button>
<ext:ToolbarSpacer runat="server"></ext:ToolbarSpacer>
<ext:DropDownField
ID="q_ddAssembly"
Mode="ValueText"
runat="server" MarginSpec="8 0 0 8"
Editable="false" Width="275"
EnableKeyEvents="true" EmptyText="Select an assembly">
<Listeners>
<Expand Handler="this.picker.setWidth(500);" />
<SpecialKey Handler="if (e.getKey() == e.ENTER) {e.stopEvent();}"></SpecialKey>
</Listeners>
<Component>
<ext:GridPanel
ID="q_gridPartLookup"
runat="server" ForceFit="true" Height="300" Width="500"
StoreID="PartLookup"
Title="Assembly Lookup" EmptyText="No record found">
<Plugins>
<ext:FilterHeader Remote="true" runat="server" />
</Plugins>
<View>
<ext:GridView runat="server" LoadMask="true" EnableTextSelection="true" TrackOver="false" />
</View>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Part No" Width="120" DataIndex="partNo" />
<ext:Column runat="server" Text="Revision" Width="40" DataIndex="revision" />
<ext:Column runat="server" Text="Description" Width="200" DataIndex="description" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel Mode="Single" PruneRemoved="false" runat="server" />
</SelectionModel>
</ext:GridPanel>
</Component>
</ext:DropDownField>
<ext:ToolbarSpacer runat="server"></ext:ToolbarSpacer>
<ext:Checkbox runat="server" Checked="false" BoxLabel="Is All" ID="chkisall"></ext:Checkbox>
<ext:ToolbarSpacer runat="server"></ext:ToolbarSpacer>
<ext:Label runat="server" Text="-OR-" StyleSpec="font-weight:bold"></ext:Label>
<ext:ToolbarSpacer runat="server"></ext:ToolbarSpacer>
<ext:Label runat="server" Text="Work Order:"></ext:Label>
<ext:TextField runat="server" ID="idWono" Width="175" />
<ext:ToolbarSpacer runat="server"></ext:ToolbarSpacer>
<ext:Button ID="btnClearInputs" runat="server" Text="Clear Inputs" Icon="Cancel"></ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:UserControlLoader Border="true" runat="server" Path="controls/departmentMovers.ascx" />
</Items>
</ext:Panel>
Last edited by fabricio.murta; Apr 27, 2020 at 7:26 PM.