PDA

View Full Version : [CLOSED] Show User Control during Page_Load



cwolcott
Oct 16, 2014, 3:49 AM
This is an odd question. I have a user control that I will potentially show/hide many times during the life of the page. So I add it to the page via ext:UserControlLoader and initially hide it. In one case I might want it shown right away when the page is loaded.


Run the code and press the "Show UC Dialog" button. Everything looks fine.
Uncomment the two lines in Page_Load and run the code and press the "Show UC Dialog" button. The dialog is shown initially, but the layout is ugly.


What am I overlooking?

ASPX File:


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

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

<!DOCTYPE html>
<html>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
//Window d = X.GetCmp<Window>("UcDialog");
//d.Show();
}

</script>
<head runat="server">
<title />
<style type="text/css">
/* Packs the indicatorIcon to the upper/right of a text field. */
.DialogForm .x-panel-body-default {
background: transparent;
padding: 5px 10px 0px;
}
</style>
</head>
<body>
<ext:ResourceManager runat="server" />

<ext:Window
runat="server"
Title="Question"
Width="250"
Height="400"
Maximizable="true"
BodyBorder="0"
Icon="ApplicationTileVertical"
Layout="BorderLayout">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="Show UC Dialog"
OnClientClick="#{UcDialog}.show();" />
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:UserControlLoader runat="server" ID="uclDialog" UserControlID="ucciDialog" Path="./UcDialog.ascx" />
</Items>
</ext:Window>
</body>
</html>


ASCX File:


<%@ Control Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<ext:Window ID="UcDialog" runat="server" ClientIDMode="static" Title="UC" Icon="UserGreen"
Width="400" Layout="FitLayout" Resizable="false" Modal="true" Border="False"
Constrain="true" Closable="false" Hidden="true" ActiveIndex="0">
<HtmlBin>
<script type="text/javascript">
function closeDialog() {
App.UcDialog.close();
}
</script>
</HtmlBin>
<Items>
<ext:FormPanel ID="UcForm" runat="server" ClientIDMode="Static"
DefaultAnchor="100%" DefaultButton="UcSubmitBtn" Cls="DialogForm">
<Items>
<ext:Label runat="server" Text="Please enter the following info." />
<ext:Container runat="server" Html="<hr/>" MarginSpec="0 0 5 0" />
<ext:TextField ID="UcField" runat="server" ClientIDMode="Static" AllowBlank="false"
FieldLabel="UC Field" TabIndex="1" />
</Items>
<Listeners>
<ValidityChange Handler="App.UcSubmitBtn.setDisabled(!valid);" />
</Listeners>
</ext:FormPanel>
</Items>
<Buttons>
<ext:Button ID="UcSubmitBtn" runat="server" ClientIDMode="Static" Text="Submit" Icon="UserGo"
Disabled="true" OnClientClick="closeDialog" />
<ext:Button ID="UcCancelBtn" runat="server" ClientIDMode="Static" Text="Cancel"
Icon="BulletCross" OnClientClick="closeDialog" />
</Buttons>
<Listeners>
<Show Handler="App.UcForm.reset(); App.UcField.focus(); App.UcDialog.doLayout();" />
</Listeners>
</ext:Window>

Daniil
Oct 16, 2014, 8:24 AM
Hi Chris,

I guess with your approach the Window is shown too early in the component's rendering/layouting life cycle.

This appears to be working.

<Listeners>
<AfterLayout Handler="App.UcDialog.show();" Buffer="50" Single="true" />
</Listeners>

This alternative approach is even better.

protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
(uclDialog.UserControls[0].FindControl("UcDialog") as Window).Hidden = false;
}
}

By the way, do you really need to put a Window into <Items>?

cwolcott
Oct 16, 2014, 2:02 PM
Ok, I like



(uclDialog.UserControls[0].FindControl("UcDialog") as Window).Hidden = false;


Referencing your question:



By the way, do you really need to put a Window into <Items>?


I guess it should be put in


<Content>
<ext:UserControlLoader runat="server" ID="uclDialog" UserControlID="ucciDialog" Path="./UcDialog.ascx" />
</Content>


One difference between putting it in <Content> vs <Items> is that the default focus is not in the text field when the dialog is shown when defined in <Content>. Thoughts?

cwolcott
Oct 16, 2014, 2:12 PM
OK I added DefaultFoucs="UcField" to the ext:Window control and that took care of the final issue.

Please close the thread.

Daniil
Oct 16, 2014, 2:19 PM
I guess it should be put in


<Content>
<ext:UserControlLoader runat="server" ID="uclDialog" UserControlID="ucciDialog" Path="./UcDialog.ascx" />
</Content>


Not quite:)

A UserControlLoader is supposed to be put into <Items>. I just wanted to suggest to put it into <Bin>, maybe.

Ideally, I would avoid putting floating items like a Window into <Items>. I would put it into <Bin>.

For example, are you OK that the modal mask appears inside the parent Window only?

cwolcott
Oct 16, 2014, 2:31 PM
If I put it into <Bin> the window is not displayed during the Page_Load. If it is in <Items> or <Content> it is?

Daniil
Oct 16, 2014, 3:11 PM
If I put it into <Bin> the window is not displayed during the Page_Load.

Yes, if something is inside <Bin>, it's a developer's obligation to show/render it when needed.


If it is in <Items> or <Content> it is?

Yes, it is.

cwolcott
Oct 16, 2014, 3:54 PM
Thanks. I hate forgetting thinks like that.

Please close the thread.