May 03, 2017, 5:57 PM
[CLOSED] Scrollbars are not showing up on panels
So I have a page with grid panels inside of tab panels and I cannot get the scrollbars to show up. Unfortunately when I strip everything out for an example to post, they show up and work fine. I just can't find the piece that causes them to stop showing up.
Since I can't reproduce the problem with a simple example I'm hoping you can guide me on what to look for when inspecting the elements with Chrome developer tools, try to find the cause.
Here is the basic structure of the page, and again, this example works fine, it's when I "wire everything back up" I lose the scrollbars. The "real" code has a master page, stylesheets, javascript, direct events etc. but this is the basic structure
Since I can't reproduce the problem with a simple example I'm hoping you can guide me on what to look for when inspecting the elements with Chrome developer tools, try to find the cause.
Here is the basic structure of the page, and again, this example works fine, it's when I "wire everything back up" I lose the scrollbars. The "real" code has a master page, stylesheets, javascript, direct events etc. but this is the basic structure
<ext:TabPanel runat="server"
ActiveIndex="0"
Header="true"
Border="false"
AutoScroll="true"
Layout="FitLayout">
<Items>
<ext:Panel ID="pnlModelHoldings" Title="Model Holdings" runat="server" Layout="FitLayout" AutoScroll="true" Border="false">
<DockedItems>
<ext:Toolbar Border="false" runat="server">
<Items>
<ext:TextField runat="server" ID="notifyOnExit" hidden="true"></ext:TextField>
<ext:Button ID="btnDonut" runat="server" Icon="ChartPie" ToolTip="Allocation Chart">
</ext:Button>
<ext:Label runat="server" Text="Weight:" StyleSpec="padding-top:2px"></ext:Label>
<ext:Label runat="server" ID="lblTotalWeight" Text="0.00%" StyleSpec="padding-top:2px"></ext:Label>
<ext:ToolbarSeparator runat="server" ></ext:ToolbarSeparator>
<ext:Label runat="server" ID="lblModelState" ></ext:Label>
<ext:ToolbarFill runat="server"></ext:ToolbarFill>
</Items>
</ext:Toolbar>
</DockedItems>
<Items>
<ext:GridPanel ID="grdModelHoldings" runat="server" Border="false" >
<HtmlBin>
<ext:XScript ID="XScript1" runat="server">
<script type="text/javascript">
function setConfirmText(msg, command, symbol) {
if (command == 'Delete') {
msg.message = 'Are you sure you want to delete the allocation for ' + symbol + '?';
return true;
}
return false;
}
</script>
</ext:XScript>
</HtmlBin>
<Store>
<ext:Store ID="StoreModelHoldings" runat="server">
<Model>
<ext:Model runat="server" Name="AllocationModel">
<Fields>
<ext:ModelField Name="ID"></ext:ModelField>
<ext:ModelField Name="Description"></ext:ModelField>
<ext:ModelField Name="Name"></ext:ModelField>
<ext:ModelField Name="Symbol"></ext:ModelField>
<ext:ModelField Name="DoNotBuy" Type="Boolean"></ext:ModelField>
<ext:ModelField Name="DoNotSell" Type="Boolean"></ext:ModelField>
<ext:ModelField Name="Allocation" Type="Float"></ext:ModelField>
<ext:ModelField Name="Shares" Type="Int"></ext:ModelField>
<ext:ModelField Name="Value" ></ext:ModelField>
<ext:ModelField Name="Price" type="Float"></ext:ModelField>
<ext:ModelField Name="IsValidMorningStar" Type="Boolean"></ext:ModelField>
<ext:ModelField Name="IsDirty" Type="Boolean"></ext:ModelField>
<ext:ModelField Name="IsNew" Type="Boolean"></ext:ModelField>
<ext:ModelField Name="Editable" Type="Boolean"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column ID="cmID" runat="server" DataIndex="ID" Hidden="true"></ext:Column>
<ext:Column runat="server" Flex="1" DataIndex="Description" Text="Description" ></ext:Column>
<ext:Column runat="server" DataIndex="Name" Text="Cusip"></ext:Column>
</Columns>
</ColumnModel>
</ext:GridPanel>
</Items>
</ext:Panel>
<ext:Panel ID="pnlAuditHistory" Border="false" Title="Audit/History" runat="server">
<Items>
<ext:GridPanel Border="false" Padding="5" runat="server" ID="grdAuditHistory">
<Store>
<ext:Store runat="server" ID="StoreAuditHistory">
<Fields>
<ext:ModelField Name="ID"></ext:ModelField>
<ext:ModelField Name="LastPublished"></ext:ModelField>
</Fields>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:DateColumn Flex="1" runat="server" text="Last Published" DataIndex="LastPublished" Format="M/d/yyyy h:mm:ss A" ></ext:DateColumn>
</Columns>
</ColumnModel>
</ext:GridPanel>
</Items>
</ext:Panel>
</Items>
</ext:TabPanel>
Last edited by fabricio.murta; May 04, 2017 at 8:44 PM.