PDA

View Full Version : [CLOSED] Gridpanel Scrolling



bayoglu
Feb 27, 2013, 1:35 AM
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.



<%@ 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>

Baidaly
Feb 27, 2013, 2:01 AM
Hello!

You should use Constrain property:


<ext:Window runat="server" ID="Window1" Layout="FitLayout" Width="500" Height="300" Modal="true" Closable="true" Constrain="True">
</ext:Window>

bayoglu
Feb 27, 2013, 9:25 AM
Hello!

You should use Constrain property:


<ext:Window runat="server" ID="Window1" Layout="FitLayout" Width="500" Height="300" Modal="true" Closable="true" Constrain="True">
</ext:Window>

Thank you Baidaly. How about Question #3 (GridPanel2 Scrolling)? Let me know if I should I start a new threat for it.

Vladimir
Feb 27, 2013, 12:13 PM
Thank you Baidaly. How about Question #3 (GridPanel2 Scrolling)? Let me know if I should I start a new threat for it.


Please set Layout="FitLayout" for Panel3 or remove that panel at all

bayoglu
Feb 28, 2013, 3:40 PM
All issues solved. Mark as closed please.
Thank you.