PDA

View Full Version : [CLOSED] Load UserControl in a Window



ermanni.info
Feb 16, 2013, 8:01 PM
Hello,

How can I load a UserControl inside a window? I'm using "Desktop" in my application and have several options set in StartMenu. For each option run a DirectMethod responsible for creating the window.

In this UserControl I have a ViewPort and Page_Load event do dynamic creation of GridPanel.

Made a few attempts to link the UserControl in ComponentLoader LoadMode.Component configuring the window but it did not work. I also tried to instantiate a UserControlLoader and add Items how the window but did not work well.

Thanks!

Ermanni

Baidaly
Feb 16, 2013, 11:58 PM
Hello!



How can I load a UserControl inside a window? I'm using "Desktop" in my application and have several options set in StartMenu. For each option run a DirectMethod responsible for creating the window.

In this UserControl I have a ViewPort and Page_Load event do dynamic creation of GridPanel.


Please, take a look at the following example: http://examples2.ext.net/#/Panel/Basic/Loader/



In this UserControl I have a ViewPort and Page_Load event do dynamic creation of GridPanel.

Made a few attempts to link the UserControl in ComponentLoader LoadMode.Component configuring the window but it did not work. I also tried to instantiate a UserControlLoader and add Items how the window but did not work well.
Ermanni

It can be only one instance of the ViewPort on the page. Take a look at the following thread: http://forums.ext.net/showthread.php?9362-CLOSED-UserControl-is-not-visible&p=37104&viewfull=1#post37104

ermanni.info
Feb 17, 2013, 12:08 AM
Baidaly,

But I need to load a UserControl in a window. In the example given is done by loading a page via iframe. I read several posts on the forum about not using iframes because of the cost to the browser and reload files on the client side.

In my application windows are being loaded via iframe and I want to modify the pattern of UserControls. An important detail in my pages are dynamically creating components such as the GridPanel.

Thanks!

Ermanni

Baidaly
Feb 17, 2013, 12:30 AM
You can try this example without iframe: http://examples2.ext.net/#/Panel/Basic/Loader_Html_Mode/

However, you should understand that Html mode will not work in all cases. Also, I don't think that iframe will significantly decrease performance of your application.

ermanni.info
Feb 17, 2013, 2:14 AM
I performed the test with LoadMode = Html and functioned normally. I'll do more tests to see what will happen may be an option. Was in doubt: what is the difference between LoadMode = Frame and LoadMode = Html? Looking at the output generated in the browser (Ctrl + U), the div that manages the window I still have an iframe pointing to my page!

I'm looking at these threads:
http://forums.ext.net/showthread.php?21393-CLOSED-iFrame-load-alternative
http://forums.ext.net/showthread.php?17187-CLOSED-About-Performance-in-Ext-Net&p=73904&viewfull=1#post73904

Thanks!

Ermanni

Baidaly
Feb 17, 2013, 4:00 AM
Mode "Frame" creates iframe element and set url to the 'src' attribute. Browser requests the page using GET method only.

Mode "Html" tries to insert generated code into current page but there are some like no ViewPort in control if you already have and also pay attention to IDs. In Frame mode you wouldn't have these problems.

ermanni.info
Feb 17, 2013, 12:57 PM
Let's be this straight: when using ViewPort and LoadMode Html = the result will LoadMode = IFrame? ViewPort really use to adjust the layout of the grid when the window is resized (I found this practice here in the forum).

When you refer to IDs. They can not be repeated?

Thanks!

Ermanni

Baidaly
Feb 17, 2013, 9:34 PM
Let's be this straight: when using ViewPort and LoadMode Html = the result will LoadMode = IFrame? ViewPort really use to adjust the layout of the grid when the window is resized (I found this practice here in the forum).


No, if your page already has ViewPort and you try to add some user control with LoadMode 'Html' and another ViewPort inside it you will have an error because you cannot insert ViewPort inside another ViewPort due to limitations of Ext JS.

However, if you use LoadMode Frame then you can do this because you are loading your control as separate page into IFRAME tag of current page. More over, page and your control in IFRAME have own JS and Ext Context. You can them using window.parent and getBody(). Please, investigate this example: http://examples2.ext.net/#/Panel/Basic/IFrame_Communication/



When you refer to IDs. They can not be repeated?


If you use IDMode="Static" you have to check that IDs are unique. If you don't use IDMode="Static" IDs can be the same.

Please, follow this thread http://forums.ext.net/showthread.php?12957

Daniil
Feb 18, 2013, 6:30 AM
you cannot insert ViewPort inside another ViewPort due to limitations of Ext JS.

I would say it is not an ExtJS limitation. It is just the Viewport's destination - represent the viewable application area (the browser viewport).
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.container.Viewport

It must be a single control on a page by default. An iframe can contain an other Viewport, because, technically, it is a separate page.

Choosing between the Frame and Html modes, also consider the fact that iframes is rather a heavyweight thing for performance. Especially, in IE.

I would not overuse it.

Also we have a ticket on memory leaking issue with iframes.
https://github.com/extnet/Ext.NET/issues/10

Unfortunately, we were no able to resolve it. It is something internal in ExtJS. Here is our bug report to them.
http://www.sencha.com/forum/showthread.php?242897

For some reason we didn't even open a bug ticket.

ermanni.info
Feb 19, 2013, 10:19 AM

Daniil
Feb 19, 2013, 3:25 PM
Thank you for the details. They seems clear.

But, sorry, I am not sure exactly in the question. Please clarify.



What can be the reason to continue receiving iframe?

ermanni.info
Feb 19, 2013, 10:03 PM
How do I avoid iframe?

Tried through LoadMode = Html me and continues generating iframes. I tried loading a usercontrol in the window but without success (turned page in usercontrol).

Which means to avoid iframe?

Thanks!

Ermanni.

Baidaly
Feb 19, 2013, 11:12 PM
How do I avoid iframe?

Tried through LoadMode = Html me and continues generating iframes. I tried loading a usercontrol in the window but without success (turned page in usercontrol).

Which means to avoid iframe?

Thanks!

Ermanni.

Can you provide sample to reproduce? It's difficult to say something else without it.

ermanni.info
Feb 20, 2013, 1:48 AM

Baidaly
Feb 20, 2013, 3:26 AM

Daniil
Feb 20, 2013, 5:12 AM
There was a bug when the Frame mode was forced if an URL contained "http" and even if an URL actually referred to a page in the same domain.

It was fixed. So, I guess you use something prior to the trunk version, don't you?

ermanni.info
Feb 20, 2013, 10:08 AM
Baidaly and Danill,

The version I'm using is downloaded via the link downloads on the site (I'm using a dll that already compiled in this package Ext.NET.WebForms.Pro.2.1.1.zip). Version 2.1.1.18167. Should I get the trunk?

But now I got some questions related to my code:

1) Why was added in Page_Load desktop instruction?:



protected void Page_Load (object sender, EventArgs e)
{
ResourceManager.RegisterControlResources <GridFilters> ();
}


2) It is wrong to use Form pages that receive GridPanel or rather Ext.Net?



<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" RenderScripts="None" />
<div runat="server" id="container">
</ div>
</ body>


Here's an example that I took as a basis:
http://forums.ext.net/showthread.php?14147-CLOSED-Generate-GridPanel-CodeBehind&p=59347&viewfull=1#post59347

3) Because the ViewPort was not created? It is not compatible with LoadMode = Html? I have pages that besides having the grid also has a panel with viewport filters set and used to treat this case with a central panel and another panel on the left side. In this case it will not work?



// Window to GridPanel
// var viewport = new Viewport ();
// viewPort.Layout = "Fit";
// viewPort.Items.Add (grdTeste);

Container.Controls.Add (grdTeste);


Thanks!

Ermanni

Daniil
Feb 20, 2013, 11:41 AM
The version I'm using is downloaded via the link downloads on the site (I'm using a dll that already compiled in this package Ext.NET.WebForms.Pro.2.1.1.zip). Version 2.1.1.18167. Should I get the trunk?


I think the bug is presented in the v2.1 release.

I am not sure you should get the sources from the trunk. It is currently uses ExtJS 4.2 RC.

If your project is at the beginning, then I would update. If it is near to put in the production, I would think.

If you will decide to stay with the v2.1 I can suggest to prune "http://" from the URL.

Url = HttpContext.Current.Request.Url.GetComponents(UriC omponents.SchemeAndServer, UriFormat.Unescaped) + "/WebForm1.aspx",



By the way, please note that Mode="Html" is not allowable with a cross domain URL.



1) Why was added in Page_Load desktop instruction?:



protected void Page_Load (object sender, EventArgs e)
{
ResourceManager.RegisterControlResources <GridFilters> ();
}



To preload the GridFilters resources (JavaScript, CSS), because it won't be done automatically with the Mode="Html".

Generally, I doubt that Mode="Html" is not so suitable to load a whole page. It is rather constructed to load a piece of HTML.



2) It is wrong to use Form pages that receive GridPanel or rather Ext.Net?



<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" RenderScripts="None" />
<div runat="server" id="container">
</ div>
</ body>


Here's an example that I took as a basis:
http://forums.ext.net/showthread.php?14147-CLOSED-Generate-GridPanel-CodeBehind&p=59347&viewfull=1#post59347


I would not recommend to use it for a big and, I would say serious, project.

There is the "An experimental example, it will not work in all cases." message at the top of the example.
http://examples2.ext.net/#/Panel/Basic/Loader_Html_Mode/



3) Because the ViewPort was not created? It is not compatible with LoadMode = Html? I have pages that besides having the grid also has a panel with viewport filters set and used to treat this case with a central panel and another panel on the left side. In this case it will not work?



// Window to GridPanel
// var viewport = new Viewport ();
// viewPort.Layout = "Fit";
// viewPort.Items.Add (grdTeste);

Container.Controls.Add (grdTeste);




Well, yes, there must be a single Viewport on the page.

===================================

Let's start from the begining.

What exaclty do you need to achieve? Please describe the requirement without the details how you are tryinyg to implement that requirement.

The thread's title is "Load UserControl in a Window". Has this question been answered?

ermanni.info
Feb 20, 2013, 11:29 PM
Cool, let's start from the beginning then!

What I need: find another way not to use iframe in my application that will be great and serious.

Reading posts on the forum found recommendations for working with UserControl. Just realized attempts to load a UserControl in a window but without success.

There are other ways to load entire pages in one window without using iframes? Anyway my question is still not resolved.

Daniil
Feb 21, 2013, 5:56 AM
Reading posts on the forum found recommendations for working with UserControl. Just realized attempts to load a UserControl in a window but without success.

It could be a good solution. Maybe, we could help here to achieve the success.


There are other ways to load entire pages in one window without using iframes? Anyway my question is still not resolved.

To load an entire page, an iframe looks to be a single solution. But do you really need to load an entire page?

Well, I didn't force you not to use iframes at all. I just told about possible problems which you can bear in mind not to overuse it. But it might be good to use in many scenarios. We use it with success for our Examples Explorer. Sometimes it is just a single right solution. Here are some more details about this topic.
http://forums.ext.net/showthread.php?17187&p=73904&viewfull=1#post73904

ermanni.info
Feb 22, 2013, 12:55 AM
So Daniil,

The application that we are developing is a LOB (line-of-business). Thus possess many options. And users need dynamic and parallel processes because they realize that a simple page not answer. Say it closer to the Examples Explorer only instead of tabs have windows.

The link you sent was what motivated me to not work with iframes. And did tests with this example, only trying to load in a window:



<ext:Panel
runat="server"
Height="200"
Width="500"
Layout="AccordionLayout"
Title="Load UserControl from the Page (static DirectMethod, dynamic inner items)">
<Loader
runat="server"
DirectMethod="#{DirectMethods}.DynamicUserControl"
Mode="Component">
<LoadMask ShowMask="true" />
</Loader>
</ext:Panel>


But it did not work. Asp.net returned messages indicating that the extension ".ascx" was blocked. I even add some extra settings in my web.config to unlock ".ascx":



<security>
<requestFiltering>
<fileExtensions allowUnlisted="true">
<remove fileExtension=".ascx"/>
<add fileExtension=".ascx" allowed="true"/>
</fileExtensions>
</requestFiltering>
</security>


You could illustrate how to use DirectMethod in a window carrying a UserControl? What's my idea, my pages will transform into UserControls and would use this way.

Thanks!

Ermanni

geoffrey.mcgill
Feb 22, 2013, 1:30 AM
Maybe the following sample can help, see

http://examples2.ext.net/#/Loaders/Component/Direct_Method/

ermanni.info
Feb 22, 2013, 2:11 AM
Geoffrey,

Have you looked at this link, but I'm not using markup and code behind yes. I am creating the windows desktop via DirectMethod with this code:



[DirectMethod(ShowMask = true)]
public void CreateWindow()
{
Desktop.GetInstance().CreateWindow(new Window
{
ID = "wForm1",
Title = "Form1",
Width = 600,
Height = 330,
Layout = "Fit",
Collapsible = true,
Minimizable = true,
Maximizable = true,
CloseAction = CloseAction.Destroy,
Loader = new ComponentLoader
{
Url = HttpContext.Current.Request.Url.GetComponents(UriC omponents.SchemeAndServer,
UriFormat.Unescaped) + "/WebForm1.aspx",
Mode = LoadMode.Html,
Scripts = true,
LoadMask =
{
ShowMask = true
}
}
});
}


How do I load a UserControl in this code? Just point at the url address for the UserControl and LoadMode = Component? Or instead of using ComponentLoader use UserControlLoader?

Thanks!

Ermanni.

ermanni.info
Feb 23, 2013, 12:23 AM
Hello,

Any suggestions to load a UserControl in the above code?

Thanks!

Ermanni.

Baidaly
Feb 23, 2013, 5:47 AM
We can to create example for your case. But at first are sure that creating ascx and using of Frame loaders are not suitable for your?

Vladimir
Feb 23, 2013, 8:56 AM
Geoffrey gave you right sample, you have to load user control in the page (or http handler, web service and etc) because .ascx files are not served directly by web server (you cannot set url to user control)

ermanni.info
Feb 23, 2013, 10:12 AM
Vladimir, I have understood the example provided by Geoffrey but the example uses markup and no this is how I'm working. In the instance is assigned to one DirectMethod ComponentLoader.ToConfig(). The way I'm doing programmatically I have to create a ComponentLoader to the window. I'll have to use a ComponentLoader inside another ComponentLoader?

I thought the following, as I am creating a ComponentLoader do so as to provide the path of the UserControl? And for this reason I tried to use url.

Thanks!

Ermanni

geoffrey.mcgill
Feb 23, 2013, 10:11 PM
Please make an attempt to code as much of the scenario as possible. The markup samples generally translate quite easily into C# code-behind. Just follow the same class hierarchy.

If you're still having problems after you have posted a *simplified* sample demonstrating as much of the scenario as possible, we'll be happy to take a look.