Hello @mehdy!
Thanks for the test case, I am pretty confident I have a hang of what the issue is now.
The easiest way out of your issue would be to just add these buttons to the window itself instead of the inner view.
That would not help though, if you need any other interaction between the inner view and the outside shell, so implementing these "close button" alternatives is a good way to illustrate how you do.
This is nothing new, you can see a v5 sample exploring the feature at
Panel > Basic > IFrame Communication.
So, then, in your example just change your controller code to:
public IActionResult OnPostCloseClick()
{
this.X().AddScript("window.parent.App.Window1.close()");
return this.Direct();
}
Unfortunately getting a "virtual instance" of the window won't be supported in that case, and appending JavaScript code would be required for this approach -- at least for the time being.
As you may already have figured, the client-side button would become:
<ext-button text="Close Client Click" variant="Danger" onClientClick="window.parent.App.Window1.close()" />
If you want to reuse the view in different outer pages, just pass the ID of the parent window (
Window1
) or convention to always wrap the view on the same name. If you pass the ID, then you can close it via (say you name it "outerWindowId")
window.parent.App[outerWindowId].close()
.
Your next step, I foresee, is to force the window to refresh the loader every time you show it. Ideally, clear the window's contents when it closes (or before it opens), and load as it is opened/shown. If you clear it on close, next time it is opened, the old content won't "flash" on it.
Again, nothing new. The changes are based in
Panel > Basic > Deferred Loading, in
1. TabPanel, the tab that reads
"Loading on Show with Reloading". The tab shows the "old content blink" effect, which is avoided as described above.
In the end, your test case should look like this:
controller:
public class DirectEventController : Controller
{
public IActionResult Index()
{
return View();
}
public IActionResult EditView()
{
return View();
}
public IActionResult ButtonClick()
{
var win = this.GetCmp<Window>("Window1");
win.Show();
return this.Direct();
}
public IActionResult CloseClick()
{
var win = this.GetCmp<Window>("Window1");
win.Close(); // this one not working too
return this.Direct();
}
public IActionResult CloseOuterWindow()
{
this.X().AddScript("window.parent.App.Window1.close()");
return this.Direct();
}
}
index view:
@{
ViewData["Title"] = "DirectEvent";
var url = Url.Action("EditView", "DirectEvent");
}
<ext-section target="Main">
<ext-container region="Center" scrollable="true" paddingAsString="30 20 30 50">
<content>
<h1>DirectEvent</h1>
<ext-button text="Click me" onDirectClick="ButtonClick" variant="Danger" />
</content>
</ext-container>
</ext-section>
<ext-window id="Window1"
title="Edit View"
autoRender="false"
scrollable="false"
width="500"
height="235"
layout="Fit"
modal="true">
<listeners>
<beforeShow handler="this.clearContent()" />
</listeners>
<loader>
<ext-componentLoader renderer="frame" url="@url" x-triggerEvent="show" x:raw-reloadOnEvent="true">
<loadMask>
<ext-loadMask showMask="true" msg="Loading your order..." />
</loadMask>
</ext-componentLoader>
</loader>
</ext-window>
edit view:
@{
ViewData["Title"] = "Edit View";
Layout = null;// "_Layout2";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>@ViewData["Title"] - ExtSample2</title>
</head>
<body>
<ext-container region="Center" scrollable="false" paddingAsString="0">
<content>
<form id="fileUpload" enctype="multipart/form-data" method="post">
<ext-formPanel id="BasicForm"
width="500"
frame="true"
modal="true"
paddingAsString="20px"
x-labelWidth="50">
<defaults>
<ext-add key="anchor" value="95%" mode="Value" />
<ext-add key="allowBlank" value="false" mode="Raw" />
<ext-add key="msgTarget" value="side" mode="Value" />
</defaults>
<items>
<ext-textField id="firstName" fieldLabel="FirstName" name="desc" />
<ext-textField id="lastName" fieldLabel="LastName" name="desc" />
</items>
<buttons>
<ext-button id="SaveButton" variant="Success" text="Save" />
<ext-button text="Close Client Click" variant="Danger" onClientClick="window.parent.App.Window1.close()" />
<ext-button text="Close Direct Event" variant="Danger" onDirectClick="CloseOuterWindow" />
</buttons>
</ext-formPanel>
</form>
</content>
</ext-container>
</body>
</html>
Originally Posted by
mehdy
a partial view like previous versions would be awesome.
We completely agree with you, and we have already received some queries for this feature which, unfortunately,
is not supported at this time.
You may be interested in checking ideas on alternatives discussed in this thread. Maybe for the needs you have, one or more proposed there could be of use for you; in the least, as you focus on code/page/view reusage, information there can only be useful to keep in mind:
How to implement alternative to Html.RenderAction.
Hope this helps!