Jul 30, 2015, 12:28 PM
Horizontal scrollbar problem
Hi all,
I have a problem with a scrollbar. The following page has a tabpanel and there is a tab called "tab to look at".. In this tabpanel there is a gridpanel which should have a horizontal scrollbar. Actually there is one at the really end of the gridpanel, but I want to have a horizontal scrollbar which is visible not just at the end. It should be visible when I click on that tab "tab to look at" like the vertical scrollbar. How can I do that?
Here is my code:
Marco
I have a problem with a scrollbar. The following page has a tabpanel and there is a tab called "tab to look at".. In this tabpanel there is a gridpanel which should have a horizontal scrollbar. Actually there is one at the really end of the gridpanel, but I want to have a horizontal scrollbar which is visible not just at the end. It should be visible when I click on that tab "tab to look at" like the vertical scrollbar. How can I do that?
Here is my code:
<%@ Page Title="" Language="C#" AutoEventWireup="true" CodeBehind="Example.aspx.cs" Inherits="WebApplication1.Example1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test</title>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<form runat="server">
<ext:ResourceManager ID="ExtResourceManager" runat="server" HideInDesign="true" />
<asp:ScriptManager ID="aspScriptManager" runat="server" EnableScriptLocalization="True">
<Scripts>
<asp:ScriptReference Path="~/Scripts/jquery-2.1.4.min.js" />
</Scripts>
</asp:ScriptManager>
<ext:Viewport ID="SiteLayout" runat="server" Layout="BorderLayout">
<Items>
<ext:Panel ID="NorthPanel" runat="server" Region="North" Height="30">
<Content>
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<asp:HyperLink runat="server" CssClass="site-title" NavigateUrl="~/Default.aspx" Text="Title" />
<asp:Label runat="server" ID="lblEnvironment" Text="Environment" />
</td>
</tr>
</table>
</Content>
</ext:Panel>
<ext:Panel ID="WestPanel" runat="server" Region="West" Collapsible="True" CollapseMode="Mini" HideCollapseTool="True" Split="True" Width="200" BodyCls="content-panel" Header="False" Layout="FitLayout">
<Content>
<ext:Container runat="server" AutoScroll="True" AutoDoLayout="True">
<Items>
<ext:Panel runat="server" MarginSpec="6 5 5 5" BodyPadding="5" Layout="Anchor">
<Content>
WestPanel
</Content>
</ext:Panel>
</Items>
</ext:Container>
</Content>
</ext:Panel>
<ext:Panel ID="CenterPanel" runat="server" Region="Center" BodyCls="content-panel" BodyStyle="padding:6px 5px 5px 5px;" Layout="FitLayout">
<Content>
<ext:Container runat="server">
<LayoutConfig>
<ext:HBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:Container runat="server" Width="360" Layout="VBoxLayout">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:FormPanel ID="FilterFormPanel" runat="server" Cls="filter-panel" BodyCls="filter-body">
<Items>
<ext:FieldContainer runat="server" AnchorHorizontal="100%" Layout="HBoxLayout">
<FieldDefaults LabelAlign="Top" />
<Items>
<ext:ComboBox runat="server" ID="cbo1" ForceSelection="True" ValueField="Id" DisplayField="Name" QueryMode="Local" Flex="1" FieldLabel="Year" >
<Store>
<ext:Store runat="server" ID="Store1">
<Model>
<ext:Model runat="server" IDProperty="Id">
<Fields>
<ext:ModelField Name="Id" />
<ext:ModelField Name="Name" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
</ext:ComboBox>
</Items>
</ext:FieldContainer>
<ext:FieldContainer runat="server" AnchorHorizontal="100%" Layout="HBoxLayout">
<Items>
<ext:DisplayField runat="server" Flex="1" Html=" " />
<ext:Button ID="btnSearch" runat="server" Icon="Magnifier" Flat="true" ToolTip="Search" />
</Items>
</ext:FieldContainer>
</Items>
</ext:FormPanel>
<ext:TreePanel ID="TreePanel1" ClientIDMode="Static" runat="server" RootVisible="False" Animate="False" AutoScroll="True" Flex="1" Cls="tree-panel">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Label runat="server" Cls="toolbar-title" Text="Overview" />
<ext:ToolbarFill />
<ext:Button runat="server" Icon="SectionCollapsed" ToolTip="Expand All">
<Listeners>
<Click Handler="#{WeiterverrechnungTreePanel}.expandAll();" />
</Listeners>
</ext:Button>
<ext:Button runat="server" Icon="SectionExpanded" ToolTip="Collapse All">
<Listeners>
<Click Handler="#{WeiterverrechnungTreePanel}.collapseAll();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Fields>
<ext:ModelField Name="FirstColumn" />
<ext:ModelField Name="Datum" />
<ext:ModelField Name="IstGesperrt" Type="Boolean" />
<ext:ModelField Name="Beschluss" />
</Fields>
<ColumnModel>
<Columns>
<ext:TreeColumn runat="server" DataIndex="FirstColumn" Width="200" Sortable="True" Text="Year" />
<ext:CheckColumn runat="server" DataIndex="IstGesperrt" Width="60" Sortable="True" Text="Locked" />
<ext:Column runat="server" DataIndex="Beschluss" Width="80" Sortable="True" Text="Hmm" />
</Columns>
</ColumnModel>
<View>
<ext:TreeView ID="TreeView1" runat="server" ToggleOnDblClick="false" />
</View>
<SelectionModel>
<ext:TreeSelectionModel ID="TreeSelectionModel1" runat="server" SingleSelect="true" />
</SelectionModel>
<Root>
<ext:Node Text="Root" Expanded="True" EmptyChildren="True" AutoDataBind="False">
<Children>
<ext:Node Text="Test"></ext:Node>
</Children>
</ext:Node>
</Root>
</ext:TreePanel>
</Items>
</ext:Container>
<ext:BoxSplitter runat="server" Collapsible="False" Cls="details-splitter" />
<ext:Container runat="server" ID="DetailsContainer" Flex="1" Layout="Fit">
<Content>
<ext:Container runat="server" AutoScroll="true">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Content>
<ext:Container runat="server" AutoScroll="True">
<Items>
<ext:Panel ID="HeaderContainer" runat="server" Border="False" Layout="Fit">
<Content>
Header
</Content>
</ext:Panel>
<ext:Panel runat="server" Border="False" BodyPaddingSummary="5" BodyStyle="border:0">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Label ID="lblTitle" runat="server" Cls="toolbar-title" Text="Title" />
<ext:ToolbarFill runat="server" />
</Items>
</ext:Toolbar>
</TopBar>
</ext:Panel>
<ext:TabPanel ID="TabPanel1" runat="server" Flex="1" Border="False" Layout="Fit" AutoShow="true">
<TabBar>
<ext:ToolbarFill runat="server" />
<ext:Button ID="btnCalculate" runat="server" Icon="Calculator" Text="Calculate" Disabled="false" />
</TabBar>
<Items>
<ext:Panel runat="server" ID="Tab1" Border="false" BodyPadding="5" Layout="Fit" Title="Tab 1" >
<Content>
Tab 1
</Content>
</ext:Panel>
<ext:Panel runat="server" ID="Tab2" Border="false" BodyPadding="5" Layout="Fit" Title="Tab 2" >
<Content>
Tab 2
</Content>
</ext:Panel>
<ext:Panel runat="server" ID="Tab3" Border="false" BodyPadding="5" Layout="Anchor" AutoScroll="True" Title="Tab to look at" >
<Content>
<ext:Container ID="Container1" runat="server">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:GridPanel ID="GridPanel1" runat="server" Layout="AnchorLayout" SortableColumns="True" MarginSpec="20 0 0 0" EnableColumnHide="False" EnableColumnMove="True" >
<Store>
<ext:Store ID="Store2" runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Column1" />
<ext:ModelField Name="Column2" />
<ext:ModelField Name="Column3" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" DataIndex="Column1" MinWidth="700" Flex="1" Header="Column 1" />
<ext:Column runat="server" DataIndex="Column2" MinWidth="700" Flex="1" Header="Column 2" />
<ext:Column runat="server" DataIndex="Column3" MinWidth="700" Flex="1" Header="Column 3" />
</Columns>
</ColumnModel>
</ext:GridPanel>
</Items>
</ext:Container>
</Content>
</ext:Panel>
</Items>
</ext:TabPanel>
</Items>
</ext:Container>
</Content>
</ext:Container>
</Content>
</ext:Container>
</Items>
</ext:Container>
</Content>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>public partial class Example1 : Page
{
protected void Page_Load(object sender, EventArgs e)
{
var test = new List<Data>();
for(int i=0; i < 100;i++)
{
test.Add(new Data { Column1 = "Test", Column2 = "Test", Column3 = "Test" });
}
Store2.DataSource = test;
Store2.DataBind();
}
private class Data
{
public string Column1 { get; set; }
public string Column2 { get; set; }
public string Column3 { get; set; }
}
}Marco
