PDA

View Full Version : [CLOSED] Design question



cwolcott
Oct 03, 2012, 2:37 PM
For some reason I can't think through this design issue. I have a request form that is called from multiple places in our website. I want it to come up in a window. How should I call this form so that a window is popped up and not a new page?

Does the calling page create the window and then load a user control?
Does the calling window just call the other form which contains the window?

For some reason I am lost this morning. Any thoughts/examples would be helpful.

cwolcott
Oct 03, 2012, 2:48 PM
Ok, after poking around a little bit more this morning I ran across the examples for Loaders -> Component. Should I look further into the Direct Method and Http Handler examples and threads that discuss them?

Daniil
Oct 03, 2012, 10:23 PM
Hi Chris,

Loader is not appropriate for loading a Window.

Please look at this example.
http://examples2.ext.net/#/XRender/Basic/New_Window/

Using DirectEvent/DirectMethod you can refer any: ASHX HTTP generic handler, ASMX Web Service, MVC Controller Action.

cwolcott
Oct 04, 2012, 2:44 PM
Hi Chris,

Please look at this example.
http://examples2.ext.net/#/XRender/Basic/New_Window/

Using DirectEvent/DirectMethod you can refer any: ASHX HTTP generic handler, ASMX Web Service, MVC Controller Action.

Nice simple example, but how could I associate my common form with the window. Currently the form is an aspx. I assume I will change it over to a ascx and somehow have the window reference it (This is were I am confused).

Daniil
Oct 04, 2012, 3:29 PM
Could you demonstrate this ASPX?

Daniil
Oct 09, 2012, 11:47 AM
Hi Chris,

Could you clarify is the issue still actual?

cwolcott
Oct 10, 2012, 2:50 AM
Here is a simple example.

I have a home page that allows me to navigate to Page 2 or enter a Data Request.

Home.aspx


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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page2Click(object sender, DirectEventArgs e)
{
Response.Redirect("Page2.aspx");
}
protected void RequestData(object sender, DirectEventArgs e)
{
Response.Redirect("EWNSC02.aspx");
// What can I do to have EWNSC02.apsx show up as a model window on this page instead
// of a redirect.
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Panel runat="server" Title="Home Page" ButtonAlign="Left">
<Items>
</Items>
<Buttons>
<ext:Button runat="server" Text="Goto Page 2" OnDirectClick="Page2Click" />
<ext:Button ID="Button1" runat="server" Text="Request Data" OnDirectClick="RequestData" />
</Buttons>
</ext:Panel>
</body>
</html>


I have Page 2 that allows me to navigate back to the Home Page or enter a Data request.


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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void HomeClick(object sender, DirectEventArgs e)
{
Response.Redirect("Home.aspx");
}

protected void RequestData(object sender, DirectEventArgs e)
{
// What can I do to have EWNSC02.apsx show up as a model window on this page.
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Panel runat="server" Title="Page 2" ButtonAlign="Left">
<Items>
</Items>
<Buttons>

<ext:Button runat="server" Text="Goto Home" OnDirectClick="HomeClick" />
<ext:Button runat="server" Text="Request Data" OnDirectClick="RequestData" />
</Buttons>
</ext:Panel>
</body>
</html>


I currently have the Data Request fields defined in EWNSC02.aspx within ext:Window. How can I define this and reuse in multiple places? I would like the Data Request to be displayed as a model window on top of the Home page or Page 2 when the "Data Request" button is clicked.


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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<style type="text/css">
.headerFooter
{
background-color: #00D200;
text-align: center;
font-weight: bold;
color: White;
}
</style>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Window ID="Window1" runat="server" Title="Data Request" Icon="Application" BodyPadding="5"
Resizable="false">
<Items>
<ext:Panel ID="Panel1" runat="server" Region="Center" BodyPadding="5" Border="false">
<Items>
<ext:Panel ID="Panel2" runat="server" Html="Center Header" BodyCls="headerFooter" />
<ext:Panel ID="Panel3" runat="server" BodyPadding="5" Border="false">
<Items>
<ext:TextField runat="server" FieldLabel="Field #1" LabelWidth="60"
EmptyText="Fill it out ..." />
<ext:TextField runat="server" FieldLabel="Field #2" LabelWidth="60"
EmptyText="Fill it out ..." />
<ext:TextField runat="server" FieldLabel="Field #3" LabelWidth="60"
EmptyText="Fill it out ..." />
</Items>

</ext:Panel>
<ext:Panel ID="Panel4" runat="server" Html="Center Footer" BodyCls="headerFooter" />
</Items>
</ext:Panel>
</Items>
</ext:Window>
</body>
</html>

Daniil
Oct 10, 2012, 10:33 AM
Please look at the Feed Viewer example in SVN.

There is FeedWindow.ascx.

FeedWindow.ascx

<%@ Control Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<ext:Window runat="server"
Plain="true"
Width="500"
Height="140"
Title="Add Feed"
IconCls="feed"
Layout="FitLayout"
Resizable="false">
<Items>
<ext:FormPanel runat="server"
BodyPaddingSummary="12 10 10"
Border="false"
Unstyled="true">
<Items>
<ext:ComboBox runat="server"
ItemId="feed"
FieldLabel="Enter the URL of the feed to add"
LabelAlign="Top"
MsgTarget="Under"
Anchor="100%">
<ListConfig>
<ItemTpl>
<Html>
<div class="feed-picker-url">{field1}</div>
<div class="feed-picker-title">{field2}</div>
</Html>
</ItemTpl>
</ListConfig>
<Items>
<ext:ListItem Text="CNN Top Stories" Value="http://rss.cnn.com/rss/edition.rss" />
<ext:ListItem Text="ESPN Top News" Value="http://sports.espn.go.com/espn/rss/news" />
<ext:ListItem Text="Sci/Tech - Google News" Value="http://news.google.com/news?ned=us&topic=t&output=rss" />
<ext:ListItem Text="Yahoo Software News" Value="http://rss.news.yahoo.com/rss/software" />
</Items>
</ext:ComboBox>
</Items>
</ext:FormPanel>
</Items>
<Buttons>
<ext:Button runat="server" Text="Add Feed">
<Listeners>
<Click Fn="FeedViewer.FeedWindow.onAddClick" />
</Listeners>
</ext:Button>
<ext:Button runat="server" Text="Cancel">
<Listeners>
<Click Handler="this.up('window').destroy();" />
</Listeners>
</ext:Button>
</Buttons>
</ext:Window>

Here is how it is called from FeedPanel.ascx. In the same way you can call it from an ASXP page.

How to render

protected void AddFeedClick(object sender, DirectEventArgs e)
{
UserControlRenderer.Render(new UserControlRendrerConfig
{
UserControlPath = "uc/FeedWindow.ascx",
SingleControl = true,
Mode = RenderMode.RenderTo
});
}

cwolcott
Oct 10, 2012, 3:52 PM
This looks great. Your brain must be ready to exploded with so much information. :-)

I have an issue with adding a direct event to the FeedWindow.ascx. I get "The control with ID 'button-1084' not found".

I added to the top of FeedWindow.ascx the following function.


<script runat="server">

protected void ShowTimeClick(object sender, DirectEventArgs e)
{
X.Msg.Alert("Call Function", "ShowTimeClick");
}
</script>


Added a new button to FeedWindow.ascx



<ext:Button runat="server" Text="Time" OnDirectClick="ShowTimeClick" />

Daniil
Oct 10, 2012, 5:57 PM
A good joke:)

Probably, you don't recreate a user control on another request. Neither ASP.NET or Ext.NET doesn't recreate controls automatically. If you create some control during one request, it won't be presented during another request unless you recreate it.

But DirectEvent handler (as common ASP.NET handlers) requires a control instance.

I would suggest you to move the logic to, for example, an ASHX or ASMX.

cwolcott
Oct 10, 2012, 6:48 PM
I haven't worked with ashx files before I guess I need to figure this out. The above example was a simple case. My ascx that is being loaded via



UserControlRenderer.Render(
new UserControlRendrerConfig
{
UserControlPath = "DataRequest.ascx",
SingleControl = true,
Mode = RenderMode.RenderTo
});


The DataRequest is/was a fully functioning form. The user needs to fillout about 15 fields and then a submit button would be pressed. From there I need to gather all the data and save it to the database. But it sounds like when I press the submit button I won't have access to the controls and the values the user entered via a Direct Event. Is that correct?

Daniil
Oct 11, 2012, 11:30 AM
But it sounds like when I press the submit button I won't have access to the controls and the values the user entered via a Direct Event. Is that correct?

Yes, it is correct unless you recreate these controls manually.

Personally, I would avoid recreating these controls.

I would:

1. Place all required controls (that must be submitted) to a FormPanel.

2. Point the FormPanel Url property to a submit handler (ASMX, ASHX, or, even, ASPX).
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.Basic-cfg-url

3. Use the FormPanel submit method.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.Panel-method-submit