Sep 24, 2015, 7:44 PM
[CLOSED] Accessing a child window component from the parent
Hi,
I need to get a handle on the child window components from the hosting page. That's mainly to resolve the layout problems occurring on the child window when it loads. However, it would be nice to know the pattern going forward as well. Please refer to the sample code below.
MainPage.aspx
I need to get a handle on the child window components from the hosting page. That's mainly to resolve the layout problems occurring on the child window when it loads. However, it would be nice to know the pattern going forward as well. Please refer to the sample code below.
MainPage.aspx
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
</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 3.x Examples</title>
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Style" />
<script type="text/javascript">
var showWindow = function () {
var wnd = App.Window1;
wnd.center();
wnd.setVisible(true);
};
var loadWindow = function () {
var wnd = App.Window1;
wnd.hidden = false;
var url = "ChildPage.aspx";
if (Ext.isEmpty(wnd.iframe)) {
wnd.load({
url: url,
//params: { param1: 'foo', param2: 'bar' }, // or a URL encoded string
callback: function () {
// The grid reference is null so it doesn't work
var grid = wnd.getBody().Ext.ComponentQuery.query('gridpanel(true)');
grid.doLayout();
//wnd.getBody().getCmp("GridPanel1").doLayout();
Ext.Msg.alert("Loaded", "Window was loaded!");
},
//scope: yourObject, // optional scope for the callback
discardUrl: false,
nocache: true,
text: 'Loading...',
timeout: 10,
scripts: true
});
}
wnd.hidden = true;
};
var onDocumentReady = function () {
loadWindow();
var win = App.Window1;
win.on({
"show": {
fn: function () {
// Data bind the GridPanel on window showing
win.getBody().X.DataBind({
eventMask: { showMask: true },
success: function (result) {
},
failure: function (errorMessage) {
}
});
},
scope: this,
},
"hide": {
fn: function () {
// Reconfigure the GridPanel on window hiding
win.getBody().X.Reconfigure({
eventMask: { showMask: true },
success: function (result) {
},
failure: function (errorMessage) {
}
});
},
scope: this
}
});
};
</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" DirectMethodNamespace="X">
<Listeners>
<DocumentReady Fn="onDocumentReady" />
</Listeners>
</ext:ResourceManager>
<ext:Viewport runat="server" Layout="FitLayout">
<Items>
<ext:FormPanel ID="FormPanel1" runat="server" Border="true" Frame="false" Header="false"
TrackResetOnLoad="true" AutoScroll="false" ButtonAlign="Right">
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="Button1" runat="server" Text="Show Window" Icon="StatusOnline" Disabled="false">
<Listeners>
<Click Fn="showWindow" />
</Listeners>
</ext:Button>
<ext:ToolbarSeparator runat="server">
</ext:ToolbarSeparator>
</Items>
</ext:Toolbar>
</TopBar>
</ext:FormPanel>
</Items>
</ext:Viewport>
<ext:Window ID="Window1" runat="server" Icon="CogEdit" Title="Edit" Width="800" Height="600"
Resizable="false" Collapsible="false" Hidden="true" Modal="true" Draggable="true" Layout="FitLayout" HideMode="Offsets">
<Loader ID="Loader1" runat="server" Mode="Frame" AutoLoad="false" DisableCaching="true">
<LoadMask ShowMask="true" Msg="Loading Child Page...">
</LoadMask>
</Loader>
<Items>
</Items>
</ext:Window>
</form>
</body>
</html>
ChildPage.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)
return;
}
private object[] TestData
{
get
{
var now = DateTime.Now;
return new object[]
{
new object[] { "3m Co", 71.72, 0.02, 0.03, now },
new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, now },
new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, now },
new object[] { "American Express Company", 52.55, 0.01, 0.02, now },
new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, now },
new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, now },
new object[] { "Boeing Co.", 75.43, 0.53, 0.71, now },
new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, now },
new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, now },
new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, now },
new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, now },
new object[] { "General Electric Company", 34.14, -0.08, -0.23, now },
new object[] { "Government Motors Corporation", 30.27, 1.09, 3.74, now },
new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, now },
new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, now },
new object[] { "Intel Corporation", 19.88, 0.31, 1.58, now },
new object[] { "International Business Machines", 81.41, 0.44, 0.54, now },
new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, now },
new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, now },
new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, now },
new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, now },
new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, now },
new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, now },
new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, now },
new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, now },
new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, now },
new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, now },
new object[] { "Verizon Communications", 35.57, 0.39, 1.11, now },
new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, now }
};
}
}
[DirectMethod]
public void DataBind()
{
Store1.DataSource = TestData;
Store1.DataBind();
}
[DirectMethod]
public void Reconfigure()
{
this.GridPanel1.Reconfigure();
}
</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Ext.Net 3.x Examples</title>
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Style" />
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" DirectMethodNamespace="X" />
<ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
<Items>
<ext:GridPanel ID="GridPanel1" runat="server" Flex="1" Border="true" BodyBorder="1">
<Store>
<ext:Store ID="Store1" runat="server" RemoteSort="false"
AutoLoad="true" PageSize="10">
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="company">
<Fields>
<ext:ModelField Name="company" />
<ext:ModelField Name="price" Type="Float" />
<ext:ModelField Name="change" Type="Float" />
<ext:ModelField Name="pctChange" Type="Float" />
<ext:ModelField Name="lastChange" Type="Date" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ID="Column1" runat="server" Text="Company" DataIndex="company" Width="200">
<Editor>
<ext:TextField ID="TextField1" runat="server" />
</Editor>
</ext:Column>
<ext:Column ID="Column2" runat="server" Text="Price" Width="75" DataIndex="price">
<Editor>
<ext:TextField ID="TextField2" runat="server" />
</Editor>
</ext:Column>
<ext:Column ID="Column3" runat="server" Text="Change" Width="100" DataIndex="change" />
<ext:Column ID="Column4" runat="server" Text="Change" Width="100" DataIndex="pctChange" />
<ext:DateColumn ID="DateColumn1" runat="server" Text="Last Updated" Width="120" DataIndex="lastChange"
Format="HH:mm:ss" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Multi" />
</SelectionModel>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar1" runat="server">
</ext:PagingToolbar>
</BottomBar>
</ext:GridPanel>
</Items>
</ext:Viewport>
</form>
</body>
</html>
Last edited by Daniil; Sep 25, 2015 at 12:57 PM.
Reason: [CLOSED]