Dec 30, 2018, 4:20 AM
[CLOSED] Treelist header alignment
Support,
check out this example. notice the header with the three lines and "Menu" title isnt properly centered in Micro mode. When in micro, i expect to ONLY see the three lines.
However, in the example, it tries to render the title also. Now change the Theme (in resource manager markup) to Triton and it works perfectly. Only triton works, all the others themes misalign it. Why? And can it be fixed?
dont forget to change the fonts awesome path if needed.
thanks,
/Z
check out this example. notice the header with the three lines and "Menu" title isnt properly centered in Micro mode. When in micro, i expect to ONLY see the three lines.
However, in the example, it tries to render the title also. Now change the Theme (in resource manager markup) to Triton and it works perfectly. Only triton works, all the others themes misalign it. Why? And can it be fixed?
dont forget to change the fonts awesome path if needed.
thanks,
/Z
<%@ Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" />
<style type="text/css">
.my-collapsible-panel .x-panel-header {
cursor: pointer;
}
.treelist-background {
background-color: #32404e;
}
/* START This is for the west menu tree nav so that it expands properly. limit this only to the tree nav so we put it here */
.x-layer{
width:unset !important;
}
.x-autocontainer-outerCt {
width: auto !important;
}
/* END This is for the west menu tree nav so that it expands properly. limit this only to the tree nav so we put it here */
</style>
<script type="text/javascript">
var menuExpanded = false;
var handleMicroToggle = function (me) {
var tl = App.LeftMenuLayout,
ct = tl.ownerCt;
if (menuExpanded) {
tl.setMicro(menuExpanded);
tl.macroWidth = 24 * 2;
ct.setWidth(24 * 2);
menuExpanded = false;
}
else {
tl.setMicro(menuExpanded);
tl.macroWidth = 200;
ct.setWidth(300);
menuExpanded = true;
}
}
</script>
<%
#region Set up font awesome if the current theme does not natively supports it.
var manager = Ext.Net.ResourceManager.GetInstance(HttpContext.Current);
var theme = manager.Theme;
if (theme != Ext.Net.Theme.Triton && theme != Ext.Net.Theme.Graphite)
{
%>
<link href="/ta/resources/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<style type="text/css">
/* wraps over the x-fa CSS class to match the reference from the Triton/Graphite themes */
.x-fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
<%
}
#endregion Set up font awesome if the current theme does not natively supports it.
%>
</head>
<body>
<form runat="server" onsubmit="return false;">
<ext:ResourceManager ID="ResourceManager1" runat="server" Theme="Neptune">
<Listeners>
</Listeners>
</ext:ResourceManager>
<ext:Viewport ID="ViewPortMain" runat="server" Layout="BorderLayout">
<Items>
<ext:Panel
runat="server"
Title="Menu"
ID="parentMenu"
IconCls="x-fa fa-navicon"
Region="West"
AutoScroll="true"
BodyCls="treelist-background"
Scrollable="Vertical"
Width="48"
HeightSpec="100%"
MinWidth="48"
MaxWidth="300">
<HeaderConfig>
<Listeners>
<Click Fn="handleMicroToggle" />
</Listeners>
</HeaderConfig>
<Items>
<ext:TreeList runat="server" ID="LeftMenuLayout" Micro="true" UIName="nav" Flex="1" HighlightPath="true" ExpanderOnly="false" ExpanderFirst="false">
<Store>
<ext:TreeStore ID="TreeStore1" runat="server">
<Listeners>
<Load Handler="handleMicroToggle(this);" />
</Listeners>
<Root>
<ext:Node Expanded="true" NodeID="MenuNodes">
<Children>
<ext:Node
runat="server"
Text="Test"
IconCls="x-fa fa-clock-o">
<Children>
<ext:Node
runat="server"
Text="Test1"
IconCls="x-fa fa-calendar-check-o"
Leaf="true">
</ext:Node>
<ext:Node
runat="server"
Text="Test2"
IconCls="x-fa fa-plane"
Leaf="true">
</ext:Node>
</Children>
</ext:Node>
</Children>
</ext:Node>
</Root>
</ext:TreeStore>
</Store>
</ext:TreeList>
</Items>
</ext:Panel>
<ext:Container
runat="server"
ID="bodypanel"
Region="Center"
Scrollable="Vertical"
AutoScroll="true">
<LayoutConfig>
<ext:HBoxLayoutConfig ReserveScrollbar="true" />
</LayoutConfig>
<Items>
<ext:Label runat="server" Html="TEST" />
</Items>
</ext:Container>
</Items>
</ext:Viewport>
</form>
</body>
</html>
Last edited by fabricio.murta; Jan 02, 2019 at 3:05 AM.