Sep 06, 2011, 9:37 PM
[CLOSED] Scrolling issues
Hi,
Just wondering what the easiest layout and configuration to enable scrolling in a panel. I have the configuration below but if you resize the browser it does not revel any scroll bar at all even though autoscroll is set to true. I want the content of the west tabs, the center tabs and the south panels to be scrollable when the window is resized but that is not happening with the code below. What is the problem with the configuration.
Just wondering what the easiest layout and configuration to enable scrolling in a panel. I have the configuration below but if you resize the browser it does not revel any scroll bar at all even though autoscroll is set to true. I want the content of the west tabs, the center tabs and the south panels to be scrollable when the window is resized but that is not happening with the code below. What is the problem with the configuration.
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.Store.Primary;
store.DataSource = new object[]
{
new object[] {"A", "test121", "test131"},
new object[] {"A", "test422", "test132"},
new object[] {"A", "test123", "test133"},
new object[] {"B", "test421", "test231"},
new object[] {"B", "test222", "test232"},
new object[] {"B", "test223", "test233"},
new object[] {"C", "test321", "test331"},
new object[] {"C", "test922", "test332"},
new object[] {"C", "test323", "test333"}
};
store.DataBind();
}
}
</script> <!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 id="Head1" runat="server">
<title>Ext.Net Example</title>
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="ScriptFiles" />
<script src="../../Scripts/Test.js" type="text/javascript"></script>
</head><body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Viewport ID="Viewport1" runat="server" Layout="Border" AutoScroll="true">
<Items>
<ext:Panel runat="server" Region="Center" Layout="Border" LabelAlign="Top" AutoScroll="true">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button ID="btnApplyObjectpermissions" runat="server" Text="Apply"
AnchorHorizontal="100%" Disabled="True">
</ext:Button>
<ext:ToolbarSeparator />
<ext:Button ID="btnResetObjectpermissions" runat="server" Text="Reset"
AnchorHorizontal="100%" Disabled="True">
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:Panel runat="server" Region="West" width="200" Title="West" Layout="fit" AutoScroll="true" >
<Items>
<ext:TabPanel runat="server">
<Items>
<ext:Panel runat="server" Title="tab 1"/>
<ext:Panel runat="server" Title="tab 1"/>
</Items>
</ext:TabPanel>
</Items>
</ext:Panel>
<ext:Panel runat="server" Region="center" Title="center" Layout="BorderLayout" AutoScroll="true" >
<Items>
<ext:Panel runat="server" Region="center" width="200" Layout="fit" >
<Items>
<ext:TabPanel runat="server">
<Items>
<ext:Panel runat="server" Title="tab 3" layout="FormLayout">
<Items>
<ext:Panel runat="server" Height="40">
<Items>
<ext:Label runat="server" Text="A very long descriptions needs to be scrollable"></ext:Label>
</Items>
</ext:Panel>
<ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
<Store>
<ext:Store ID="Store1" runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<Ext:RecordField Name="test1" Type="String" />
<Ext:RecordField Name="test2" Type="String"/>
<Ext:RecordField Name="test3" />
</Fields>
</ext:ArrayReader>
</Reader>
<SortInfo Field="test2" Direction="DESC" />
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column Header="Test1" DataIndex="test1" />
<ext:Column Header="Test2" DataIndex="test2" />
<ext:Column Header="Test3" DataIndex="test3" />
</Columns>
</ColumnModel>
<View>
<ext:GroupingView ID="GroupingView1" runat="server" />
</View>
</ext:GridPanel>
</Items>
</ext:Panel>
<ext:Panel runat="server" Title="tab 4"/>
</Items>
</ext:TabPanel>
</Items>
</ext:Panel>
<ext:Panel runat="server" Region="South" Title="south" Height="45" AutoScroll="true" >
<Items>
<ext:ColumnLayout runat="server" Split="false">
<Columns>
<ext:LayoutColumn ColumnWidth="0.25">
<ext:Panel runat="server" Border="false" Height="24">
<Items>
<ext:Label ID="lbselectedObjectpermissions" runat="server" Text="selected"
AutoDataBind="true" >
</ext:Label>
</Items>
</ext:Panel>
</ext:LayoutColumn>
<ext:LayoutColumn ColumnWidth="0.25">
<ext:Panel runat="server" Border="false" Height="24">
<Items>
<ext:Label ID="lbnotselectedObjectpermissions" runat="server" Text="selected "
AutoDataBind="true">
</ext:Label>
</Items>
</ext:Panel>
</ext:LayoutColumn>
<ext:LayoutColumn ColumnWidth="0.25">
<ext:Panel runat="server" Border="false" Height="24">
<Items>
<ext:Label ID="lbmixedselectedObjectpermissions" runat="server" Text="mixedselected "
AutoDataBind="true">
</ext:Label>
</Items>
</ext:Panel>
</ext:LayoutColumn>
<ext:LayoutColumn ColumnWidth="0.17">
<ext:Panel runat="server" Border="false" Height="24">
<Items>
<ext:Label ID="lbaccessdenyObjectpermissions" runat="server" Text="Access denied"
AutoDataBind="true">
</ext:Label>
</Items>
</ext:Panel>
</ext:LayoutColumn>
</Columns>
</ext:ColumnLayout>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>
Last edited by geoffrey.mcgill; Sep 12, 2011 at 12:03 AM.
Reason: [CLOSED]
Originally Posted by Vladimir
