[CLOSED] Load UserControl in a Window

[ermanni.info]

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]

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: https://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...ll=1#post37104

[ermanni.info]

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]

You can try this example without iframe: https://examples2.ext.net/#/Panel/Ba...der_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]

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...ad-alternative
http://forums.ext.net/showthread.php...ll=1#post73904

Thanks!

Ermanni

[Baidaly]

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]

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]

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: https://examples2.ext.net/#/Panel/Ba...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]

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/#!...ainer.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]