[CLOSED] Coolite Window Manager

[skynet]

Hello.

We have an application which renders a fairly complex page out to the client. The page consists of about 5 GridPanels and a TabPanel in a ViewPort. To support the editing of the objects represented in the grids there are a further appox. 10 modal windows which are rendered out in the Ext.onReady() function but are not displayed until the user clicks Add, Edit or Delete.

Because the windows are rendered regardless of whether they are used or not, it takes about 8 seconds for IE6 (our target browser for commercial reasons) to process the Ext.onReady(). [Please do not suggest moving to a faster browser as a solution...]

I have been thinking about building some kind of Coolite Window Manager that handles requests for windows. This means they can be created on demand, rather than by default. This would mean that they take slightly longer to load on the first request, but will vastly improve the percieved performance for our app. [Without the hidden modal windows our page loads in under a second.]

Does anyone have any thoughts on this? Looking through the Coolite source code it looks like it should be pretty straightforward but I'd like to hear what Geoffrey and Vlad think about it.

Thanks!

[Sharon]

Why don't you use one modal window and use an iframe to change the content of the window? That way you wouldn't need 10 modal windows.

[skynet]

Sharon,

That's not a bad idea and I'll try it out in the meantime to see how it performs.

One initial concern (without having programmed it yet) is I will have to maintain another script which sets window sizes, icons and titles and so on. This will not be encapsulated within the window objects themselves so is not ideal from an OO programming and maintenance perspective.

I think the Window Manager solution would be an elegant solution to the problem and be a good inclusion to the Coolite programming framework.

Thanks for the input.

[jchau]

You can have 10 modal windows with autoload iframes and it shouldn't slow them your page. The reason your page is slow is probably due to the content inside each modal window. If they are all iframes, it should be fine. I have a page with about 6 hidden modal windows and iframes and did not notice a huge performance hit.

[skynet]

Hi jchau,

thanks for your reply. I am well aware that it is the content of the windows which is slowing the page load down. These are complex forms used to gather user input (with lots of stores for comboboxes etc) and so their layout and render is taking a long time.

I personally find the idea of using iframes a bit of a hack. Firstly it means I need to have a separate aspx file for each of my windows, which are currently in ascx files. Using this approach I would require an ascx and an aspx. Secondly, I need to use a fitlayout on the windows - is this possible using the iframe approach? Thirdly, I'm a bit worried about then having to script across the iframe boundary to process the user input.

Also - it will still request the aspx and render the javascript regardless of whether it's used.

I really think the best way to do this is some form of optional deferredRender on the window.

One option is to just write all the windows in native Ext as it is very straightforward to achieve deferred instantiation in Ext. Unfortunately, we chose to use Coolite to avoid writing Ext!



thanks again for taking the time to respond.

[jchau]

I agree that using iframes is not the ideal solution because of the complexity in communicating back and forth with the parent page. You also take a performance hit with loading the iframe and doing a new page request, especially with IE6/7/8. However, you can defer loading the iframe until it is requested. I believe the latest version of Coolite added a property to defer loading the iframe until the window shows . You can also do a fitlayout on the window.

As much as I enjoy the ease of dropping Coolite controls vs writing pure ExtJS code, I believe for simple windows, it may be best to create the UI using ExtJS on the clientside but set up the necessary AjaxMethods on the server side for retrieving and submitting data. This is especially true if I dont need to reference the UI components on the server side.

[geoffrey.mcgill]

Hi skynet,

Can you either post or send us (support [at] coolite [dot] com) a sample of the page you're building.


I should be able to offer some suggestions to improve performance.


If you're binding GridPanels, try to avoid loading the data inline in the Page. In general, the best option is to use a service based approach and use the Store w/HttpProxy to fetch the Data from a Url. This will avoid forcing all the data to load on intial page_load, which depending on how much data you're rendering could result in a significant speed increase.


Same applies to ComboBox Store's if they're loading a lot of data.


I'm also working on some <ext:Window> "deferred rendering" options. This will be a big focus of the v1.0 release cycle, but I'm hoping to include some functionality within the v0.8.x release(s).

[Vladimir]

Hi,

We are planning to include creating controls during ajax event support to the 1.0 release. At this moment the option with iframes is best (at least for me)


A few notes:


1. You can have one aspx page and several user controls. Set AutoLoad url for all editor windows the same (one aspx) page and auto load parameter which pointed to required user control. Page will be render required editor which contained in user control


2. You don't need fit layout. Just use ViewPort inside aspx page which hosting user controls. Also AutoLoad has PassParentSize property which enforce passing container's width and height (retrieve these information like Request["width"])


3. Passing information from iframe page to the parent page is not a problem. On this forum you can find many examples which demonstrate it (http://forums.ext.net/showthread.php...3141-16-1.aspx)


4. To defer iframe loading use TriggerEvent property. For example for window's autoload use:
TriggerEvent="show"
ReloadOnEvent="true"


See https://examples1.ext.net/#/Panel/Ba...erred_Loading/

[skynet]

Hi Geoffrey,

I am not loading any data inline. We are using a disconnected architecture where the page is loaded and then the data is retrieved from a WCF service.

We are trying to write as little code as possible in the code-behind, relying on coolite to configure the page and then letting ExtJs do the rest.

I will try to send through an example of the page.

Thanks
skynet

[geoffrey.mcgill]

I am not loading any data inline. We are using a disconnected architecture where the page is loaded and then the data is retrieved from a WCF service.

Perfect. WCF is great solution.


Anywho... with the code we'll have a clear picture of the scope and should be able to offer some suggestions, or add functionality to improve the rendering performance. At the minimum we'll do some performance testing to find the bottle necks.