PDA

View Full Version : [CLOSED] Dialogs as UserControls



cwolcott
Mar 18, 2013, 2:41 PM
I am continuing to refactor my page (Dashboard.aspx). I have several ext:windows defined at the bottom of my aspx page that are displayed during a button click (Finalize Request, Reopen Request). To help reduce the size of the aspx file and potential reuse I was planning to pull the code out into a user control (ascx).

What is the proper way to call/launch them and close them?



<ext:Window ID="RequestReopenWindow" runat="server" Title="Reopen Request" Width="500" Layout="FitLayout" Resizable="false" Modal="true" Border="false" Constrain="true" >
<Items>
<ext:FormPanel runat="server" >
<Items>
<ext:DisplayField runat="server" Text="Expalin why the request needs to be reopened. />
<%-- more items --%>
</Items>
</ext:FormPanel>
</Items>
<Buttons>
<ext:Button ID="ReopenDlgBtn" runat="server" Text="Reopen" Icon="BookNext" FormBind="True" Disabled="true">
<DirectEvents>
<%-- <Click onEvent="ReopenClick" Success="" /> --%>
</DirectEvents>
</ext:Button>
<ext:Button runat="server" Text="Cancel" Icon="Cancel" Handler="App.RequestReopenWindow.hide();" />
</Buttons>
</ext:Window>

Vladimir
Mar 18, 2013, 2:57 PM
For example, you can use approach is used in Calendar sample
http://examples2.ext.net/#/Calendar/Overview/Basic/




((EventsViewer)this.Page.LoadControl("../Shared/Common/EventsViewer.ascx")).Render();
Render method is defined in user control and just calls Render method of Window widget


public void Render()
{
this.Window1.Render();
}

cwolcott
Mar 19, 2013, 2:42 PM
So here is a small sample below of the general thing i would like to do.

I have a button in the user control that needs to call a server method. When I try a DirectEvent I receive "The control with ID 'AscxOK' not found."

DialogTest02.aspx


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

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

protected void ClickLoadDialog(object sender, DirectEventArgs e)
{
((ucDialog02)this.Page.LoadControl("Dialogs/ucDialog02.ascx")).Render();
}

</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Dialog Test</title>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Viewport runat="server" Layout="BorderLayout">
<Items>
<ext:Panel runat="server" Title="Center" Region="Center">
<BottomBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="Dialog" OnDirectClick="ClickLoadDialog" />
</Items>
</ext:Toolbar>
</BottomBar>
</ext:Panel>
</Items>
</ext:Viewport>
</body>
</html>


Dialogs/ucDialog02.ascx


<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ucDialog02.ascx.cs"
Inherits="ucDialog02" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<ext:Window ID="Window1" runat="server" Width="200" Height="200" Title="Dialog" CloseAction="Destroy">
<Items>
<ext:FormPanel runat="server">
<Items>
</Items>
<Buttons>
<ext:Button ID="AscxOK" runat="server" ClientIDMode="Static" Text="OK" OnDirectClick="ClickOK" />
<ext:Button runat="server" Text="Cancel" OnClientClick="App.Window1.close();" />
</Buttons>
</ext:FormPanel>
</Items>
</ext:Window>


Dialogs/ucDialog02.ascx.cs


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

using Ext.Net;

public partial class ucDialog02 : System.Web.UI.UserControl
{

protected void ClickOK(object sender, DirectEventArgs e)
{
X.Msg.Alert("Alert", "ASCX OK").Show();

}

public void Render()
{
this.Window1.Render();
}
}

Again I was attempting to pull <ext:Windows> out of my aspx to reduce the size of the page code and to allow for reuse on various pages.

cwolcott
Mar 20, 2013, 12:06 AM
Daniil/Baidaly,

I thoughts? The thread has been passed over all day.

Baidaly
Mar 20, 2013, 2:23 AM
Hello!

Sorry, for the delay!

You cannot use this approach due to limitation of ASP.NET life-cycle. However, you can use the following approach:

MainPage.aspx


<%@ Page Language="C#" %>
<%@ Register src="ucDialog02.ascx" tagname="ucDialog" tagprefix="uc" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">

protected void ClickLoadDialog(object sender, DirectEventArgs e)
{
Dialog1.ControlWindow.Show();
}

</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Dialog Test</title>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Viewport runat="server" Layout="BorderLayout">
<Items>
<ext:Panel runat="server" Title="Center" Region="Center">
<BottomBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="Dialog" OnDirectClick="ClickLoadDialog" />
</Items>
</ext:Toolbar>
</BottomBar>
</ext:Panel>
</Items>

<Content>
<uc:ucDialog ID="Dialog1" runat="server" />
</Content>
</ext:Viewport>
</body>
</html>

ASCX:


<%@ Control Language="C#" AutoEventWireup="true" %>

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

<script runat="server">
public Ext.Net.Window ControlWindow { get { return this.Window1; } }

protected void ClickOK(object sender, DirectEventArgs e)
{
X.Msg.Alert("Alert", "ASCX OK").Show();
}

public void Render()
{
this.Window1.Render();
}
</script>

<ext:Window ID="Window1" runat="server" Width="200" Height="200" Title="Dialog" CloseAction="Destroy" Hidden="True">
<Items>
<ext:FormPanel runat="server">
<Items>
</Items>
<Buttons>
<ext:Button ID="AscxOK" runat="server" ClientIDMode="Static" Text="OK" OnDirectClick="ClickOK" />
<ext:Button runat="server" Text="Cancel" OnClientClick="App.Window1.close();" />
</Buttons>
</ext:FormPanel>
</Items>
</ext:Window>

cwolcott
Mar 20, 2013, 1:33 PM
Is this the best approach to show windows as dialogs?

My dashboard (ext:Viewport) has 10 dialogs (ext:Window) currently defined in the aspx. The dialogs might never be called if the user doesn't perform certain actions. So I thought pulling them out of the aspx and into their own files would help on code clutter (smaller aspx file size), memory (only create when needed) and maybe minor performance initial loading (only create when needed).

Is there a good example or thread that discusses this?

Daniil
Mar 20, 2013, 3:33 PM
Your example throws an error, because a DirectEvent requires a control instance on server side.

If create and render a Window during one DirectEvent, that Window is not recreated automatically during another DirectEvent. Neither Ext.NET or ASP.NET do that.

You could use a DirectMethod instead of a DirectEvent. It doesn't require a control instance of server.

Well, each approach has cons and pros. Well, you want to render controls on demand. it causes a lack of them on server. I would also prefer to render controls on demand.

Ideally, it is better to move those requests to HttpHandlers and WebServices instead of a Page.


Is there a good example or thread that discusses this?

There are many similar threads, but it won't add much to that I already said in this post.