Aug 04, 2014, 6:20 PM
[CLOSED] Scroll position is lost for GridPanels within a TabPanel
Hi,
When adding new tabs with "iframe" autoload mode, I've noticed that the scrolling position of the grid is lost when switching tabs after row selection. To reproduce, load Tab 1, select a row near the bottom of the grid and load Tab 2. Switch back to Tab 1 to observe that the previous scrolling position is lost and the row is out of view although still selected.
Parent.aspx
When adding new tabs with "iframe" autoload mode, I've noticed that the scrolling position of the grid is lost when switching tabs after row selection. To reproduce, load Tab 1, select a row near the bottom of the grid and load Tab 2. Switch back to Tab 1 to observe that the previous scrolling position is lost and the row is out of view although still selected.
Parent.aspx
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!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 1.x</title>
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Style" />
<script type="text/javascript">
var addTab = function (tabPanel, id, url) {
var tab = tabPanel.getComponent(id);
if (!tab) {
tab = tabPanel.add({
id: id,
title: url,
closable: true,
autoLoad: {
showMask: true,
url: url,
mode: "iframe",
maskMsg: "Loading " + url + "..."
}
});
tab.on("activate", function (p) {
var item = MenuPanel1.menu.items.get(id);
var body = p.getBody();
if (item) {
MenuPanel1.setSelection(item);
}
}, this);
}
tabPanel.setActiveTab(tab);
}
</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Window ID="Window1" runat="server" Title="Adding tab" Width="700" Height="500"
Icon="Link" Layout="border">
<Items>
<ext:MenuPanel ID="MenuPanel1" runat="server" Width="200" Region="West">
<Menu ID="Menu1" runat="server">
<Items>
<ext:MenuItem ID="MenuItem1" runat="server" Text="Tab 1">
<Listeners>
<Click Handler="addTab(#{TabPanel1}, this.id, 'Child.aspx');" />
</Listeners>
</ext:MenuItem>
<ext:MenuSeparator />
<ext:MenuItem ID="MenuItem2" runat="server" Text="Tab 2">
<Listeners>
<Click Handler="addTab(#{TabPanel1}, this.id, 'Child.aspx');" />
</Listeners>
</ext:MenuItem>
<ext:MenuSeparator />
<ext:MenuItem ID="MenuItem3" runat="server" Text="Tab 3">
<Listeners>
<Click Handler="addTab(#{TabPanel1}, this.id, 'Child.aspx');" />
</Listeners>
</ext:MenuItem>
</Items>
</Menu>
</ext:MenuPanel>
<ext:TabPanel ID="TabPanel1" runat="server" Region="Center" LayoutOnTabChange="true" HideMode="Offsets" EnableTabScroll="true">
<Plugins>
<ext:TabCloseMenu ID="TabCloseMenu1" runat="server" />
<ext:TabScrollerMenu runat="server" PageSize="5">
</ext:TabScrollerMenu>
</Plugins>
</ext:TabPanel>
</Items>
</ext:Window>
</form>
</body>
</html>
Child.aspx<%@ 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)
{
this.Store1.DataSource = this.Data;
this.Store1.DataBind();
}
}
private object[] Data
{
get
{
return new object[]
{
new object[] { "3m Co", "Conglomerates", 71.72, 0.02, 0.03, "9/1 12:00am" },
new object[] { "Alcoa Inc", "Basic Materials", 29.01, 0.42, 1.47, "9/1 12:00am" },
new object[] { "Altria Group Inc", "Consumer Goods", 83.81, 0.28, 0.34, "9/1 12:00am" },
new object[] { "American Express Company", "Financial", 52.55, 0.01, 0.02, "9/1 12:00am" },
new object[] { "American International Group, Inc.", "Financial", 64.13, 0.31, 0.49, "9/1 12:00am" },
new object[] { "AT&T Inc.", "Technology", 31.61, -0.48, -1.54, "9/1 12:00am" },
new object[] { "Boeing Co.", "Industrial", 75.43, 0.53, 0.71, "9/1 12:00am" },
new object[] { "Caterpillar Inc.", "Industrial", 67.27, 0.92, 1.39, "9/1 12:00am" },
new object[] { "Citigroup, Inc.", "Financial", 49.37, 0.02, 0.04, "9/1 12:00am" },
new object[] { "E.I. du Pont de Nemours and Company", "Basic Materials", 40.48, 0.51, 1.28, "9/1 12:00am" },
new object[] { "Exxon Mobil Corp", "Energy", 68.1, -0.43, -0.64, "9/1 12:00am" },
new object[] { "General Electric Company", "Industrial", 34.14, -0.08, -0.23, "9/1 12:00am" },
new object[] { "General Motors Corporation", "Consumer", 30.27, 1.09, 3.74, "9/1 12:00am" },
new object[] { "Hewlett-Packard Co.", "Technology", 36.53, -0.03, -0.08, "9/1 12:00am" },
new object[] { "Honeywell Intl Inc", "Industrial", 38.77, 0.05, 0.13, "9/1 12:00am" },
new object[] { "Intel Corporation", "Technology", 19.88, 0.31, 1.58, "9/1 12:00am" },
new object[] { "International Business Machines", "Technology", 81.41, 0.44, 0.54, "9/1 12:00am" },
new object[] { "Johnson & Johnson", "Consumer", 64.72, 0.06, 0.09, "9/1 12:00am" },
new object[] { "JP Morgan & Chase & Co", "Financial", 45.73, 0.07, 0.15, "9/1 12:00am" },
new object[] { "McDonald\"s Corporation", "Consumer", 36.76, 0.86, 2.40, "9/1 12:00am" },
new object[] { "Merck & Co., Inc.", "Consumer", 40.96, 0.41, 1.01, "9/1 12:00am" },
new object[] { "Microsoft Corporation", "Technology", 25.84, 0.14, 0.54, "9/1 12:00am" },
new object[] { "Pfizer Inc", "Consumer", 27.96, 0.4, 1.45, "9/1 12:00am" },
new object[] { "The Coca-Cola Company", "Consumer", 45.07, 0.26, 0.58, "9/1 12:00am" },
new object[] { "The Home Depot, Inc.", "Consumer", 34.64, 0.35, 1.02, "9/1 12:00am" },
new object[] { "The Procter & Gamble Company", "Consumer", 61.91, 0.01, 0.02, "9/1 12:00am" },
new object[] { "United Technologies Corporation", "Industrial", 63.26, 0.55, 0.88, "9/1 12:00am" },
new object[] { "Verizon Communications", "Communications", 35.57, 0.39, 1.11, "9/1 12:00am" },
new object[] { "Wal-Mart Stores, Inc.", "Consumer", 45.45, 0.73, 1.63, "9/1 12:00am" }
};
}
}
</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 1.x</title>
<script type="text/javascript">
var template = '<span style="color:{0};">{1}</span>';
var change = function (value) {
return String.format(template, (value > 0) ? "green" : "red", value);
};
var pctChange = function (value) {
return String.format(template, (value > 0) ? "green" : "red", value + "%");
};
</script>
</head>
<body>
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Style" />
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server">
</ext:ResourceManager>
<ext:Viewport ID="ViewPort1" runat="server" Layout="BorderLayout">
<Items>
<ext:Panel runat="server" Region="Center" Layout="BorderLayout">
<Items>
<ext:GridPanel ID="GridPanel1" runat="server" Region="North" StripeRows="true" Title="Array Grid"
TrackMouseOver="true" MinHeight="160" Height="280" AutoExpandColumn="company" Collapsible="false"
CollapseMode="Mini" SelectionMemory="Enabled" Split="true" AutoScroll="true"
Border="true">
<Store>
<ext:Store ID="Store1" runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="company" />
<ext:RecordField Name="price" Type="Float" />
<ext:RecordField Name="change" Type="Float" />
<ext:RecordField Name="pctChange" Type="Float" />
<ext:RecordField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ColumnID="Company" Header="Company" DataIndex="company" />
<ext:Column Header="Price" DataIndex="price">
<Renderer Format="UsMoney" />
</ext:Column>
<ext:Column ColumnID="Change" Header="Change" DataIndex="change">
<Renderer Fn="change" />
</ext:Column>
<ext:Column Header="Change" DataIndex="pctChange">
<Renderer Fn="pctChange" />
</ext:Column>
<ext:DateColumn Header="Last Updated" DataIndex="lastChange" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server" SingleSelect="true" />
</SelectionModel>
</ext:GridPanel>
<ext:Panel runat="server" ID="Panel1" Region="Center" Border="false" Layout="FitLayout" Title="Company Details" Icon="ApplicationEdit"
HideMode="Offsets">
<Items>
<ext:FormPanel runat="server" LabelAlign="Left"
Padding="10" ButtonAlign="Right" AutoScroll="false" Border="true" Frame="false"
TrackResetOnLoad="true">
<Items>
<ext:TextField runat="server" FieldLabel="Company Name"></ext:TextField>
<ext:TextField runat="server" FieldLabel="Last Updated"></ext:TextField>
</Items>
<BottomBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button ID="ButtonEdit1" runat="server" Text="Edit" Icon="ApplicationEdit" Width="80">
</ext:Button>
<ext:ToolbarSeparator>
</ext:ToolbarSeparator>
<ext:Button ID="ButtonCancel1" runat="server" Text="Cancel" Icon="Cancel" Disabled="true"
ToolTip="Cancel" Width="80">
</ext:Button>
<ext:ToolbarSeparator>
</ext:ToolbarSeparator>
<ext:ToolbarFill>
</ext:ToolbarFill>
</Items>
</ext:Toolbar>
</BottomBar>
</ext:FormPanel>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>
Last edited by Daniil; Aug 06, 2014 at 7:15 AM.
Reason: [CLOSED]