PDA

View Full Version : [CLOSED] Open 2nd Window outside Parent - Part II



jwhitmire36
Jun 26, 2013, 8:30 PM
Hello,
In this previous post http://forums.ext.net/showthread.php?25229-CLOSED-Open-2nd-Window-outside-Parent-Window you helped me open a window out of the parent from a child window and that I have working fine.

Now, the 2nd window's content is coming from an Ext:Panel defined in the parent page, and it comes up the first time you open the window. But, if you close the 2nd window then re-open the content from the panel is missing.

In the example below, click 'Help Window' button and 2nd 'Quick Help' window pops to the right of 1st window with a little bit of content. Then either close the 'Quick Help' window via the 'X' or 'Close Help' button. Then hit 'Help Window' again and the window pops but the content is not there. The content comes from pnlHelp1 in the parent. Looking in IE developer tools to see the markup I can see that on the second time the div with x-panel is present for ContentPlaceHolder1_pnlHelp1, but the div with x-panel-body underneath for ContentPlaceHolder1_pnlHelp1-body is gone. I've tried many various things with load, show, hide and not been successfull. Thanks for your help.

Parent


<%@ Page Language="C#" MasterPageFile="~/Site1.Master" %>
<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
<asp:Content ID="MainContent" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server"></ext:ResourceManager>
<ext:Button ID="btnWindow" runat="server" Text="Open Window">
<Listeners>
<Click Handler="App.myWind.show();"></Click>
</Listeners>
</ext:Button>
<ext:Window ID="myWind" runat="server" Title="Test Window" Modal="true" AutoRender="true" Height="600" Width="625" CloseAction="Hide">
<Loader ID="myLoader" runat="server" Mode="Frame" Url="ChildWind2.aspx" AutoLoad="true"></Loader>
</ext:Window>
<ext:Panel ID="pnlHelp1" runat="server" UI="bubble" Hidden="true" Height="500" Width="250">
<Content>
<table id="table1" cellspacing="0" cellpadding="2">
<tr align="left"><th style="border-bottom: 1pt solid black; text-align: left;">Quick Help 1 Title</th></tr>
<tr><td><ul><li>This is your help body.</li></ul></td></tr>
</table>
</Content>
</ext:Panel>
</asp:Content>


Child


<%@ Page Language="C#" %>
<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript">
var createWindow = function () {
var help = parent.Ext.getCmp("ContentPlaceHolder1_pnlHelp1");
help.show();
var winHelp = parent.Ext.create("Ext.window.Window", {
id: 'winHelp',
title: "Created from the child page",
width: 100,
height: 100,
contentEl: help.el,
closeAction: 'destroy'
});
winHelp.showBy(parent.Ext.getCmp('ContentPlaceHold er1_myWind'), 'tl-tr');
winHelp.animate({ to: { width: 275, height: 600 }, duration: 500 });
};
var closeWin = function () {
var win = parent.Ext.getCmp('winHelp');
var hlp = parent.Ext.getCmp("ContentPlaceHolder1_pnlHelp1");
hlp.hide();
win.close();
};
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server"></ext:ResourceManager>
<ext:Panel ID="Panel1" runat="server" Layout="HBoxLayout" Title="Test Panel" BodyPadding="10" Width="600">
<LayoutConfig>
<ext:HBoxLayoutConfig Pack="Center"></ext:HBoxLayoutConfig>
</LayoutConfig>
<Items>
<ext:Button ID="btn1" runat="server" Text="Help Window" Handler="createWindow();"></ext:Button>
<ext:Button ID="btnClose" runat="server" Text="Close Help" Handler="closeWin();"></ext:Button>
</Items>
</ext:Panel>
</form>
</body>
</html>


JW

Baidaly
Jun 27, 2013, 12:44 AM
Hello!

The problem is that you destroy your Panel because you set closeAction: 'destroy'. You should set closeAction to 'hide' (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.window.Window-cfg-closeAction) or save you content before close:

Parent.aspx:


<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:Window runat="server" Title="Defined in the parent page">
<Loader runat="server" Url="Child.aspx" Mode="Frame" />
</ext:Window>

<ext:Panel ID="pnlHelp1" runat="server" UI="bubble" Hidden="true" Height="500" Width="250">
<Content>
<table id="table1" cellspacing="0" cellpadding="2">
<tr align="left"><th style="border-bottom: 1pt solid black; text-align: left;">Quick Help 1 Title</th></tr>
<tr><td><ul><li>This is your help body.</li></ul></td></tr>
</table>
</Content>
</ext:Panel>
</form>
</body>
</html>


Child.aspx


<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<script>
var createWindow = function () {
parent.Ext.create("Ext.window.Window", {
title: "Created from the child page",
width: 200,
height: 200,
contentEl: parent.Ext.get('pnlHelp1'),
closeAction: 'destroy',
listeners: {
beforeclose: function() {
this.contentEl.appendTo(parent.Ext.getBody());
this.contentEl.hide();
}
}
}).show();

parent.Ext.get('pnlHelp1').show();
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:Button runat="server" Text="Open window" Handler="createWindow" />
</form>
</body>
</html>

jwhitmire36
Jun 27, 2013, 9:28 PM
Thank You! I have it working using your example, one key point that I had to change was to get the help panel out of the parent I was using
parent.Ext.getCmp('pnlHelp1'), but based your example I switched to parent.Ext.get('pnlHelp1') and that along with the listener on close to save the content did the trick. You can mark this closed.

JW