Feb 27, 2013, 1:35 AM
[CLOSED] Gridpanel Scrolling
Hello,
Problems I have with the below code are:
1) Try to move the window to the right edge or bottom of the page. New space is created for the window (page extends) and I can move window to the right/bottom end. How to restrict window move out of initial edges?
2) Try to move window to the top of the page until the window header goes under browser toolbar and then release the window. At this position I can not close/re-move the window, page refresh is required.
3) GridPanel2 does not auto scroll. I tried to put AutoScroll=true almost everywhere (; I guess there is something wrong with my layout configuration. Selecting a row cause some how scrolling to up-side, grid header and top bar disappears from the scene. When AutoScroll=true is put to Panel3, I can scroll up to see grid header (each time I select a row). How to correct this and make GridPanel2 auto scrolling?
Thanks.
Problems I have with the below code are:
1) Try to move the window to the right edge or bottom of the page. New space is created for the window (page extends) and I can move window to the right/bottom end. How to restrict window move out of initial edges?
2) Try to move window to the top of the page until the window header goes under browser toolbar and then release the window. At this position I can not close/re-move the window, page refresh is required.
3) GridPanel2 does not auto scroll. I tried to put AutoScroll=true almost everywhere (; I guess there is something wrong with my layout configuration. Selecting a row cause some how scrolling to up-side, grid header and top bar disappears from the scene. When AutoScroll=true is put to Panel3, I can scroll up to see grid header (each time I select a row). How to correct this and make GridPanel2 auto scrolling?
Thanks.
<%@ 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)
{
Store1.DataSource = new object[]{ new object[]{1, "A"},new object[]{2, "A"},new object[]{3, "A"},new object[]{4, "A"},new object[]{5, "A"},new object[]{6, "A"},new object[]{7, "A"},new object[]{8, "A"},new object[]{9, "A"},new object[]{10, "A"}};
Store1.DataBind();
Store2.DataSource = new object[]{ new object[] { 1, "A" }, new object[] { 2, "A" }, new object[] { 3, "A" }, new object[] { 4, "A" }, new object[] { 5, "A" }, new object[] { 6, "A" }, new object[] { 7, "A" }, new object[] { 8, "A" }, new object[] { 9, "A" }, new object[] { 10, "A" },
new object[] { 11, "A" }, new object[] { 12, "A" }, new object[] { 13, "A" }, new object[] { 14, "A" }, new object[] { 15, "A" }, new object[] { 16, "A" }, new object[] { 17, "A" }, new object[] { 18, "A" }, new object[] { 19, "A" }, new object[] { 20, "A" },
new object[] { 21, "A" }, new object[] { 22, "A" }, new object[] { 23, "A" }, new object[] { 24, "A" }, new object[] { 25, "A" }, new object[] { 26, "A" }, new object[] { 27, "A" }, new object[] { 28, "A" }, new object[] { 29, "A" }, new object[] { 30, "A" }};
Store2.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 runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server"/>
<div>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="ID">
<Fields>
<ext:ModelField Name="ID" Type="Int"></ext:ModelField>
<ext:ModelField Name="Name" Type="String"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
<ext:Store ID="Store2" runat="server">
<Model>
<ext:Model ID="Model2" runat="server" IDProperty="ID">
<Fields>
<ext:ModelField Name="ID" Type="Int"></ext:ModelField>
<ext:ModelField Name="Name" Type="String"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
<div>
<ext:Viewport ID="Viewport1" runat="server" Layout="FitLayout">
<Items>
<ext:Panel ID="Panel1" runat="server" Layout="VBoxLayout">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" Padding="0"></ext:VBoxLayoutConfig>
</LayoutConfig>
<Items>
<ext:Panel runat="server" ID="Panel2" Layout="FitLayout" MaxHeight="250" MinHeight="100" Padding="10">
<Items>
<ext:GridPanel ID="GridPanel1" runat="server" StoreID="Store1">
<TopBar>
<ext:Toolbar runat="server" ID="Toolbar1" EnableOverflow="true">
<Items>
<ext:ToolbarFill></ext:ToolbarFill>
<ext:Button ID="Button1" runat="server" Icon="Add">
</ext:Button>
<ext:Button ID="Button2" runat="server" Icon="Reload">
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<ColumnModel runat="server" ID="ColumnModel1">
<Columns>
<ext:Column ID="Column1" runat="server" Text="Name" DataIndex="Name" Align="Left" Flex="1">
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server">
</ext:RowSelectionModel>
</SelectionModel>
</ext:GridPanel>
</Items>
</ext:Panel>
<ext:TabPanel runat="server" ID="TabPanel1" Layout="FitLayout" Flex="1" Padding="10">
<Items>
<ext:Panel runat="server" ID="Panel3" Title="Events">
<Items>
<ext:GridPanel ID="GridPanel2" runat="server" StoreID="Store2">
<TopBar>
<ext:Toolbar runat="server" ID="Toolbar2" EnableOverflow="true">
<Items>
<ext:ToolbarFill></ext:ToolbarFill>
<ext:Button ID="Button3" runat="server" Icon="Reload"></ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<ColumnModel runat="server" ID="ColumnModel2">
<Columns>
<ext:Column ID="Column2" runat="server" Text="Name" DataIndex="Name" Align="Left" Flex="1">
</ext:Column>
</Columns>
</ColumnModel>
</ext:GridPanel>
</Items>
</ext:Panel>
</Items>
</ext:TabPanel>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
<ext:Window runat="server" ID="Window1" Layout="FitLayout" Width="500" Height="300" Modal="true" Closable="true">
</ext:Window>
</div>
</form>
</body>
</html>